01HTML설계 가이드
2021. 12. 13. 12:30ㆍksmart_html_css_js/html
728x90
HTML 태그
<!-- html 주석 처리 방법 -->
<!DOCTYPE html>
<!-- html5 버전 가르킨다. -->
<html>
<!-- html문서 시작을 알린다. -->
<head>
<!-- 이 페이지의 정보를 서술 하는 공간 눈에 보이지 않는 정보 -->
<title>sample</title>
<meta charset="UTF-8">
</head> <body>
<!-- 사용자의 눈에 보이는 컨텐츠를 나열하는 공간 -->
<h1>ksmart</h1> 한국스마트정보교육원
</body>
</html>"Hyper Text Mark-up Language"의 약자
웹 문서(페이지)를 작성하기 위한 언어
html 문서 버전은 doctype으로 서술
html 문서 시작을 알리는 태그는 html 태그이다.
·요소와 속성
요소 : 시멘틱 태그* 및 엘리멘트 요소등을 포함
속성 : 태그가 가질 수 있는 정보
*시멘틱 태그 : 의미가 있는 명칭으로 만들어진 블럭 요소인 header, footer 등
레이아웃 구현
레이아웃 구성
|
레이아웃
|
설명
|
|
상단(Header) 영역
|
- 문서의 header를 나타낼 때 사용하고, 사이트 로고, 링크, 소개 등을 넣음.
- <header></header>
|
|
내비게이션 영역
|
- 문서의 navigation을 나타낼 때 사용하고, 보통 메뉴 영역으로 사용
- <nav></nav>
|
|
사이드 바 영역
|
- 본문 전체 내용과 직접적인 연관성이 없는 분리된 내용을 담을 때 사용
- 주로 사이드바에 사용되며, 다른 예로는 배너광고 및 위젯 등이 존재
- <aside></aside>
|
|
하단(Footer) 영역
|
- 문서의 하단을 나타낼 때 사용하고, 주소, 연락처, 저작권을 넣음.
- <footer></footer>
|
article, section, div
<article></article> - 문서 혹은 요소가 독립적으로 존재할 수 있을 때
<section></section> - 논리적으로 관계있는 문서 혹은 요소를 분리 할 때
<div></div> - 요소간 논리적 관계와는 상관없이 요소를 나눠야 할 때
<article>
<h1>Article1 Heading</h1>
<section>
<h2>Section1 Heading</h2>
<p>Content...</p>
</section>
<section>
<h2>Section2 Heading</h2>
<p>Content...</p>
</section>
<section>
<h2>Section3 Heading</h2>
<p>Content...</p>
</section>
</article>
728x90
'ksmart_html_css_js > html' 카테고리의 다른 글
| 관리자입장 회원관리 완전 가짜화면_html (0) | 2021.12.20 |
|---|---|
| 03Form 태그 요소_Input (0) | 2021.12.14 |
| 02블럭요소_인라인요소 (0) | 2021.12.13 |