HTML5 웹프로그래밍입문 2 장.HTML5 문서의기본
목차 2.1 기본문서만들기 2.2 단락과텍스트꾸미기 2.3 목록및표작성하기 2.4 문서구조화하기 소스코드실행사이트 주소 : http://webclass.me/html5_2e 폴더 ch02/ ~ ch13/ 에각장의예제가있어서실행결과확인및소스보기가가능합니다. 2 HTML5 문서의기본
2.1 기본문서만들기 2.1.1 HTML 요소와속성 2.1.2 HTML 문서의기본구조 3 HTML5 문서의기본
2.1.1 HTML 요소와속성 HTML (HyperText Markup Language) 웹 (WWW) 을위한하이퍼텍스트문서작성언어 웹브라우저에서보여지는문서의내부형식을규정 HTML 형식의파일 첫줄에 DOCTYPE 선언, 다음줄부터요소들 (elements) 파일확장자는 *.htm 혹은 *.html 문서형식선언 <!DOCTYPE html> 이전 HTML <!DOCTYPE html public -//W3C//DTD HTML 4.01//EN > 4 HTML5 문서의기본
예제 : HTML 시작하기 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> 5 HTML5 문서의기본
요소 (Element) 와태그 (Tag) 요소 (element) 문서일부분의특징을지정하는마크업, 일종의명령어 내용 (content) 과이를둘러싼태그 (tag) 로구성 시작태그 < 태그이름속성들 > 종료태그 </ 태그이름 > 태그의이름 공백없는문자열 대소문자구분없음 엇갈려중첩되면안된다 단독태그 < 태그이름 /> <p> <h2> html 문단 </p> 제목 </h2> <p> <h2> html 문단제목 </h2> </p> <h2> <p> html 문단제목 </p> </h2> <br /> <hr /> <img /> 6 HTML5 문서의기본
속성 요소에추가정보를주기위해서사용 추가정보예, 요소의모양을나타내는스타일 하이퍼링크의링크지점정보등 속성의구조 요소의시작태그내에나타남 이름 = 속성값 혹은이름 = 속성값 하나의요소에여러개의속성가능, 빈칸으로구분 <table border="1"> </table> <a href="ch02.htm"> </a> <a href="ch02.htm" target= blank > </a> 7 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> 9 <h2>html 문서의기본구조 </h2> 10 <p>html 문서는 head 와 body 요소로구성된다.</p> 11 <p>body 에는내용을구성하는여러가지요소가.</p> 15 <!-- 설명문은이렇게작성 --> 16 </body> 17 </html> 8 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"> 9 HTML5 문서의기본
기타문서구성 특수문자 < 문자나 > 문자, 따옴표등은특별한목적이있음 엔티티 (entity) 코드로표현 --- & 이름 ; 공백 < > & < > " & 키보드에서입력못하는문자는 &# 문자코드 ; c 설명문 <!-- 설명문은이렇게작성 --> 10 HTML5 문서의기본
2.2 단락과텍스트꾸미기 2.2.1 단락의제목과줄 2.2.2 단락꾸미기 2.2.3 다양한텍스트표현 11 HTML5 문서의기본
2.2.1 단락의제목과줄 제목 (Headline) : <h1> ~ <h6> 요소 <H1> 이제일큰글자, 제목 1 호 굵은글자, 줄간격 단락 (Paragraph): <p> 요소 HTML 문서에서가장기본적인구성 줄간격 줄바꿈 (Line Break): <br> 요소 단락내에서줄만바꾸고자할때 단독태그형태 12 HTML5 문서의기본
예제 : 단락의제목과줄 <h1><h1> 헤드라인제목 1 호 </h1> <h2><h2> 헤드라인제목 2 호 </h2> <h3><h3> 헤드라인제목 3 호 </h3> <h4><h4> 헤드라인제목 4 호 </h4> <h5><h5> 헤드라인제목 5 호 </h5> <h6><h6> 헤드라인제목 6 호 </h6> <p> 단락은 <p> 요소로표현한다.</p> <p><p> 요소는 단락이끝나면구분을위하여줄간격을띄우지만, <br> 단순줄바꿈인 <br> 요소는 줄간격을띄우지않는다.</p> 13 HTML5 문서의기본
2.2.2 단락꾸미기 가로줄 (Horizontal Line): <hr> 요소 문단간혹은내용사이에구분을확실히하고자할때 작성된형식유지 (Pre-formatted Text): <pre> 화면에입력한상태그대로보이고자할때 공백문자 (whitespace character): 빈칸, 탭, 줄바꿈 단락인용 (Block Quotation): <blockquote> 다른글의내용을단락단위로인용하여포함시킬때 들여쓰기로구분하여표시 14 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> 15 HTML5 문서의기본
2.2.3 다양한텍스트표현 텍스트일부의성격이나의미를지정하고자하는경우 텍스트강조 (Emphasis): <em> 요소 기울여표시 강한강조 (Strong Emphasis): <strong> 요소 진하게표시 작은 (Small) 글자 : <small> 요소 약간작은글씨로표시 16 HTML5 문서의기본
2.2.3 다양한텍스트표현 하이라이트효과 : <mark> 요소 텍스트를눈에띄도록마킹하고자할때, 형광펜표시 첨자 (Subscript & Superscript): <sub>, <sup> [ 노트 ] HTML5 비권장 (deprecated) 요소 : 요소로는가급적문서구조나의미가있는특성을표현 문서의출력모양은스타일시트를사용하도록권장 텍스트의모양관련요소 <font>, <center>, <u>, <b>, <i>, <blink> 17 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> 18 HTML5 문서의기본
2.3 목록및표작성하기 2.3.1 목록나열하기 2.3.2 표의기본구성 2.3.3 표의구조적표현 19 HTML5 문서의기본
2.3.1 목록나열하기 순서없는목록 (Unordered List) 나열된항목 (list item) 에는하위요소인 <li> 를사용 <p> 순서없는목록 </p> <ul> <li> 첫번째항목 (list item)</li> <li> 두번째항목 (list item)</li> <li> 세번째항목 (list item)</li> </ul> 순서있는목록 (Ordered List) : <ol> 요소 각항목앞에는순서를나타내는숫자혹은기호 <p> 순서있는목록 </p> <ol> <li> 첫번째항목 (list item)</li> <li> 두번째항목 (list item)</li> <li> 세번째항목 (list item)</li> </ol> 20 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> 21 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> <ol> <li> 임순범, 박희민공저, HTML5 웹프로그래밍입문 </li> <li> 최윤철, 임순범공저, 소셜미디어시대의인터넷이해 </li> <li>b. McLaughlin, What Is HTML5?</li> </ol> </ul> <h2> 지정도서 </h2> <dl> <dt> 지정도서서비스란?</dt> <dd> 수업에필요한주교재및참고문헌등의필수도서를도서관 1층대출 별도로비치하여관리하는제도 </dd> <dt> 신청기간 </dt> <dd> 매년 1월과 6월둘째주학교홈페이지에공지 </dd> </dl> 22 HTML5 문서의기본
2.3.2 표의기본구성 표의구성 행 (row) => 열 (column) 만큼셀 (cell) 표의구성요소 : <table>, <tr>, <th>, <td> <tr> 요소 (table row): 하나의행 <td> 요소 (table data): 각셀의데이터 <th> 요소 (table header): 제목, 중앙에굵은글씨 <table> 요소 <tr> 요소 <tr> 요소 <tr> 요소 <tr> 요소 23 HTML5 문서의기본
예제 : 기본적인표의표현 <h3> 기본적인표의표현 </h3> <table border="1"> <tr> <th> 책제목 </th> <th> 저자 </th> <th> 출판사 </th> <tr> <td>html5 웹프로그래밍입문 </td> <td> 임순범, 박희민 </td> <td> 생능 </td> </tr> <tr> <td> 소셜미디어시대의인터넷활용 </td> <td> 최윤절. 임순범 </td> <td> 생능 </td> </tr> <tr> <td>what Is HTML5?</td> <td>b. McLaughlin</td> <td>o'reilly</td> </tr> </table> 표의논리적인구조와내용 표의모양은스타일시트이용 - 테두리, 굵기, 색상등 24 HTML5 문서의기본
2.3.2 표의구조적표현 셀합치기 : rowspan, colspan <td> 요소의 rowspan 속성과 colspan 속성을사용 rowspan 속성 : 위아래줄 (rows) 의셀병합 colspan 속성 : 옆칸 (column) 의셀병합 25 HTML5 문서의기본
<table border="1"> <tr> <td rowspan="3"> 아래줄 (rows)<br> 셀합치기 </td> <td>1 행 (row) 2 열 </td> </tr> <tr> <-- 2 행 1 열없음 --> <td>2 행 (row) 2 열 </td> </tr> <tr> <-- 3 행 1 열없음 --> <td>3 행 (row) 2 열 </td> </tr> </table> <table border="1"> <tr> <td colspan="3"> 옆칸 (cols) 의셀합치기 </td> </tr> <tr> <td>2 행 1 열 (col)</td> <td>2 행 2 열 (col)</td> <td>2 행 3 열 (col)</td> </tr> </table> 26 HTML5 문서의기본
표의구조적표현 표의설명제목 : <caption> 요소 표의머리줄, 몸체, 꼬리줄표현 <thead>, <tbody>, <tfoot> 요소 몸체만스크롤하는것이가능 <tbody> 여러번사용할수있음 caption --- thead --- tbody --- tfoot 27 HTML5 문서의기본
예제 : 표의구조적표현 <table border="1"> <caption> 과목별추천도서 </caption> <thead> <tr> <th> 과목 </th> <th> 책제목 </th> <th> 저자 </th> <th> 출판사 </th> </tr> </thead> <tfoot> <tr> <th> 합계 </th> <td colspan="3">3 권 </td> </tr> </tfoot> <tbody> <tr> <td rowspan="3"> 웹프로그래밍 </td> <td>html5 웹프로그래밍입문 </td> <td> 임순범, 박희민 </td> <td> 생능 </td> <tr> <td> 소셜미디어시대의인터넷이해 </td> <td> 최윤절. 임순범 </td> <td> 생능 </td> </tr> <tr> <td>what Is HTML5? </td> <td>b. McLaughlin</td> <td>o'reilly</td> </tr> </tbody> </table> 28 HTML5 문서의기본
2.4 문서구조화하기 2.4.1 문서구조화요소 2.4.2 문서구조에스타일시트적용하기 29 HTML5 문서의기본
2.4.1 문서구조화요소 웹문서의용도 이전에는웹브라우저에서정보를보여주고전달 최근검색엔진이나반응형레이아웃등의경우증가 컴퓨터가문서의구조와내용을파악해야 사람은문단의글자크기, 모양, 색상등으로내용구분 기계는문단의의미를정확히지정해주어야파악가능 HTML5 에서문서구조화 웹문서를구성하는특정의미를가진요소를명확히 문서를구성하는머리말, 꼬리말, 탐색메뉴, 본문, 본문의섹션, 옆줄등문서의의미적인구조를표현 30 HTML5 문서의기본
문서구조화요소 구조화요소 머리말, 꼬리말, 탐색메뉴, 본문, 본문의섹션, 옆줄등문서의의미적인구조 <header> <footer> <nav> <article> <section> <aside> 의미적인구분만할뿐모양은구분하지않는다. 31 HTML5 문서의기본
문서구조화요소 머리말 : <header> 요소 웹문서에서머리말영역, 제목이나소개등 탐색메뉴 : <nav> 요소 다른웹문서나문서내의다른부분으로이동하는링크 독립된본문 : <article> 요소 웹문서에서주요내용을가진독립된본문을나타낼때 여러개의 <article> 요소가능, 별도의 별도의제목, header, footer, 여러개 section 요소포함 32 HTML5 문서의기본
문서구조화요소 문서내섹션그룹 : <section> 요소 문서내에서절단위구분, 의미가비슷한그룹 부수정보 : <aside> 요소 본문의내용과구별되는별개의정보를표현 꼬리말 : <footer> 요소 웹문서의꼬리말에해당하는저자정보, 저작권정보, 이용조건, 관련링크등 33 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> 34 HTML5 문서의기본
2.4.2 문서구조에스타일시트 구조화요소 화면에서의모양, 배치등출력스타일전혀언급없음 스타일시트 [4~5 장 ] 내용이나구조의표현과출력스타일의표현을분리 HTML 태그로는내용만작성해주고그출력모양은 CSS 등의스타일시트로지정 <head> 요소내에 <style> 요소로출력스타일지정 <style> HTML_ 태그명 { CSS_ 속성명 : 속성값 ; } </style> 35 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>... 36 HTML5 문서의기본