HTML5 웹 프로그래밍 입문(교수용) 2장.HTML5 문서의 기본
목차 2.1 기본 문서 만들기 2.2 문서 꾸미기 2.3 목록 나열하기 2.4 표 그리기 2.5 문서 특정 부분 구별하기 2.6 문서 구조화하기 소스코드 실행 사이트 주소 : http://webclass.me/html5 폴더 ch02/ ~ ch13/에 각 장의 예제가 있어서 실행결과 확인 및 소스보기가 가능합니다. HTML5 문서의 기본
HTML5 문서 기본 HTML 문서 태그(tag)로 표기하는 요소(element)와 요소의 속성(attribute)으로 이루어짐. HTML 문서가 나타난 초기에는 이와 같은 요소만을 사용하여 표현을 가지고 있는 문서를 작성 웹 기술이 발전함에 따라 동적으로 변경 가능한 문서, 응용프로그램 성격을 가지는 문서로 개념 발전 학습내용 HTML 문서를 만들기 위해 필요한 문서 구성요소와 개념 문서 구조화와 단락을 위한 요소 목록과 표를 만들기 위한 요소 특징은 태그를 통해 표기하고, 속성을 덧붙여서 다양한 방법으로 표현을 한다.\ ex) META ex) charset HTML5 문서의 기본
2.1 기본 문서 만들기 2.1.1 문서 구조 2.1.2 요소와 속성 2.1.3 기타 문서 구성 HTML5 문서의 기본
문서 구조 HTML의 문서 DOCTYPE DOCTYPE과 요소(elements) 모음 문서를 구성하는데 사용한 규약을 알려줌
예제:HTML 기본구조 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML 기본구조</title> </head> <body> HTML 기본구조 알아보기 </body> </html> <!DOCTYPE HTML> → 아래 부분부터 HTML TYPE 이라는 것을 알려주는 것. HTML5 문서의 기본
웹 문서의 기본 구조 <!DOCTYPE> <html> 요소 <!DOCTYPE html>: HTML5 문서규약 <html> 요소 문서 내용을 나타냄 문서에 대한 정보를 나타내는 <head> 요소 문서 내용을 나타내는 <body> 요소 문서를 구성하는 여러 크기의 단락 제목, 단락, 목록, 표를 표현하기 위한 요소 모음이 나타날 수 있음 HTML 5로 넘어오면서 <!DOCTYPE html>을 사용하기 시작. HTML5 문서의 기본
<head> 요소 <head> 요소 <title> 요소 <meta> 요소 기타 요소 기타 요소 (추후 배울 예정): <link> 요소 (링크), <script> 요소 (JAVA), <style> 요소 (CSS) <title> 요소 문서 제목을 나타냄 <meta> 요소 웹 문서에서 사용하고 있는 문자 인코딩 정보 검색엔진을 위한 문서의 검색 키워드 정보 기타 요소 <script> 요소: 자바스크립트로 기술된 웹 문서의 사용자와의 상호 작용을 위한 스크립트 <style> 요소: 웹 문서를 표현에 사용되는 CSS(Cascade Style Sheet) <link> 요소: 웹 문서 외부에 기술된 자바스크립트와 CSS 파일 링크 정보 <meta charset=”UTF-8”> * Meta charset : 문자 속성을 설정하는 것 HTML5 문서의 기본
요소와 속성 웹 문서: 태그로 표현되는 요소(element)로 구성 요소 속성 시작을 나타내는 시작태그 요소의 내용 (HTML문서의 정의) 종료 태그 ( “my_id ) 속성(attribute) 모음 속성 요소의 정보를 나타냄 이름과 값의 쌍의 모음으로 구성 HTML5 문서의 기본
태그 문서에서 요소를 표시하기 위해 문서 내용에 붙여주는 일종의 꼬리표 태그 복합태그와 단독태그 요소의 시작을 나타내는 시작태그: ‘<’ 문자와 태그 이름, ‘>’ 문자로 구성 요소의 끝을 나타내는 종료태그: ‘</’ 문자와 태그 이름, ‘>’ 문자로 구성 종료태그가 없는 경우 있는 것으로 간주하는 요소도 있음(쓰지 않아도 인식) 가능하면 종료태그를 써주는 것이 좋음 시작과 종료를 한 번에 나타내는 태그: ‘<’ 문자와 태그 이름, ‘/>’ 문자로 구성 다른 요소나 내용을 가지지 않는 요소를 위한 태그 복합태그와 단독태그 복합태그: 요소가 시작태그와 종료태그로 구성되는 경우에 사용하는 태그 단독태그: 시작과 종료를 같이 나타내는 태그로 구성 <title> 요소: 시작태그인 <title>와 종료태그인 </title>로 구성된 복합태그 <img> 요소: 시작과 종료를 같이 의미하는 단독태그인 <img/> 태그 <tag_name> ... </tag_name> // 복합태그 <tag_name/> // 단독태그 HTML5 문서의 기본
속성 (속성이 엄청나게 많음) 요소에 추가정보(모양, 스타일, 크기지정, 공통 및 개별 설정)를 주기 위해서 사용 추가정보 요소의 모양을 나타내는 스타일 등이 있음 요소에 공통적으로 적용되는 것과 요소마다 다르게 적용되는 것이 있음. 속성 요소의 시작태그 내에 나타남 이름과 값으로 구성 이름과 값 사이에는 ‘=’ 문자가 나타나고, 값은 “” 문자 또는 ‘’ 문자에 감싸서 나타냄 요소는 여러 속성을 가질 수 있으며, 이 경우 속성은 빈 칸(띄어쓰기)으로 구분 Alert : Warning 속성이 무지하게 많으므로 HTML 매뉴얼 사이트 참고 할 것! <p style=”font-size=0”> ... </p> <p style=”font-size=0” script=”alert(‘error’);”> ... </p> HTML5 문서의 기본
기타 문서 구성 주석 웹 브라우저에서는 보이지 않으나 문서 작성자가 문서에 대한 정보를 남기기 위해서 사용 (앞 뒤 두 개 모두 다 사용해야 함) 특수문자 ‘<’ 문자나 ‘>’ 문자와 같은 문자는 웹 문서에서 태그를 표현하기 위해 사용 문자코드 <!-- 내용--> & 특수 문자 이름 ; 특수문자 표현 설명 공백 문자 < < > > " “ & & - < > 는 태그를 나타내는 것임. < > 자체를 출력하기 위해서는 특수문자 표현법을 사용해야 함. - 정적인 문서이기 때문에 민감하지 않음, 브라우저 버전이 높으면 정확하지 않아도 관대하게 맞게 출력. & #문자코드 ; HTML5 문서의 기본
2.2 문서 꾸미기 2.2.1 단락제목 2.2.2 단락과 줄 2.2.3 다양한 텍스트 표현 HTML5 문서의 기본
단락제목 웹 문서에서 단락제목을 지정할 때 <h1>~<h6> 요소를 이용 웹 문서의 내용 중 다른 텍스트보다 굵게 나타남 HTML5 문서의 기본
예제:단락제목 <h1>가장 높은 단계 제목</h1> HTML5 문서의 기본
단락과 줄 단락: <p> 요소 줄 바꿈: <br>요소 가로줄: <hr> 요소 웹 문서에서 단락을 만들기 위해 사용 웹 브라우저는 단락과 단락 사이에 약간의 공백을 추가하여 시각적으로 두 단락이 구분되어 있을 표시 줄 바꿈: <br>요소 줄 바꿈은 단락을 구분하지 않지만, 앞 문장과 다른 문장간에 줄을 바꾸고자 할때 사용 단일 태그 형태로 사용 가로줄: <hr> 요소 웹 문서에서 가로줄을 표시하여 앞뒤로 글의 주제가 바뀌었다는 것을 나타낼 때 사용 형식 유지: <pre> 요소 – 태그 내에서는 공백이나 엔터가 인식 안되는데 가능하게함 요소 내용을 웹 브라우저 화면에 그대로 보이고자 할 때 사용 웹 문서에서는 빈칸 문자나 탭 문자, 줄바꿈 문자와 같은 공백문자(white space character)를 하나의 공백 문자로 취급 소스코드와 같이 공백문자를 원문 그대로 보이는 것이 중요한 경우에 사용 인용: <blockquote> 요소 다른 글의 내용을 인용할 때 사용 웹 브라우저에서는 인용 내용을 들여쓰기를 하여 화면에 표시 HTML5 문서의 기본
예제:단락과 줄 <h1>단락과 줄바꾸기</h1> <br> 줄이 바뀝니다. <p> 문단이 바뀝니다 <hr> <h1>형식 그대로</h1> <pre> 입 력 한 대 로 보 입 니 다 </pre> <h1>인용</h1> <blockquote> 멀티미디어 배움터 2.0은 미디어의 특성과 미디어 처리기법을 이해하고, 미디어의 활용 환경 (인터넷, 모바일, 사이버스페이스) 을 이해할 수 있도록, 멀티미디어가 활용되는 방식과 적용사례를 소개한다. </blockquote> HTML5 문서의 기본
HTML5 문서의 기본
다양한 텍스트 표현(태그를 통한 효과) 텍스트 강조: <strong> 요소 문장 내의 특정 텍스트를 강조하고자 할 때 사용하는 요소이며, 웹 브라우저에서 진하게 표시 텍스트 구분: <em> 요소 (emphasis) 외국어나 분류학적인 용어, 대본에서 무대 지문, 생각 등 다른 일반 텍스트와 구분을 해야 하는 텍스트를 표시하는데 사용하며, 웹 브라우저에서 기울여진 모습으로 나타남 작은 글씨 표현: <small> 요소 웹 문서의 꼬릿말에 있는 저작권 문장이나 라이센스 정보처럼 주변의 다른 텍스트보다 포커스를 받지 못하는 텍스트를 표시할 때 사용하며, 웹 브라우저에서는 약간 작은 글씨로 표시 하이라이트 효과: <mark> 요소 문장 내의 텍스트를 마킹하고자 할 때 사용하며, 웹 브라우저에서는 형광펜으로 표시한 것과 같이 나타남 첨자 넣기: <sub> 요소와 <sup> 요소 <sub> 요소는 아래 첨자(subscript)를 나타내며, <sup> 요소는 윗 첨자(superscript)를 만듦 HTML5 문서의 기본
예제:다양한 텍스트 표현 <h1>다양한 텍스트 표현</h1> <p><mark>멀티미디어 배움터</mark></p> <strong>저자</strong>: 최윤철, 임순범<br> <strong>책소개</strong>:<br> 멀티미디어 배움터 2.0은 <strong>미디어의 특성</strong>과 <strong>미디어 처리기법</strong>을 이해하고, 미디어의 활용 환경<em>(인터넷, 모바일, 사이버스페이스)</em>을 이해할 수 있도록, <small>멀티미디어가 활용되는 방식과 적용사례를 소개한다.</small> <p>멀티미디어<sub>배움터</sub></p> <p>멀티미디어<sup>배움터</sup></p> HTML5 문서의 기본
2.3 목록 나열하기 2.3.1 순서없는 목록 2.3.2 순서있는 목록 2.3.3 정의 목록 HTML5 문서의 기본
순서없는 목록 순서없는 목록 : <ul> 요소 (번호 없이 ●로 나타남) 규칙과 순서가 없는 목록(unordered list)를 만들기 위해 사용 목록을 만들 때에는 목록 내에 포함된 항목을 나타내기 위한 하위요소인 <li> (List Item) 요소를 사용 <ul type = > 에 disk, square, circle을 넣어서 모양 변경 - 최근에는 잘 사용하지 않고 CSS를 통해서 속성을 줌 <ul> 요소는 이 <li> 요소를 한번에 감싸주는 역할 <ul> 요소 안에 있는 <li> 요소는 목록의 한 항목 <ul> <li>첫 번째 항목</li> <li>두 번째 항목</li> <li>세 번째 항목</li> </ul> HTML5 문서의 기본
순서있는 목록 순서있는 목록 : <ol> 요소 (사전식 숫자가 나타남) 규칙과 순서를 숫자로 나타내는 목록(ordered list)에서 사용 규칙과 순서에 관계가 있기 때문에 목록 앞에는 숫자가 옴 <ol> 요소는 이 <li> 요소를 한번에 감싸주는 역할 <ol> 요소 안에 있는 <li> 요소는 목록의 한 항목 <ol> <li>첫 번째 항목</li> <li>두 번째 항목</li> <li>세 번째 항목</li> </ol> HTML5 문서의 기본
정의 목록 정의 목록 : <dl> 요소 사전과 같은 정의 목록(definite list)을 만들기 위해서 사용 사전은 찾으려고 하는 단어와 단어를 설명하는 문장으로 구성 <dl> 요소 : <dt> 요소와 <dd> 요소를 사용 <dt> 요소 (Title) : 정의할 용어의 제목 <dd> 요소 : 용어의 설명(정의) <dl> <dt>이름</dt> <dd>설명</dd> </dl> HTML5 문서의 기본
예제:목록 <h1>순서 없는 목록</h1> <ul> <li>스티브잡스</li> <li>해를 품은 달</li> </ul> <h1>순서 있는 목록</h1> <ol> </ol> <h1>사전 목록</h1> <dl> <dt> html5 </dt> <dd> HTML5는 HTML의 차기 주요 제안 버전으로 월드 와이드 웹의 핵심 마크업 언어이다. 2004년 6월 Web Hypertext Application Technology Working Group(WHATWG)에서 웹 애플리케이션 1.0이라는 이름으로 세부 명세 작업을 시작하였다. </dd> </dl> <ul type = disk> 꽉 찬 원 <li>스티브잡스</li> <li>해를 품은 달</li> </ul> <ul type = square> 네모 <ul type = circle> 빈 칸 HTML5 문서의 기본
2.4 표 그리기 2.4.1 표의 기본 구조 2.4.2 표의 장식 HTML5 문서의 기본
표의 기본 구조(웹 문서에서 제일 중요) <table> 요소 웹 문서에 표를 표현하자고 할 때 사용 <tr> 요소(table row): 하나의 행 <td> 요소(table data): 표의 각 셀을 만들며, 각 셀의 데이터를 나타냄 <th> 요소(table header) – 행이 제목을 나타날 때 사용 <td> 요소와 유사하지만 <th> 요소는 표의 제목에 해당하는 셀을 나타냄 웹 브라우저에서 <th> 요소 내용은 일반적으로 굵은 글씨로 중앙에 표시 HTML5 문서의 기본
예제:표 <table border="1"> <tr> <th>책제목</th> <td>멀티미디어배움터</td> <td>최윤절.임순범 공저</td> <td>25,000</td> <td>C# 입문</td> <td>오세만, 이양선, 김정숙, 이창환 공저</td> <td>27,000</td> </table> HTML5 문서의 기본
표의 장식 셀 합치기 <td> 요소의 rowspan 속성과 colspan 속성을 사용 HTML5 문서의 기본
예제:표 장식 HTML5 문서의 기본 <table border="1"> <tr> <td rowspan="2">상하셀 병합</td><!-- 첫번째 테이블 상하 셀을 병합 --> <td>1행 2열</td> </tr> <td>2행 2열</td> </table><br> <td colspan="2">좌우셀병합</td><!-- 두번째 테이블 좌우 셀을 병합한다. --> <td>2행 1열</td> </table> HTML5 문서의 기본
표의 장식:기타 요소(HTML5에서 추가) 표 제목이 행 표현: <thead> 요소 <table> 요소를 머리말, 본문, 꼬리말로 나누었을 때 머리말에 해당하는 요소 <caption> (표 제목) 요소의 뒤에 <tbody>, <tfoot>, <tr> 요소의 앞에 나타남 열 제목으로 구성된 행의 집합을 나타내며 table 요소에 하나에 한번만 사용 표 마지막 행 표현: <tfoot> 요소 테이블의 꼬리말에 해당 <tbody> 요소 앞에 사용하며, 표 내에서 한 번만 사용할 수 있음 표 본문 행 표현: <tbody> 요소 테이블을 머리말, 본문, 꼬리말로 나누었을 때 본문에 해당하는 내용을 나타냄 여러 번 사용할 수 있음 → 테이블을 구조적으로 나타내어 구분만 할 때 사용. 보여지는 것은 비슷 HTML5 문서의 기본
예제:목록 HTML5 문서의 기본 <h1>추천도서 Table</h1> <table border="1"> <caption>추천 도서 테이블</caption> <thead> <tr> <th scope="col">책제목</th> <th scope="col">작가</th> <th scope="col">가격</th> </tr> </thead><!-- 표의 헤더 영역부분 --> <tfoot> <th scope="row">총</th> <td>2권</td> <td>30,000원</td> </tfoot><!-- 표의 푸터 영역부분 --> <tbody> <tr> <th scope="row">스티브잡스</th> <td>월터아이작슨 저,안진환 역</td> <td>25,000원</td> </tr> <th scope="row">멀티미디어 배움터</th> <td>최윤철.임순범 공저</td> </tbody><!-- 표의 내용 영역부분 --> </table> HTML5 문서의 기본
2.5 문서 특정 부분 구분하기 2.5.1 <div> 요소와 <span> 요소(중요) 2.5.2 요소의 id 속성와 class 속성 HTML5 문서의 기본
<div> 요소와 <span> 요소 웹 문서에서 특별한 의미를 갖지 않으며 콘텐츠를 그룹화하는데 사용하는 요소 <div> 요소 (한 단락 단위) 한 줄의 공간을 준비하며, 블록(block) 단위로 영역을 묶음 테두리, 정렬, 문단 모양 등 필요한 기능들은 CSS의 스타일(style)을 이용하여 지정 (CSS와 함께 사용) <span> 요소 (선택한 영역 단위) 인라인(inline) 단위로 영역을 묶고 입력하는 내용만큼 공간을 준비 (라인 안에서 부분적인 요소만 스타일 적용을 할 때) 줄바꿈이 생기지 않기 때문에 앞뒤 내용이 이어짐 인라인(Inline) 요소 안에 블록(block)요소는 들어갈 수 없음 → span 태그 안에는 div가 들어갈 수 없음 (div가 더 큼) HTML5 문서의 기본
인라인(Inline)요소 블록(block)요소 텍스트 요소, 기존 글에 이어서 작성 <span> 요소, <img> 요소, <strong> 요소 등 줄 바꿈 태그를 사용하지 않거나 블 록레벨 태그 안에 단독을 포함되지 않는 한 가로로 쭉 나열됨 (자동 줄바꿈 X) 주변에는 공간이 생기지 않음 예: <span>인라인 요소</span> 문서 구조 요소, 새로운 행에 작성 <div> 요소, <p> 요소, <h1> 요소 등 줄바꿈 태그를 사용하지 않아도 스 스로 줄 바꿈이 되며, 요소들은 가 로로 흐르지 않고 세로로 흐름 주변에 일정량의 공간을 만듦. 너비 를 정해주지 않으면 가로로 가득 참 예 :<h1> 블록레벨 요소 </h1> HTML5 문서의 기본
예제:div와 span <div style="background-color:lightgray"> <!– 인라인 형식 --> <span style="font-weight:bold">멀티미디어 배움터</span><br> <span style="font-style:italic">저자</span>: 최윤철, 임순범<br> <span style="font-style:italic">책소개</span>:<br> 멀티미디어 배움터 2.0은 <span style="color:red">미디어의 특성</span>과 <span style="color:red">미디어 처리기법</span>을 이해하고, 미디어의 활용 환경<span style="color:blue">(인터넷, 모바일, 사이버스페이스)</span>을 이해할 수 있도록, 멀티미디어가 활용되는 방식과 적용사례를 소개한다. </div> Style을 지정하는 속성은 style (div 태그에 대한 속성) “ “ 안에는 속성에 대한 값이 입력되어 있음 HTML5 문서의 기본
요소의 id 속성과 class 속성 요소의 id 속성과 class 속성 id 속성과 class 속성의 차이점 (역할은 같으나) 스타일시트와 자바스크립트에서 문서에 있는 요소를 참조하기 위한 속성 id 속성과 class 속성의 차이점 (역할은 같으나) id 속성은 문서에 하나의 요소를 참조하기 위해 사용 class 속성은 여러 개의 요소를 참조하기 위해서 사용 class 속성 공백으로 구분하여 여러 개의 값이 올 수 있음 스타일시트나 자바스크립트에서 각각의 이름으로 요소를 참조할 수 있음 <div class="book" id="book_multimedia">멀티미디어 배움터</div> <!– 참조를 해서 멀티미디어 배움터에 적용--> <div class="book" id="book_csharp">C# 입문</div> <div class="author book"> <!– author와 book을 각각 둘다 적용 --> HTML5 문서의 기본
2.6 문서 구조화하기 2.6.1 문서 구조화의 필요성 2.6.2 문서 구조화 요소 HTML5 문서의 기본
문서 구조화의 필요성 웹 문서는 이전에는 웹 브라우저를 통해 사람에게 정보를 보여주고 전달하는 용도로 주로 사용 적용 시에는 별 차이가 없으나 추후 개발을 위해서 보기 편하게 하기 위해 사용 최근에는 검색엔진이나 장애인을 위한 스크린 리더와 같이 사람이 아닌 컴퓨터가 문서를 이해해야 하는 경우가 늘어나고 있음 사람은 문장의 위치나 모양, 이미지 등을 통해 문서 내용을 이해할 수 있으나, 컴퓨터와 같은 기계는 단순 문장이나 문장 위치나 모양만으로 내용을 이해하기 힘듬 문서 구조화 웹문서 안에 있는 문장의 의미를 특정 의미를 가진 요소를 사용하여 명확하게 나타내는 것 HTML5 문서의 기본
Nav : navigation Article : 기사 Section : 안에서 부분부분 Aside : 사이드 로 나눠서 구조화를 시킨다. HTML5 문서의 기본
문서 구조화 요소 웹 문서 구조화 요소 <header>와 <article>, <section>, <aside>, <footer>, <nav>와 같은 요소가 있음 구조화 요소는 화면 상으로는 표시되지는 않지만, 구조화 요소에 포함된 다른 요소들의 용도와 성격을 나타내는 용도로 사용됨 HTML5에 새로 추가된 부분 이전 HTML에서는 <div> 요소와 <span> 요소를 사용하여 문서의 영역을 구분하였음 HTML5 문서의 기본
대충 이런 식으로 적용이 됨. 테이블로 짰을 때만 이런 식으로 구조화가 됨. HTML5 문서의 기본
문서 구조화 요소 <header> 요소 <nav> 요소 <article> 요소 웹문서에서 머리말 영역을 나타낼 때 사용 머리말 영역에는 제목, 제목 설명 문장 등을 나타내는 다른 요소를 포함함 <nav> 요소 웹 문서에서 다른 웹 문서나 문서내의 다른 부분으로 이동하는 부분을 나타내고자 할 때 사용 <article> 요소 웹 문서에서 주요 내용을 가진 본문을 나타낼 때 사용 웹 문서에서 실제로 나타내고자 하는 내용을 가지고 있으므로, 기계에 의해 중요한 부분으로 인식되어 처리됨 웹 문서에서는 여러 개의 <article> 요소가 나타날 수 있으며, 한 <article> 요소는 하나의 독립된 문서 내용을 나타냄 HTML5 문서의 기본
문서 구조화 요소 <section> 요소 <aside> 요소 <footer> 요소 비슷한 그룹이나 절 또는 문서를 묶기 위해서 사용 <aside> 요소 문서 내용과 관련된 여러 부수 정보를 나타내는데 사용 <footer> 요소 웹 문서의 저자 정보, 저작권 정보, 이용조건 등을 나타내기 위해서 사용 HTML5 문서의 기본
예제:문서구조화 <header>웹</header> <nav> <ul> <li>html5</li> <li>css3</li> <li>javascript</li> </ul> </nav> <aside> <li>W3C</li> <li>ECMA</li> <li>IETF</li> </adide> <article> <h1>html5 문서 기본</h1> <p>기본 문서 만들기</p > <p>문서 꾸미기</p> <p>목록 나열하기</p> <p>표 그리기</p> <p>문서 특정부분 구분하기</p> <p>문서 구조화하기</p> </article> <footer>작성자: 임순범, 박희민, 이창환</footer> HTML5 문서의 기본