사용자 입력 양식 틀 form 태그 form 태그는 사용자에게 입력받은 데이터를 서버 쪽으로 보내기 위한 틀입니다.  form 태그 안에 사용자가 입력할 컨트롤들을 선언하고 서버로 보낼 때는 form 태그 안에 입력된 데이터가 한 번에 서버로 전송되게 됩니다.  쉽게 이야기해서 서버에게 보낼 데이터의 시작과 끝을 알리는 공간으로 보시면 됩니다. form 태그 안에는 여러 속성이 있는데, 서버와의 통신 방식이나 form 태그의 데이터를 처리해 줄 프로그램을 지정한다든지 서버 통신과 관련된 속성들이 존재합니다. form 태그의 주요 속성 종류 설명 method 사용자가 입력한 내용을 서버쪽 프로그램으로 어떻게 넘겨줄 것인지 지정 get : 256 ~ 4,096byte 까지만 서버로 넘길 수 있다 . 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점 post : 입력한 내용의 길이에 제한이 없고 , 사용자가 입력한 내용도 드러나지 않음 . name 자바스크립트로 폼을 제어할 때 사용할 폼의 이름을 지정 action <form> 태그 안의 내용을 처리해 줄 서버 프로그램을 지정 target action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함 . autocomplete 자동완성 기능에 대한 사용여부 기본값은 "on" 메소드의 전송방식 get방식과 post방식 차이 form 태그에서 서버로 전송하는 방식 중에는 get 방식과 post 방식 두 가지가 존재합니다. 서버로 데이터를 보내는 작업을 하는 것은 똑같지만 작동 방식에 차이가 있습니다.  get 방식 의 경우 서버로 보낼 데이터를 url에

비디오와 오디오 파일을 첨부하는 audio, video 태그 HTML 문서에 오디오 및 비디오 파일의 첨부가 필요할 때 각각 audio 태그와 video 태그를 사용하면 됩니다. 먼저 오디오 삽입에 사용되는 audio 태그는 src 속성을 사용해서 오디오 파일의 경로를 적어주면 되는데, 이때 로컬에 위치한 오디오 파일 외에도 웹상에 있는 오디오 파일의 URL을 적어주셔도 첨부가 됩니다. 비디오 삽입에는 video 태그를 사용하며, audio 태그와 마찬가지로 src 속성을 이용해 첨부할 비디오 파일의 경로를 적어줍니다. 이때, width 속성을 이용해 플레이어의 너비를 조정할 수 있습니다. audio 태그와 video 태그의 주요 속성에는 웹페이지 로드 시 자동으로 미디어 재생여부를 결정하는 audoplay 속성과 미디어 제어(재생, 멈춤 등)에 사용되는 controls 속성이 있습니다. audio, video 태그 주요 속성들 종류 설명 controls 플레이어 화면에 컨트롤 바를 표시 autoplay 오디오나 비디오를 자동으로 실행 loop 오디오나 비디오를 반복 재생 muted 오디오나 비디오의 소리를 제거 preload 페이지를 불러올 때 오디오나 비디오 파일을 어떻게 로딩할 것인지 지정 , auto, metadata, none 값을 사용 가능 기본값 preload="auto" width, height 비디오 플레이어의 너비와 높이 지정 poster=" 파일 이름 " 비디오가 재생되기 전까지 화면에 표시될 포스터 이미지를 지정 외부 미디어 및 파일 삽입에 사용되는 object, embed 태그 e

a 태그로 링크 달기 a 태그를 사용하면 다른 페이지 혹은 같은 페이지의 특정 위치로 이동이 가능하며, URL 주소를 입력하면 다른 사이트로 이동이 가능해집니다.  사용법은 a 태그의 href 속성에 이동을 원하는 주소를 넣어주면 됩니다.  같은 페이지 내의 특정 위치로 옮기고자 한다면, 이동을 원하는 태그의 ID 선택자를 href 속성 에 넣어주면 됩니다.  a 태그의 링크를 클릭했을 때, 창이 열리는 위치를 지정할 수 있는데 이는 target 속성 을 이용해 주면 됩니다. a 태그 target 속성 리스트 target 속성값 작동 방식 _self 브라우저의 현재 활성화되어 있는 탭에 표시합니다 . _blank 새로운 창에서 표시합니다 . _parent 현재 활성화되어 있는 브라우저의 부모에 표시하고 , 부모가 없을시 _self 와 동일합니다 . _top 현재 활성화되어 있는 브라우저의 최상단에 표시하며 , 없을시 _self 와 동일합니다 . a 태그 사용 예제 다른 사이트를 새창에서 열기 <a href="https://www.google.com/" target="_blank">구글 홈페이지</a> 같은 페이지 특정 위치 이동 아래는 같은 페이지의 newsPage라는 ID 선택자의 위치로 스크롤이 이동하게 되는 태그입니다. <section id="newPage">콘텐츠 내용들...</section> <a href="#newPage">뉴스페이지 이동</a> 이미지를 삽입하는 img 태그 작성 중인 페이지에 이미지를 삽입할 때는 img 태그를 사용하면 됩니다.  삽입할 수 있는 이미지는 로컬에 있는 이미지 외에도 서버

HTML 테이블, 표 구성 요소 관련 태그 table 태그, caption 태그 HTML 문서에 테이블을 추가할 때, 표의 구성 요소들을 <table></table> 안에 정의해줘야 합니다. 그리고 caption 태그를 사용해서 표의 제목을 달 수 있습니다. 표의 구조를 정의 thead, tbody, tfoot 태그 일반적인 표의 구조를 보게 되면 첫 행의 열에는 표의 열의 머리글이 위치하고 다음행부터는 본문의 내용들이 나오며, 표의 마지막 행에는 입력된 데이터의 전체 본문 영역 데이터의 합이나 TOTAL SUM값 등 표의 요약된 데이터가 위치하게 됩니다. 위에 설명된 것 과 같이 표의 구조상 표의 헤더 부분은 thead 태그로 선언하고, 표의 본문 영역은 tbody 태그로 표의 하단 요약부분은 tfoot 태그로 정의할 수 있습니다. 표의 구조를 태그로 구분 지었을때 얻을 수 있는 효과는 table 태그의 웹표준을 준수할 수 있으며, 자바스크립트 언어를 이용하여 thead 태그와 tfoot 태그로 지정한 부분은 고정으로 하고 tbody 부분만 스크롤 되도록 구현할 수 있습니다. 또, 인쇄할 때 각장마다 tbody와 tfoot으로 지정한 부분을 고정하여 출력할 수도 있습니다.  HTML 테이블, 표 본문 작성 tr, th, td 태그 HTML의 표의 행과 열을 만들 때는 우선 tr 태그를 선언해서 행을 추가 시키고 tr 태그 안에 td 태그를 넣어 각 열마다의 데이터를 넣어서 선언합니다.  이때, 열의 헤더 부분(머리글)로 지정하고 싶은 셀에는 th 태그를 이용해서 선언하고 th 태그로 선언했을 때는 일반 셀보다 굵게 표시되는 특징이 있습니다. 셀 병합 속성 rowspan, colspan 속성 테이블에서 셀 병합이 필요한 경우에는 병합이 시작되는 td 태그 및 th 태그에 rowspan이나 colspan의 속성을 사용하면 병합을 할 수 있습니다. 행 병합이 필요한 경우에는 rowspan="병합할 행 숫자" 열 병합이 필요한

HTML 리스트 목록 만들기(ol, ul, li) HTML 문서 작성의 목록을 만들 때 목록의 스타일에 따라서 ol, ul 태그를 사용합니다.  ol 태그 는 숫자 및 알파벳 기호를 사용해서 순서가 있는 리스트 작성에 사용 됩니다. 단계적인 리스트가 필요하거나 순서가 의미가 있는 리스트에는 ol 태그를 사용해서 정의해야 합니다. ol 태그의 type 속성을 이용하면 순서를 매기는 기호를 변경할 수 있습니다.  <ol type="1"> 와 같이 선언하시면 됩니다. ol 태그 type 속성값 속성값 표현식 1 1, 2, 3 a a, b, c A A, B, C i i, ii, iii I I, II, III ul 태그 는 순서와 상관없고 정렬이 필요 없는 리스트를 작성 할 때 ul 태그를 사용하면 됩니다. 웹사이트의 메뉴 구성 및 이미지를 여러 장 보여줄 때, ul 태그를 사용해서 목록화하면 각 요소 정렬 및 그룹화하기 좋기 때문에 빈번하게 사용하는 태그 입니다. ol 태그와 ul 태그 안에 또다시 ol 태그와 ul 태그 등을 선언해서 중첩 선언하는 것이 가능합니다. li 태그는 ol 태그와 ul 태그 안에 정의되어 각 목록 하나하나를 나타내는 태그 입니다. 리스트 태그(ol, ul, li) 사용법 순서가 있는 ol 태그 사용 예시 <ol>   <li>개회식</li>   <li>개회</li>   <li>행사진행</li>   <li>폐막식</li> </ol> 순서가 있는 ol 태그 사용 결과 개회식 개회사 행사진행 폐막식 순서가 필요없는 ul 태그 사용 예시 <ul>   <li&g