Write and Make

  자바스크립트 템플릿 스트링이란?  자바스크립트에서 문자열을 다룰때 백틱(`) 문자를 사용하는 것을 말한다. ES6 버전부터 지원되는 방식으로 기존 ' , " 를 문자열 안에서 표현하기 위해 \(백슬래쉬)를 사용했던 불편함과 한줄 띄우기 그리고 문자열내에 식을 포함할 수 있는 기능이 개선되었다. 그렇기에 ES6버전이 지원되는 환경이라면 템플릿 스트링을 사용하면 편리하다. 템플릿 스트링의 예시이다.     console . log ( `템플릿 스트링 예제 입니다. 템플릿 스트링은 자동으로 한줄 띄어쓰기를 지원한다. 그리고 문자열내에 식을 포함 할수 있다. 3+5의 값은 ${ 3 + 5 } 입니다.` ); 1. 문자열은 `(백틱) 문자열 사이에 입력한다. 2. 에디터에서 줄 띄우기를 하면 한줄 띄우기가 실행된다. 3. ${ } 를 사용하면 문자열 내에 식을 표현할 수 있다. 위 코드에 대한 실행값은 하기와 같다. 이상으로 템플릿 스트링을 정리해본다. 감사합니다.

  자바스크립트 confirm 대화상자는  확인,취소 버튼을 가진 대화 상자이다.  사용방법은 confirm("메시지"); 이다. 확인 버튼을 선택 시 리턴값은 true 이고, 취소를 선택하면 false 가 리턴된다. 자바스크립트 confirm 대화상자를 정리해본다. 감사합니다.

  자바스크립트 prompt 대화 상자는 하기처럼, 텍스트를 입력받는 필드를 가진 대화상자를 띄울때 사용된다. 입력받은 텍스트는 변수로 별도 저장이 가능하다. 위 예제에서는 name 변수가 prompt 에서 입력되는 텍스트를 저장하는 역할을 한다. 더 정확히 말하자면, string type을 저장하는 변수 이다. "확인" 버튼을 선택하면, name 의 값은 입력한 스트링의 값이 되며, 취소 버튼 시에는 name 값은 null이 된다. 자바스크립트 prompt 대화상자를 정리해보았다.

자바스크립트 대화상자 중 alert 내용이다. alert 는 알림창을 뜻한다. alert 대화상자를 실행하면 결과는 하기와 같다. 정보만 전달하기에 확인 버튼을 선택하면  대화상자는 사라진다. 위 대화 상자를 만드는 자바스크립트 코드는 이와 같다. alert 함수의 인자로는 문자열이 온다. "", '' 등으로 표기 할수 있다. 대화상자에서 확인을 눌렀을때 리턴값이 없기에 undefined 라고 표기된다. alert() 대화상자 는 말그대로 어떤 정보를 전달할때 사용하는 대화 상자이다. -끝-

HTML 태그에서 이벤트가 발생했을때, 예를 들어 화면에 버튼이 클릭되었을때 어떤 반응을 보여주어야 한다면, 화면 부분은 HTML 요소가 전담하고 자바스크립트는 동작 구현에 집중 한다. 화면에는 버튼이 하나 있고, 그 버튼이 클릭될때 콘솔창에 텍스트를 출력하는 예제를 만들어본다. < body >   < button > 미사일 </ button >   < script > let missile  = document . querySelector ( 'button' );   const onClickButton = () => {     console . log ( "미사일 버튼 클릭" );   };      missile . addEventListener ( 'click' , onClickButton );   </ script >   </ body > 자바스크립트 코드는 HTML 화면 구성 밑에 존재한다. 화면요소 들을 정상적으로 컨트롤 하기 위함이다. 여기서 중요한 점은 바로, HTML요소에서 올라온 이벤트를 자바스크립트와 연결하는 방법이다. 실제 이벤트를 발생시키는 것은 HMTL 요소 이다.  여기서는 Button 이 되겠다. 그 이벤트를 받아서 동작시키기 위해서는 "이벤트 리스너" 라는 자바스크립트 단의 구현이 필요하다. "이벤트 리스너" 는 말그대로 특정 이벤트가 발생함을 듣고 있다가, 트레이스 하다가 해당 이벤트가 발생하면 특정 함수를 실행하는 역할을 한다. 여기서 특정 함수는 "콜백 함수" 라고 부른다. 이벤트 리스너를 등록하기전 먼저, 우리는 이벤트가 발생하는 HTML요소에 접근 할수 있어야 한다.  여러 방법이 있지만 가장 간편한  document.querySelector() 라는 자바스크립트 함수를 사용한다. 해당 함수의 인자값은 "선택자" 가 들어

  HTML에서 form 이란 사용자 와 상호작용을 통해서 서버로 데이터를 보낼 수 있는 양식을 말한다. 위 그림과 같이 글자를 입력받는 양식 또는 버튼 과 체크박스 라디오 버튼 등등 다양한 입력 양식 들의 태그들이 존재한다. 이러한 태그들은 form 이란 태그로 둘러쌓여져야 한다. form 태그는 컨테이너 역할을 하는 것이다. form 태그의 사용법은 하기와 같다.   < form >     < fieldset >       < legend > 로그인 </ legend >       < label for = "id" > 아이디 </ label >       < input type = "text" id = "id" >       < br >       < label for = "pw" > 비밀번호 </ label >       < input type = "text" id = "pw" >     </ fieldset >     < fieldset >       < legend > 비밀번호 찾기 </ legend >       < label for = "lookfor" > 전화번호 입력 </ label >       < input type = "password" id = "lookfor" >     </ fieldset >   </ form > <form> 요소 안 컨텐츠 부분에 다양한 타입의 폼들을 넣어서 정의해주면 된다. 서버와 연동 했을때는 form 의 속성에 하기와 같은 속성 값을 주어서 핸들링 할 수 있다. <form action="서

구글 블로그에서 대표 이미지를 설정 하는 방법을 알아봅니다. 글을 적으면, 자동으로 글에 포함된 첫번째 이미지가 대표 이미지로 설정됩니다. 다른 이미지 로 변경하고 싶다면 어떻게 해야될까요? 여기서는 위 파란색 네모 박스의 이미지를 설정해봅니다. 먼저 이미 대표 이미지가 설정된 글로 이동 후 수정모드 로 들어갑니다. 편집모드를 HTML 로 변경 합니다. 해당 페이지에는 이미 대표이미지 로 설정될 이미지 엘리먼트가 들어있습니다.  여러분들이 처음 만들때는 대표이미지 로 사용될 이미지를 '새 글쓰기' 로 업로드 한뒤 html 모드로 변경한뒤 이미지 코드를 확인 해야 합니다. 이미지 소스는 각자 다 다르겠죠.  대표이미지로 설정을 위해서는 해당 코드가 첫줄에만 있어야 합니다.  왜그런지는 정확히 잘 모르겠습니다.  이미지가 글 내부에서는 보이지 않고, 썸네일 이미지에만 보이기 위해서  Style 속성값을 줍니다. 이미지를 보이지 않겠다는 뜻 입니다. 해당 코드를 복사 한뒤, 여러분이 원하는 글로 이동합니다.  글을 HTML 모드로 변경 뒤, 해당 코드를 위에서 언급한 것 처럼 글 제일 처음에 붙여넣기 합니다. 첫줄에 붙여넣기 가 완료 되었습니다. 저장 하고 리스트 와 블로그 미리보기에서 확인 해봅니다. 썸네일이 잘  업데이트 되었네요. 감사합니다.

audio 태그에 이어서 이번 시간은 video 태그에 관해서 다루어 본다. video 태그는 영상을 재생 해주는 태그 이다. 사용법은 하기와 같다. src 속성은 : 재생될 영상 파일의 위치를 나타낸다. 위 코드에서는 video 라는 폴더를 별도로 만들어서 rose 라는 영상을 넣어두었다. controls 속성 : audio 태그와 마찬가지로 영상 컨트롤 바가 나타나도록 하는 속성이다. 이 속성이 없으면 영상재생 되지 않기에, 꼭 해당 속성을 넣어서 사용자가 영상을 제어할 수 있게 만들어 주어야 한다. 해당코드를 실행한 웹 페이지 결과이다. 재생 버튼을 클릭하면 영상이 잘 플레이 된다. 영상의 크기는 기본적으로 영상의 기본 사이즈 로 나온다. 크기를 조정하고 싶다면, 가로, 세로 속성값을 추가해야 한다. width 와 height 속성을 추가했고, 사이즈 값을 설정 했다. 해당 사이즈는 숫자는 pixel 을 의미한다.  참고로, 속성 값은 태그 안에서 순서 가 없기에 원하는 위치에 적어주면 된다 그리고, 속성을 적을때는 콤마는 생략한다. (콤마를 넣으면 오류가 발생) 웹 페이지에서 확인해보면 영상의 사이즈가 조절됨을 확인 할 수 있다. 영상파일 역시 브라우저에서 인식할 수 있는 포맷이 있다. MP4, WebM,Ogg 파일이다. 현재 사파리 브라우저에서는 ogg 가 공식적으로 지원되지  않음을 확인 할 수 있다. 비디오 태그 사이 즉, 비디오 콘텐츠 부분에는 source 라는 태그를 삽입할 수 있다. 이 역할은 해당 브라우저가 특정 비디오 파일 포맷을 지원하지 않을 경우 그 다음 비디오 파일을 실행하라는 의미이다. 비디오 태그 에는 controls 과 크기만 적어주고, source 에 순차적으로 실행될 비디오 파일의 포맷을 기재한다. 위 코드에서는 처음 ogg 를 실행하고, ogg 가 지원하지 않는다면 mp4를 실행하라는 뜻이다. mp4 마저 지원하지 않을때는 오류내용을 텍스트로 보여주는 코드이다. 물론, source 태그가 없이 비디오 태그만으로도 비디오

audio 태그 역시 웹 페이지에서 많이 사용되는 태그 중 하나이다. 사운드를 재생해주는 태그 이다. 태그 사용법은 이와 같다. src : 사운드 파일의 위치를 적는다. 이렇게만 하고 실행을 하면, 웹 페이지에는 아무런 화면 도 사운드도 재생되지 않는다. 필수 속성을 하나 더 줘야 한다. 바로, controls 이다.  controls : 사운드 컨트롤 바를 나타낸다. 웹 페이지 에서 결과를 확인 하면 컨트롤 재생바 가 나오고 재생 버튼을 클릭 시 사운드가 재생된다. audio 태그에서 주의할 점은 바로 사운드 포맷의 지원 유무 이다. 브라우저 별로 어떤 파일을 지원하는 지 외울 필요는 없다. 인터넷으로 검색하여, 브라우저 별 지원 파일을 확인 만 하면 된다. Mp3, WAV, OGG 3개의 파일이 사용된다. 다른 파일들도 브라우저에 따라 실행은 되나, 호환성을 생각하여 위 3개의 파일 포맷을 사용하는 것이 가장 좋다. 감사합니다.

웹 페이지에서 텍스트 를 강조하는 태그에는 em 태그 가 있다 strong 태그 가 굵은 글씨체 였다면, em 은 em 콘텐츠 를 이태릭 체로 꾸며준다. em 은 참고로 emphasize(강조하다) 의 약자이다. 강조하고 싶은 텍스트에 em 태그를 사용한다. em요소는 열린태그 와 콘텐츠 텍스트 그리고 닫힘 태그로 구성된다. 웹페이지에서 결과를 확인 해보자. em element(요소) 가 이태릭 체로 display되고 있다. 보이는 것 외에도 SEO 로봇 및 브라우저 역시 해당 텍스트를 storng 처럼 강조된 텍스트로 인식한다. 텍스트 강조를 위해서 strong 및 em 태그를 사용하는 것이 좋다. 감사합니다.