03 장 HTML5 기본태그
1. 글자태그 2. 목록태그 3. 테이블태그 4. 이미지태그 5. 공간분할태그
HTML5 에서지원하는기본태그를사용할수있다. 공간분할태그와시맨틱태그의용도를이해하고사용할수있다.
1. 글자태그 가장많은비중을차지하는태그 그림 3-1 글자태그중심의웹페이지
1.1 제목글자태그 제목글자태그 문서의제목을표현할때사용 h : Heading을의미 표 3-1 제목글자태그 태그이름 h1 h2 h3 h4 h5 h6 설명첫번째로큰제목글자태그두번째로큰제목글자태그세번째로큰제목글자태그네번째로큰제목글자태그다섯번째로큰제목글자태그여섯번째로큰제목글자태그
기본예제 3-1 제목글자태그익히기 예제의포인트 h1 : 가장큰제목태그 h6 : 가장작은제목태그 [ 코드 3-1] 이용하여작성
1.1 제목글자태그 NOTE_ 특수문자표기연속된공백을모두표시하려면   사용   를사용하지않은경우   를사용한경우
1.1 제목글자태그 NOTE_ 특수문자표기   외에다음과같은특수문자를사용하여공백, 괄호등을화면에표시할수있음 표 3-2 특수문자의종류 특수문자 < < > > & 출력문자 공백 & 그림 3-3 특수문자사용예
1.2 본문태그 p 태그 Paragraph를의미하며문단하나를생성 제목다음에나오는본문입력시사용 표 3-2 본문태그 p 태그 태그이름 p 설명 본문글자태그
기본예제 3-2 본문태그익히기 예제의포인트 각 p 태그가문단을하나씩생성 [ 코드 3-5] 를이용하여작성
1.2 본문태그 NOTE_Lorem Ipsum 키케로가라틴어로지은최고선악론에나오는단어를마구잡이로추출하여만든글 그림 3-4 Lorem Ipsum(http://lipsum.com/)
1.2 본문태그 br 태그 다른글자내부에삽입가능 hr 태그 다른글자내부에삽입불가능하나정상적으로출력됨 표 3-4 본문태그 br 태그와 hr 태그 태그이름 br hr 설명 개행태그 수평줄태그
기본예제 3-3 본문태그활용하기 [ 코드 3-6] 을이용하여작성
1.3 하이퍼링크태그 하이퍼텍스트 사용자의선택에따라관련된특정정보로이동할수있도록조직된문서 a 태그사용 a 태그 Anchor 를의미 다른웹페이지나웹페이지내부의특정위치로이동할때사용 표 3-5 하이퍼링크태그 태그이름 a 설명 하이퍼링크태그
1.3 하이퍼링크태그 a 태그의 href 속성 Hyper Reference를의미 어떤페이지로이동할지웹브라우저에알려줌 그림 3-5 a 태그의 href 속성 href 속성의여러경로 절대경로 : 현재웹페이지의위치와상관없이웹페이지또는파일의위치를나타내는경로 상대경로 : 현재웹페이지의위치에따라결정되는웹페이지또는파일의경로 아이디경로 : 현재웹페이지내부에있는다른태그의 id 속성 메일경로 : 메일주소
기본예제 3-4 하이퍼링크설정하기 1. 특정웹페이지에연결하기 [ 코드 3-7] 을따라작성후글자클릭 한빛미디어네이버다음
기본예제 3-4 하이퍼링크설정하기 2. 웹페이지내부에연결하기 h1 태그에서 id 속성입력후 a 태그의속성에 #id 속성 입력 [ 코드 3-8] 을따라작성 id 속성이중복되면먼저나오는태그로이동됨 NOTE_ 빈링크웹표준을지키면서이동하지않는 a 태그를만들때는 href 속성에 # 을입력. 이를빈링크라고부름
1.4 글자모양태그 HTML5 에는 big 태그가사라짐 표 3-6 글자모양태그 태그이름 b i small sub sup ins del 설명굵은글자태그기울어진글자태그작은글자태그아래첨자태그위첨자태그밑줄글자태그가운데줄이그어진글자 ( 취소선 ) 태그
1.4 글자모양태그 글자모양태그의특징 글자모양태그는모두단독으로사용가능 제목과본문글자모양태그내부에입력가능 글자모양태그내부에다른글자모양태그를삽입가능 글자모양태그내부에제목과본문글자태그는사용불가능 그림 3-6 웹표준을위반한글자모양태그사용예
기본예제 3-5 글자모양태그연습하기 [ 코드 3-9] 를이용하여작성
2 목록태그 네비게이션목록 웹사이트의다른웹페이지로이동할수있는버튼을모아둔것 그림표 3-7 3-7 글머리다음메인기호페이지의목록네비게이션목록 태그이름 ul(unordered list) li(list item) 설명 글머리기호목록태그 목록요소 표 3-8 순서번호목록 태그이름 ol(ordered list) li(list item) 설명 순서번호목록태그 목록요소
기본예제 3-6 목록태그익히기 1. 글머리기호목록만들기 [ 코드 3-10] 을이용하여작성 2. 순서번호목록만들기 [ 코드 3-11] 을이용하여작성
3 테이블태그 표 3-9 테이블태그의종류 태그이름 table thead tbody tfoot tr th td 설명표 (table) 표의머리 (table head) 표의본문 (table body) 표의꼬리 (table foot) 표의행 (table row) 표의제목요소 (table header) 표의일반요소 (table data)
3 테이블태그 [ 표 3-9] 의테이블태그는다음과같은계층구조로작성 그림 3-8 테이블태그구조
기본예제 3-7 표만들기 1. table 태그를사용하여시간표만들기 [ 코드 3-12] 를이용하여작성 NOTE_ 표를생성하는간단한방법표를간단한방법으로생성할때는 thead, tbody, tfoot 태그를사용하지않음. table 태그가 tbody 태그와합쳐진기능을수행. 웹브라우저는 HTML 페이지가표준과맞지않을경우표준형식으로자동변환됨. 즉, tbody 태그자동추가
3 테이블태그 th 와 td 태그에는 [ 표 3-10] 의속성을입력가능 일종의셀병합 표 3-10 colspan 과 rowspan 속성 태그이름 colspan rowspan 설명 셀의너비지정 셀의높이지정
기본예제 3-8 행 / 열합침표만들기 [ 코드 3-14] 를이용하여작성
4 이미지태그 이미지태그 img 태그사용 단독으로사용 그림 3-11 img 태그 표 3-11 img 태그의속성 태그이름 src alt width height 설명이미지의경로지정이미지가없을때나오는글자지정이미지의너비지정이미지의높이지정
기본예제 3-9 이미지삽입하기 1. 이미지파일준비하기 이미지나파일을 HTML 페이지와같은폴더에둔다. 2. 코드작성하기 [ 코드 3-15] 를이용해작성
4 이미지태그 img 태그의 src 속성에는웹에존재하는이미지의경로사용가능 NOTE_ 의미없는이미지의미없는이미지는 http://placehold.it 에서생성가능. 이미지경로에 http://placehold.it/ 너비 x 높이 형식으로입력하면 [ 그림 3-12] 와같은이미지를얻을수있다. 그림 3-12 의미없는이미지
5 공간분할태그 공간을분할하는이유 CSS 로원하는레이아웃을구성할수있기때문 div 대표적인공간분할태그 그림 3-13 네이버메인페이지의 div 태그
5.1 기본공간분할태그 div 태그 공간을블록형식으로분할 span 태그 공간을인라인형식으로분할
기본예제 3-10 공간분할방법익히기 1. 블록형식으로공간분할하기 div 태그사용 각태그의영역 : 한행모두 [ 코드 3-16] 을이용하여작성 2. 인라인형식으로공간분할하기 span 태그사용 각태그의영역 : 글자크기만큼 [ 코드 3-17] 을이용하여작성
5.1 기본공간분할태그 블록형식과인라인형식은일반태그에도적용 h1과 p 태그는블록형식 a와 i 태그는인라인형식 그림 3-15 블록형식과인라인형식
5.1 기본공간분할태그 표 3-13 블록형식과인라인형식의태그 블록형식태그 div 태그 h1 h6 태그 p 태그목록태그테이블태그입력양식태그 인라인형식태그 span 태그 a 태그 input 태그글자형식태그 이미지태그는인라인 - 블록형식
5.2 시맨틱태그 시맨틱의의미 시맨틱 (semantic) : 의미론적인 시맨틱웹 컴퓨터프로그램이코드를읽고의미를인식할수있는지능형웹 플러그인을사용하면모든웹브라우저에서사용가능
5.2 시맨틱태그 그림 3-16 사람이보는네이버메인페이지 그림 3-17 컴퓨터가보는네이버메인페이지
5.2 시맨틱태그 표 3-14 HTML5 시맨틱태그 태그이름 header nav aside section article footer 설명헤더내비게이션사이드에위치하는공간여러중심내용을감싸는공간글자가많이들어가는부분푸터 시맨틱태그를사용해페이지를구성하면가독성이좋아짐