-
[HTML5 & CSS3] Chapter 2. HTML5 태그 기본프로그래밍/HTML5 Web 2014. 4. 8. 15:57반응형
이 포스팅은 모던 웹 디자인을 위한 HTML5+CSS3 입문 (한빛미디어)의 내용을 요약한 것으로 저작권법상 소스코드는 기입하지 않습니다. 개인적인 공부를 위한 요약이므로 상세하게 공부하기 위해서는 여기를 눌러 책을 구입하는것을 추천드립니다.
- HTML5의 페이지는 사용자에게 보이는 뷰와 사용자에 보이지 않는 코드로 나누어진다.
- HTML5의 태그들에는 종류가 아주 다양하다. 외울 생각을 하지 말고 필요한게 있으면 그 요소가 떠오를 수 있을 정도의 공부만 필요하다. 또한 공부를 목적으로 최대한 빨리 정리하는것에 목표를 두고 있으므로 소스 코드 작성에 시간을 많이 투자 하지 않도록 하겠다.
- 태그들은 여기를 눌러 생활코딩 홈페이지의 HTML사전을 참고하는것이 좋다.
- 최근의 웹 개발도구에서는 자동 완성 기능이 작동하는 프로그램들이 많으므로 이를 활용하면 매우 편리하다.
2.1 글자 태그
- 글자 태그는 웹 페이지에서 가장 많은 비중을 차지한다.
- 글자를 설정하는 속성들이 매우 다양하므로 대표적인 몇몇가지만 기억하도록 하면서 필요할때마다 기억해낼수 있는 능력 필요
2.1.1 제목
- HTML5의 대표적인 글자 태그는 제목을 입력할 때 사용하는 제목 글자 태그
- <h1> ~ <h6> 까지 태그를 제공하는데 숫자가 클수록 글자들이 커진다.
- h는 header를 의미한다.
2.1.2 본문
- HTML5에서는 <p> 의 글자 태그를 제공하는데 paragraph의 줄임말이며 하나의 단락을 생성할수 있다.
- <br> 태그는 개행 태그이며 Enter 한자리를 비워두는것과 같은 역할을 하며 <br /> 라고 사용 가능
- <hr> 태그는 수평 줄 태그, 사용시 수평으로 줄을 삽입
2.1.3 앵커 태그
- HTML(Hyper Markup Language)에서 가장 중요한 단어는 H를 의미하는 하이퍼텍스트인데 이는 사용자의 선택에 따라 특정한 정보와 관련된 부분으로 이동할 수 있게 조직화된 문서를 의미
- <a> 태그를 사용하면 서로 다른 웹 페이지 사이를 이동하거나 웹페이지 내부에서 특정한 위치로 이동 가능
2.1.4 글자 형태
- <b> : 굵은 글자 태그
- <i> : 기울어진 글자 태그
- <small> : 작은 글자 태그
- <sub> : 아래에 달라붙는 글자 태그
- <sup> : 위에 달라 붙는 글자 태그
- <ins> : 밑줄 글자 태그
- <del> : 가운데 줄이 그어진 글자 태그
- 위의 태그들은 글자의 속성을 지정할수 있는 태그들인데 최근에는 CSS로 처리하므로 현대에는 잘 사용하지 않는다.
2.1.5 루비 문자- 루비문자는 일본어에서 자주 사용되는 글자 형식으로 한자 위에 표시되는 글자를 의미, 잘 사용하지 않으므로 생략
2.2 목록 태그
- 웹 페이지에 자주 사용되는 요소 중 하나가 메뉴인데 일반적으로 페이지를 이동할 때 사용되는 메뉴를 내비게이션 메뉴라고 부른다.
2.2.1 기본 목록
- <ul> : 순서가 없는 목록 태그
- <ol> : 순서가 있는 목록 태그
- <li> : 목록 요소
- 중첩해서 목록을 만들때에는 <li> 태그 안에 중첩해서 입력 가능
2.2.2 정의 목록
- 정의 목록은 특정 용어와 그 정의를 표현할 때 사용되는 태그
- <dl> : 정의 목록 태그
- <dt> : 정의 용어 태그
- <dd> : 정의 설명 태그
2.3 테이블 태그
- 표를 만들 때는 table 태그를 사용
- <body> 태그 안에 table 태그를 사용 가능하다.
- table 태그 안에 입력할 수 있는 태그는 많지만 실제로 많이 쓰이는 아래 태그들이다.
- <tr> : 표 내부의 행 태그 : table row
- <th> : 행 내부의 제목 셀 태그 : table header
- <td> : 행 내부의 일반 셀 태그 : table data
2.3.2 테이블 태그의 속성
- <border> : 표의 테두리 두께를 지정
- <rowspan> : 셀의 너비 지정
- <colspan> : 셀의 높이 지정
2.4 이미지 태그
- <src> : 이미지 경로 지정
- <alt> : 이미지가 없을 때 나오는 글자 지정
- <width> : 이미지의 너비 지점
- <height> : 이미지의 높이 지정
- 또한 이미지를 삽일 할 때에는 절대 경로와 상대 경로를 구분하여 삽입하여야한다.
- 팁으로 사이즈에 맞는 이미지를 http://placehold.it/ 에서 제공한다.
2.5 오디오 태그
- 오디오 태그는 웹 프라우저에서 플러그인의 도움 없이 음악을 재생할 수 있게 만들어주는 HTML5 태그, IE8.0 이하에서는 사용 불가능
- <audio> </audio>로 사용
- <src> : 음악 파일 경로 설정
- <preload> : 음악을 재생하기 전에 모두 불러올지 지정
- <autoplay> : 음악을 자동 재생할지 지정
- <loop> : 음악을 반복할지 지정
- <controls> : 음악 재생 도구를 출력할지 지정
2.5.2 source 태그
- 브라우저들마다 지원하는 확장자들이 다르므로 어떤 브라우저에서는 파일 재생이 불가능 할수 있다.
- source 태그를 통하여 각각 MP3, OGG와 같은 파일을 개별 제공하면 정상적으로 파일 재생 가능
- source 태그의 type속성을 입력하지 않을 수도 있지만 트레픽이 낭비되므로 type속성을 지정해두는게 좋다.
2.6 비디오 태그
- HTML5부터는 웹브라우저에서 별도의 플러그인 없이 비디오 재생 가능
2.6.1 video 태그
- <src> : 비디오 파일 경로 설정
- <poster> : 비디오 준비 중일 때의 이미지 파일 경로 지정
- <preload> : 비디오를 재생하기 전에 모두 불러올지 지정
- <audoplay> : 자동 재생 여부
- <loop> : 비디오를 반복 할지 지정
- <controls> : 비디오 재생 도구 출력 여부
- <width> : 비디오 너비 지정
- <height> : 비디오 높이 지정
- 비디오의 경우도 audio 태그처럼 지원하는 형식이 다 다르므로 지원 여부를 확인하자.
- IE 8.0에서는 미지원하므로 플러그인을 통해 지원가능하게 설정가능하다. <haed></haed> 사이에 삽입
<link href="//vjs.zencdn.net/4.5/video-js.css" rel="stylesheet"> <script src="//vjs.zencdn.net/4.5/video.js"></script>
2.6.2 track 태그
- track 태그는 video 태그에 자막을 표시할 때 사용하는 태그
- 우리나라에서는 smi 자막을 많이 쓰지만 HTML5에서는 srt를 기본 자막으로 인식한다.
- 2012년 6월 기준에서 track 태그를 지원하는 웹브라우저가 존재하지 않으므로 이 태그는 video.js 태그를 적용시켰을 경우에만 작동한다.
2.7 입력 양식 태그
- 입력 양식을 다루는 태그이다. 서버 관련 기술을 알아야하 하므로 상세히 다루지 않는다.
2.7.1 입력 양식 개요
- <form> </form> 로 작동
- <action> : 입력 데이터의 전달 위치를 지정
- <method> : 입력 데이터의 전달 방식을 선택
- method 속성에는 GET요청과 POST요청이 존재한다. GET 방식은 URL이 변경되지만 POST방식은 URL이 변경되지 않는다.
- 이후 모던 시리즈 서버에서 설명한다.
2.7.2 기본 input 태그
- input 태그는 사용자에게 정보를 입력받는 기능을 수행하는 태그
- 정보를 입력받을수 있다.
- 속성은 종류가 많아 생략한다. 궁금하면 여기를 참고하자.
2.7.3 HTML5 입력 양식 태그
- 앞에서 살펴본 input 태그는 HTML4에서 지원하던 태그이다. HTML5는 추가로 더 지원한다.
- <color>, <date>, <datetime>등등..
2.7.4 textarea 태그
- input 태그가 아닌 입력양식이 두가가 있는데 textarea, select 태그가 있다.
- textarea는 글상자를 생성가능하다.
2.7.5 select 태그
- select 태그는 여러 개의 목록에서 몇 가지를 선택할 수 있는 입력 양식 요소이다.
- <select> : 선택 양식을 생성
- <optgroup> : 옵션을 그룹화
- <option> : 옵션을 생성
- 다중선택의 필요성이 있다면 multiple 속성을 사용
- 최근에는 자바스크립트로 많이 대체되고 있는 추세이다.
2.7.6 fieldset 태그와 legend 태그
- 입력양식을 설명할 때는 fieldset태그와 legend 태그를 사용
2.8 공간 분할 태그
- 가장 대표적인 공간 분할 태그는 div 태그
- CSS와 더불어 원하는 레이아웃 구성 가능
2.8.1 div 태그와 span 태그
- <div> : block 형식으로 공간을 분할한다 : 차곡차곡 쌓아 올려지는 형식
- <span> : inline 형식으로 공간을 분할한다. : 한줄에 차례차례 위치하는 형식
2.8.2 HTML5 시멘틱 구조 태그
- 일반적으로 HTML5의 가장 큰 변화를 시멘틱 태그라고 하는데 이 때문에 HTML5 웹 페이지를 시멘틱 웹 페이지라 부른다. 이는 '의미론적'의 영어 단어이다.
- 특정한 태그에 의미를 부여해 페이지를 만드는 시도가 시작되었는데 이를 시멘틱 웹이라고 표현한다.
- 깊게 들어가면 설명할것이 너무 많아지므로 위키피디아 문서를 참고하자.
* 정리후기
- 챕터 간격이 매우 넓어서 놀랬다. 하루에 한 챕터씩 할 생각이었는데 한 챕터당 대략 50장정도 된다;; 애초에 HTML자체가 CSS3분량 할당이 절대적으로 많지만.. 빠르게 정리해야겠다. 한번에 3가지 언어 + 자료구조와 같은 알고리즘같은 부분들도 공부하니 바쁘다. 드래곤 길들이기 볼려고 했는데..
반응형'프로그래밍 > HTML5 Web' 카테고리의 다른 글
[HTML5] 기본 기능과 벤더 프리픽스 제거 (0) 2016.07.09 MongoDB 데이터 검색, 정렬, 수정, 삭제기능으로 CRUD 앱 구현 (0) 2016.07.07 MongoDB 기본 명령어와 조작법 (0) 2016.07.06 Windows 운영체제에서 MongoDB 설치 및 세팅 (0) 2016.07.06 [HTML5 & CSS3] Chapter 1. HTML5 개요 (0) 2014.04.08
