** 영상으로 보고 싶다면 아래 주소를 클릭하세요.
https://www.youtube.com/watch?v=lPEwKzviD0I&t=16s
1. 제목태그
1) 텍스트 태그의 종류
| 태그이름 | 설명 |
| h1 | 첫번째로 큰 제목 글자 태그, 로고를 담는 태그 |
| h2 | 두번째로 큰 제목 글자 태그 |
| h3 | 세번째로 큰 제목 글자 태그 |
| h4 | 네번째로 큰 제목 글자 태그 |
| h5 | 다섯번째로 큰 제목 글자 태그 |
| h6 | 여섯번째로 큰 제목 글자 태그 |
- 제목이 되는 것을 순서에 맞게 논문을 작성하듯이 순서를 맞춰서 시멘틱(의미론적)으로 작성하는 것이 중요
2) 코드 테스트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Test</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
</body>
</html>
3) 코드 완성뷰
2. 문단 태그
1) 문법
- <p></p> : 긴 문단을 작성하는 태그
2) 코드 테스트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Test</title>
</head>
<body>
<h1>본문태그 확인</h1>
<p>
나랏말싸미 듕귁에 달아
문자와로 서르 사맛디 아니할쎄
이런 전차로 어린 백셩이 니르고져 홇베이셔도
마참네 제 뜨들 시러펴디 몯핧 노미하니아
내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니
사람마다 해여 수비니겨 날로
쑤메 뻔한킈 하고져 할따라미니라
</p>
</body>
</html>
3) 코드 완성뷰
3. 강제개행태그
1) 문법
- <br> 혹은 <br /> : 엔터처리가 되지 않는 텍스트 컨텐츠에 엔터를 처리해줌
2) 코드 테스트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Test</title>
</head>
<body>
<h1>본문태그 확인</h1>
<p>
나랏말싸미 듕귁에 달아<br />
문자와로 서르 사맛디 아니할쎄<br />
이런 전차로 어린 백셩이 니르고져 홇베이셔도<br />
마참네 제 뜨들 시러펴디 몯핧 노미하니아<br />
내 이랄 윙하야 어엿비너겨 새로 스믈 여듫 짜랄 맹가노니<br />
사람마다 해여 수비니겨 날로<br />
쑤메 뻔한킈 하고져 할따라미니라
</p>
</body>
</html>
3) 코드 완성뷰
4. 순서가 있는 목록태그(리스트)
1) 문법
- <ol>태그의 자손은 <li>태그만 존재할 수 있다.
- <ol>태그는 안의 자손들을 순서가 있는 리스트로 묶겠다는 그룹적 의미
- <li>태그는 그 리스트한개한개를 의미한다.
<ol>
<li>리스트</li>
<li>리스트</li>
</ol>
2) 코드 테스트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Test</title>
</head>
<body>
<ol>
<li>포토샵</li>
<li>일러스트레이터</li>
<li>플래시</li>
<li>드림위버</li>
</ol>
</body>
</html>
3) 코드 완성뷰
5. 순서가 없는 목록태그(리스트)
1) 문법
- <ul>태그의 자손은 <li>태그만 존재할 수 있다.
- <ul>태그는 안의 자손들을 순서가 없는 리스트로 묶겠다는 그룹적 의미
- <li>태그는 그 리스트한개한개를 의미한다.
<ul>
<li>리스트</li>
<li>리스트</li>
</ul>
2) 코드 테스트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Test</title>
</head>
<body>
<ul>
<li>포토샵</li>
<li>일러스트레이터</li>
<li>플래시</li>
<li>드림위버</li>
</ul>
</body>
</html>
3) 코드 완성뷰
6. 정의된 목록(리스트)
1) 문법
- <dl>태그의 자손은 <dt>와 <dl>만 존재할 수 있음
- <dl>태그는 용어와 설명들을 묶는 그룹의 의미
- <dt>태그는 리스트 한개의 용어를 의미
- <dd>태그는 리스트 한개의 용어에 대한 설명을 의미
<dl>
<dt>정의된 용어</dt>
<dd>용어에 대한 설명</dd>
</dl>
2) 코드 테스트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Test</title>
</head>
<body>
<dl>
<dt>like</dt>
<dd>1. …와 비슷한</dd>
<dd>2. 무엇에 대해 남의 의견을 물을 때 씀</dd>
<dd>3. 어떤 사람의 보통・전형적인 측면을 말할 때 씀</dd>
<dt>hate</dt>
<dd>1. (무엇을) 몹시 싫어하다</dd>
<dd>2. (사람을) 미워하다</dd>
</dl>
</body>
</html>
3) 코드 완성뷰
7. 중첩된 리스트
1) 문법
<ul>
<li>상위리스트</li>
<li>
상위리스트
<ul>
<li>하위리스트</li>
<li>하위리스트</li>
</ul>
</li>
</ul>
2) 코드 테스트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Test</title>
</head>
<body>
<h1>ol과 ul의 중첩사용</h1>
<h2>설빙메뉴</h2>
<ul>
<li>
빙수메뉴
<ol>
<li>인절미설빙</li>
<li>밀크팥설빙</li>
<li>블루베리치즈설빙</li>
<li>망고치즈설빙</li>
</ol>
</li>
<li>
인절미토스트메뉴
<ol>
<li>인절미토스트</li>
<li>치즈인절미토스트</li>
<li>치즈갈릭인절미토스트</li>
<li>유자인절미토스트</li>
</ol>
</li>
</ul>
</body>
</html>
3) 코드 완성뷰
8. 실제 홈페이지의 응용
https://www.ddc.go.kr/ddc/contents.do?key=348
정보공개청구 및 처리절차 - Do Dream 동두천
정보공개제도란? 국가기관, 지방자치단체에서 어떤 일을 하고 있고 예산을 어떻게 집행하고 있는지 국민들이 알 수 있도록 공공기관이 보유, 관리하고 있는 정보를 국민이 청구하거나 공공기관이 적극적으로 함으로써 국민의 알 권리를 충족하고 국민의 국정참여를 보장하는 제도 정보공개 대상정보 공공기관이 직무상 작성 또는 취득하여 관리하고 있는 문서(전자문서를 포함)·도면·사진·필름·테이프 슬라이드 및 그 밖에 이에 준하는 매체 등에 기록된 사항 정보공개 방법 공공기
www.ddc.go.kr
* 코드 뷰
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트태그응용 - 동두천시</title>
</head>
<body>
<h1>동두천로고</h1>
<h2>공개/개방</h2>
<h3>정보공개청구 및 처리절차</h3>
<h4>정보공개제도란?</h4>
<p>국가기관, 지방자치단체에서 어떤 일을 하고 있고 예산을 어떻게 집행하고 있는지 국민들이 알 수 있도록 공공기관이 보유, 관리하고 있는 정보를 국민이 청구하거나 공공기관이 적극적으로 함으로써 국민의 알 권리를 충족하고 국민의 국정참여를 보장하는 제도</p>
<h4>정보공개 대상정보</h4>
<p>공공기관이 직무상 작성 또는 취득하여 관리하고 있는 문서(전자문서를 포함)·도면·사진·필름·테이프 슬라이드 및 그 밖에 이에 준하는 매체 등에 기록된 사항</p>
<h4>정보공개 방법</h4>
<p>공공기관이 정보를 열람하게 하거나 그 사본·복제물을 제공하는 것 또는 정보통신망을 통하여 정보를 제공하는 것(법 제2조 제2호)</p>
<h4>정보공개 방법</h4>
<p>공공기관이 정보를 열람하게 하거나 그 사본·복제물을 제공하는 것 또는 정보통신망을 통하여 정보를 제공하는 것(법 제2조 제2호)</p>
<h4>정보공개 청구권자</h4>
<ul>
<li>모든 국민(법인, 단체 포함)</li>
<li>
외국인
<ul>
<li>국내에 일정한 주소를 두고 거주하거나 학술·연구를 위하여 일시 적으로 체류하는 자</li>
<li>국내에 사무소를 두고 있는 법인 또는 단체</li>
</ul>
</li>
</ul>
<h4>공개 대상기관</h4>
<ul>
<li>
국가기관
<ul>
<li>국회, 법원, 헌법재판소, 중앙선거관리위원회(해당기관에 직접청구)</li>
<li>중앙행정기관(대통령 소속 기관과 국무총리 소속 기관을 포함) 및 그 소속 기관</li>
<li>「행정기관 소속 위원회의 설치·운영에 관한 법률」에 따른 위원회</li>
</ul>
</li>
<li>
지방자치단체
<ul>
<li>「공공기관의 운영에 관한 법률」 제2조에 따른 공공기관</li>
</ul>
</li>
<li>그 밖에 대통령령으로 정하는 기관</li>
</ul>
</body>
</html>
'웹언어 > HTML5' 카테고리의 다른 글
| [HTML기초문법] 6강 테이블(table)태그 (0) | 2020.05.15 |
|---|---|
| [HTML기본문법] 5강 <div>태그와 <span>태그 (0) | 2020.04.23 |
| [HTML기초문법] 4강 이미지 태그 (0) | 2020.04.21 |
| [HTML기초문법] 3강 a(앵커)태그와 하이퍼링크 (0) | 2020.04.20 |
| [HTML기초문법] 2강 글자형태태그, 첨자태그, 강조태그 (0) | 2020.04.20 |
