HTML5 웹 프로그래밍 입문 (개정판) 2장. HTML5 문서의 기본
목차 2.1 기본 문서 만들기 2.2 단락과 텍스트 꾸미기 2.3 목록 및 표 작성하기 2.4 문서 구조화하기 소스코드 실행 사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. HTML5 문서의 기본
2.1 기본 문서 만들기 2.1.1 HTML 요소와 속성 2.1.2 HTML 문서의 기본 구조 HTML5 문서의 기본
2.1.1 HTML 요소와 속성 HTML (HyperText Markup Language) HTML 형식의 파일 웹(WWW)을 위한 하이퍼텍스트 문서 작성 언어 웹브라우저에서 보여지는 문서의 내부형식을 규정 HTML 형식의 파일 첫줄에 DOCTYPE 선언, 다음줄부터 요소들(elements) 파일 확장자는 *.htm 혹은 *.html HTML5 문서의 기본
예제: HTML 시작하기 문서 형식선언 <!DOCTYPE html> 이전 HTML <!DOCTYPE html public “-//W3C//DTD HTML 4.01//EN”> 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML 요소</title> 5 </head> 6 <body> 7 <h2>HTML 시작하기</h2> 8 <p>첫줄에 문서형식선언 !DOCTYPE html</p> 9 <p>다음줄부터 요소(element)로 구성</p> 10 <p>- [시작태그] 문서의 내용 [종료태그]; 11 <br>- 내용 없는 요소는 단독태그로</p> 12 </body> 13 </html> HTML5 문서의 기본
요소(Element)와 태그(Tag) 요소(element) 문서 일부분의 특징을 지정하는 마크업, 일종의 명령어 내용(content)과 이를 둘러싼 태그(tag)로 구성 시작태그 <태그이름 속성들 …> 종료태그 </태그이름> 태그의 이름 공백없는 문자열 대소문자 구분 없음 엇갈려 중첩되면 안된다 단독태그 <태그이름 /> <p> <h2> html 문단 </p> 제목 </h2> <p> <h2> html 문단 제목 </h2> </p> <h2> <p> html 문단 제목 </p> </h2> <br /> <hr /> <img … /> HTML5 문서의 기본
속성 요소에 추가정보를 주기 위해서 사용 속성의 구조 추가정보 예, 요소의 모양을 나타내는 스타일 하이퍼링크의 링크지점 정보 등 속성의 구조 요소의 시작태그 내에 나타남 이름 = “속성값” 혹은 이름 = ‘속성값’ 하나의 요소에 여러 개의 속성 가능, 빈 칸으로 구분 <table border="1"> … </table> <a href="ch02.htm"> … </a> <a href="ch02.htm" target=”blank”> … </a> HTML5 문서의 기본
2.1.2 HTML 문서의 기본 구조 문서형식 선언 다음에 루트요소 <html> <head> 와 <body> 로 구성, <body>에 원하는 요소 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>HTML 기본구조</title> 5 <meta charset="UTF-8"> 6 <meta authors="임순범 박희민"> 7 </head> 8 <body> … <p>특수문자는 &이름; 형식으로 표기<br> - 예, 공백 < > " & (특수문자 이름: nbsp, lt, …)<br> - 예, © ¢ £ ¥ (특수문자 코드: … 15 <!-- 설명문은 이렇게 작성 --> 16 </body> 17 </html> HTML5 문서의 기본
<head> 요소 <title> 요소 : 문서 제목 <meta> 요소 문서 관리를 위한 메타정보(metadata)를 기록 문서 정보, 키워드, 저자 정보, 언어, 인코딩 정보 등 name 속성과 content 속성을 이용 메타데이터 종류의 이름을 속성이름으로 사용 <meta name=”authors” content=”임순범 박희민”> <meta name=”description” content=”HTML5 head 요소에 대한 설명”> <meta name=”keyword” content=”HTML5 head title meta”> <meta authors=”임순범 박희민”> <meta description =”HTML5 head 요소에 대한 설명”> <meta keyword=”HTML5 head title meta”> <meta charset="UTF-8"> HTML5 문서의 기본
기타 문서 구성 특수문자 설명문 <!-- 설명문은 이렇게 작성 --> ‘<’ 문자나 ‘>’ 문자, 따옴표 등은 특별한 목적이 있음 엔티티(entity) 코드로 표현 --- &이름; 공백 < > “ & ⇒ < > " & 키보드에서 입력 못하는 문자는 &#문자코드; ⓒ ￠ ￡ ￥ ⇒ © ¢ £ ¥ 설명문 <!-- 설명문은 이렇게 작성 --> 문자 인코딩 <meta charset="UTF-8">에서 한글 깨질 때 문서 작성기에서 파일의 문자 인코딩도 UTF-8로 설정하거나, <meta http-equiv=“Content-Type” content=“text/html” charset="UTF-8">로 설정 HTML5 문서의 기본
2.2 단락과 텍스트 꾸미기 2.2.1 단락의 제목과 줄 2.2.2 단락 꾸미기 2.2.3 다양한 텍스트 표현 HTML5 문서의 기본
2.2.1 단락의 제목과 줄 제목(Headline) : <h1> ~ <h6> 요소 굵은 글자, 줄간격 띄운다 단락(Paragraph): <p> 요소 HTML 문서에서 가장 기본적인 구성 줄간격 띄운다 줄 바꿈(Line Break): <br> 요소 단락 내에서 줄만 바꾸고자 할 때 단독 태그 형태 HTML5 문서의 기본
예제: 단락의 제목과 줄 <h1><H1> 헤드라인 제목 1호</h1> <p>단락은 <p> 요소로 표현한다.</p> <p><p>요소는 단락이 끝나면 구분을 위하여 줄간격을 띄우지만, <br> 단순 줄바꿈인 <br> 요소는 줄간격을 띄우지 않는다.</p> HTML5 문서의 기본
2.2.2 단락꾸미기 가로줄(Horizontal Line): <hr> 요소 문단 간 혹은 내용 사이에 구분을 확실히 하고자 할 때 작성된 형식 유지(Pre-formatted Text): <pre> 화면에 입력한 상태 그대로 보이고자 할 때 공백문자(whitespace character): 빈칸, 탭, 줄바꿈 단락 인용(Block Quotation): <blockquote> 다른 글의 내용을 단락 단위로 인용하여 포함시킬 때 들여쓰기로 구분하여 표시 HTML5 문서의 기본
예제: 단락꾸미기 <h3>가로줄(Horizontal Line) <hr> 요소</h3> <p> 가로줄은 <hr>요소를 이용</p> <hr /> 자동으로 줄 바뀐다 <h3>형식 유지 <pre> 요소</h3> <pre> p r e 요 소 는 공백문자를 입력한 그대로 화면에 출력한다.</pre> <h3>단락인용 <blockquote> 요소</h3> <blockquote> <p>다른 글의 내용을 인용하여 적을 때 사용한다. <br> 인용된 내용은 화면에서 들여쓰기를 한다.</p> </blockquote> HTML5 문서의 기본
2.2.3 다양한 텍스트 표현 텍스트 일부의 성격이나 의미를 지정 텍스트 강조(Emphasis): <em> 요소 기울여 표시 강한 강조(Strong Emphasis): <strong> 요소 진하게 표시 작은(Small) 글자: <small> 요소 약간 작은 글씨로 표시 하이라이트 효과: <mark> 요소 텍스트를 눈에 띄도록 마킹하고자 할 때, 형광펜 표시 첨자(Subscript & Superscript): <sub>, <sup> HTML5 문서의 기본
[노트] HTML5 비권장(deprecated) 요소 : 요소로는 가급적 문서 구조나 의미가 있는 특성을 표현 문서의 출력 모양은 스타일시트를 사용하도록 권장 텍스트의 모양 관련 요소 <font>, <center>, <u>, <b>, <i>, <blink> ㅣ HTML5 문서의 기본
예제:다양한 텍스트 표현 <h2>다양한 텍스트 표현</h2> <p>텍스트의 성격을 지정해 주는 em요소로 <>강조(em)</em>, <STRONG>강한 강조(strong)</STRONG> <mark>하이라이트(mark)</mark>, <SMALL>작은글자(small)</SMALL>, <SUB>아래첨자(sub)</SUB>, <SUP>위첨자(sup)</SUP> 를 표현할 수 있다.</p> <p> <strong>책소개:</strong> <sup>소셜미디어 시대의</sup> <em>컴퓨터와 IT 기술의 이해</em> <br> <strong>저자</strong>: 최윤철, 한탁돈, 임순범</p> <p><em>컴퓨터와 IT기술의 이해</em>는<mark>IT기술 전반</mark>에 대해 포괄적으로 이해하고, 특히 <small>우리사회의 각 영역에서의</small> 활용과 미치는 영향을 이해하기 위해 <strong>매우 적절한 교재가 될 것이다.</strong></p> HTML5 문서의 기본
2.3 목록 및 표 작성하기 2.3.1 목록 나열하기 2.3.2 표의 기본 구성 2.3.3 표의 구조적 표현 HTML5 문서의 기본
2.3.1 목록 나열하기 순서 없는 목록(Unordered List) 나열된 항목(list item)에는 하위 요소인 <li> 를 사용 순서 있는 목록(Ordered List) : <ol> 요소 각 항목 앞에는 순서를 나타내는 숫자 혹은 기호 <p>순서 없는 목록</p> <ul> <li>첫 번째 항목(list item)</li> <li>두 번째 항목(list item)</li> <li>세 번째 항목(list item)</li> </ul> <p>순서 있는 목록</p> <ol> <li>첫 번째 항목(list item)</li> <li>두 번째 항목(list item)</li> <li>세 번째 항목(list item)</li> </ol> HTML5 문서의 기본
설명 목록(Description List/Definition List): <dl> 사전과 같이 용어나 단어를 설명하는 목록을 만들때 용어(term)는 <dt> 요소, 설명(description)은 <dd> 요소 <p>설명 목록</p> <dl> <dt>항목1</dt> <dd>항목에 대한 설명1</dd> <dt>항목2</dt> <dd>항목에 대한 설명2</dd> </dl> HTML5 문서의 기본
예제: 목록 나열하기 <h2>과목별 참고도서 목록</h2> <ul> <li>IT기술의 이해 </li> <ol> <li>최윤철, 임순범, 한탁돈 공저, 컴퓨터와 IT기술의 이해 </li> <li>D. Morley, C. Parker, Understanding Computers 15th Ed.</li> <li>G. Shelly, M. Vermaat, Discovering Computers</li> </ol> <li>웹프로그래밍</li> <li>임순범, 박희민 공저, HTML5 웹프로그래밍 입문</li> <li>최윤철, 임순범 공저, 소셜미디어 시대의 인터넷 이해</li> <li>B. McLaughlin, What Is HTML5?</li> </ul> <h2>지정도서</h2> <dl> <dt>지정도서 서비스란?</dt> <dd>수업에 필요한 주교재 및 참고문헌 등의 필수도서를 도서관 1층 대출… 별도로 비치하여 관리하는 제도</dd> <dt>신청기간</dt> <dd>매년 1월과 ６월 둘째 주 학교 홈페이지에 공지</dd> </dl> HTML5 문서의 기본
2.3.2 표의 기본 구성 표의 구성 행(row) => 열(column) 만큼 셀(cell) 표의 구성 요소: <table>, <tr>, <th>, <td> <tr> 요소(table row): 하나의 행 <td> 요소(table data): 각 셀의 데이터 <th> 요소(table header): 제목, 중앙에 굵은 글씨 <table> 요소 <tr> 요소 → HTML5 문서의 기본
예제: 기본적인 표의 표현 [Note] 표의 논리적 구조와 내용 정의 표의 모양은 스타일시트 이용 - 테두리, 굵기, 색상 등 <h3>기본적인 표의 표현</h3> <table border="1"> <tr> <th>책제목</th> <th>저자</th> <th>출판사</th> <td>HTML5 웹프로그래밍 입문</td> <td>임순범,박희민</td> <td>생능</td> </tr> <td>소셜미디어 시대의 인터넷활용</td> <td>최윤절.임순범</td> <td>What Is HTML5?</td> <td>B. McLaughlin</td> <td>O'Reilly</td> </table> [Note] 표의 논리적 구조와 내용 정의 표의 모양은 스타일시트 이용 - 테두리, 굵기, 색상 등 HTML5 문서의 기본
2.3.3 표의 구조적 표현 셀 합치기: rowspan, colspan <td> 요소의 rowspan 속성과 colspan 속성을 사용 rowspan 속성: 위아래 줄(rows)의 셀 병합 colspan 속성: 옆 칸(column)의 셀 병합 HTML5 문서의 기본
<table border="1"> <tr> <td rowspan="3">아래 줄(rows)<br>셀 합치기</td> <td>1행(row) 2열 </td> </tr> <-- 2행 1열 없음 --> <td>2행(row) 2열</td> <-- 3행 1열 없음 --> <td>3행(row) 2열</td> </table> <table border="1"> <tr> <td colspan="3">옆 칸(cols)의 셀 합치기</td> </tr> <td>2행 1열(col)</td> <td>2행 2열(col)</td> <td>2행 3열(col)</td> </table> HTML5 문서의 기본
표의 구조적 표현 표의 설명 제목: <caption> 요소 표의 머리줄, 몸체, 꼬리줄 표현 <thead>, <tbody>, <tfoot> 요소 몸체만 스크롤하는 것이 가능 <tbody> 여러 번 사용할 수 있음 --- thead --- tbody --- tfoot caption HTML5 문서의 기본
예제: 표의 구조적 표현 <table border="1"> <caption>과목별 추천도서</caption> <thead> <tr> <th>과목</th> <th>책제목</th> <th>저자</th> <th>출판사</th> </tr> </thead> <tfoot> <th>합계</th> <td colspan="3">3권</td> </tfoot> <tbody> <td rowspan="3">웹프로그래밍</td> <td>HTML5 웹프로그래밍 입문</td> <td>임순범,박희민</td> <td>생능</td> <td>소셜미디어 시대의 인터넷 이해 </td> <td>최윤절.임순범</td> <td>생능</td> <td>What Is HTML5? </td> <td>B. McLaughlin</td> <td>O'Reilly</td> </tbody> </table> HTML5 문서의 기본
2.4 문서 구조화하기 2.4.1 문서 구조화 요소 2.4.2 문서 구조에 스타일시트 적용하기 HTML5 문서의 기본
2.4.1 문서 구조화 요소 웹문서의 용도 HTML5에서 문서 구조화 이전에는 웹브라우저에서 정보를 보여주고 전달 최근 검색엔진이나 반응형 레이아웃 등의 경우 증가 컴퓨터가 문서의 구조와 내용을 파악해야 사람은 문단의 글자 크기, 모양, 색상 등으로 내용 구분 기계는 문단의 의미를 정확히 지정해 주어야 파악 가능 HTML5에서 문서 구조화 웹문서를 구성하는 특정 의미를 가진 요소를 명확히 문서를 구성하는 머리말, 꼬리말, 탐색 메뉴, 본문, 본문의 섹션, 옆줄 등 문서의 의미적인 구조를 표현 HTML5 문서의 기본
문서 구조화 요소 구조화 요소 머리말, 꼬리말, 탐색 메뉴, 본문, 본문의 섹션, 옆줄 등 문서의 의미적인 구조 <header> <footer> <nav> <article> <section> <aside> 의미적인 구분만 할 뿐 모양은 구분하지 않는다. HTML5 문서의 기본
문서 구조화 요소 머리말: <header> 요소 탐색 메뉴: <nav> 요소 웹문서에서 머리말 영역, 제목이나 소개 등 탐색 메뉴: <nav> 요소 다른 웹문서나 문서 내의 다른 부분으로 이동하는 링크 독립된 본문: <article> 요소 웹문서에서 주요 내용을 가진 독립된 본문을 나타낼 때 여러 개의 <article> 요소 가능, 별도의 별도의 제목, header, footer, 여러 개 section 요소 포함 HTML5 문서의 기본
문서 구조화 요소 문서내 섹션 그룹: <section> 요소 부수 정보: <aside> 요소 문서 내에서 절 단위 구분, 의미가 비슷한 그룹 부수 정보: <aside> 요소 본문의 내용과 구별되는 별개의 정보를 표현 꼬리말: <footer> 요소 웹문서의 꼬리말에 해당하는 저자 정보, 저작권 정보, 이용조건, 관련 링크 등 HTML5 문서의 기본
예제: 문서구조화 <header>[header] SM_Bookstore <nav>- [nav] 메뉴 <a href="">[a]단행본</a> <a href="">[a]간행물</a> <a href="">[a]보고서</a> <a href="">[a]기 타</a> </nav> </header> <article>[article] 도서 안내 <section>- [section] 베스트셀러 <ul><li>최윤철, 임순범, 컴퓨터와 IT기술의 이해</li> <li>임순범, 박희민, HTML5 웹프로그래밍 입문</li></ul></section> <section>- [section] 추천도서 <ul><li>D. Morley, C. Parker, Understanding Computers 15th Ed.</li> <li>최윤철, 임순범, 소셜미디어 시대의 인터넷 이해</li> </ul> </section> </article> <aside>[aside]<p>* 이벤트<br>* 관련정보</p></aside> <footer>[footer] 작성자: 홍길동 </footer> HTML5 문서의 기본
2.4.2 문서 구조에 스타일시트 구조화 요소 스타일시트 [4~5장] 화면에서의 모양, 배치 등 출력 스타일 전혀 언급 없음 내용이나 구조의 표현과 출력 스타일의 표현을 분리 HTML 태그로는 내용만 작성해 주고 그 출력 모양은 CSS 등의 스타일시트로 지정 <head> 요소 내에 <style> 요소로 출력 스타일 지정 <style> HTML_태그명 { CSS_속성명: 속성값; … } </style> HTML5 문서의 기본
예제: 문서에 CSS 적용하기 <head> <title> HTML5 문서에 CSS 적용하기 </title> <style> body { background-color:#BBBBBB; border:double; margin:10px; } header { background-color:#FFFF99; text-align:center; margin:5px; padding:5px; } nav { display:block; width: 20%; background-color:#99FF99; float: left; } nav a { display:block; padding: 2px; border:solid; border-width:thin; } article { display:block; width:55%; background-color:#FFCC99; float:left; margin:10px; } section { display:block; background-color:#FFFFFF; margin:8px; padding:6px; } aside { display:block; width:18%; background-color:#AAFFAA; float:right; margin:5px; } footer { clear:both; background-color:#FFFF99; text-align:center; margin:5px; } </style> </head> <body> <header>[header] SM_Bookstore <nav>[nav] 메뉴 <a href="">[a] 단행본</a> . . . </nav> </header> <article> . . . HTML5 문서의 기본