코드 그라데이션
1. HTML 시작하기, 시멘틱 태그 본문
시멘틱 태그의 필요성
시멘틱 : '의미론적인, 의미가 통하는'.
1) 시맨틱 태그를 사용하면
웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있기 때문.
2) 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트기기의 다양한 화면에서
웹 문서를 표현하기가 쉬워짐.
3) 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있게 된다..
예제 - 시멘틱 태그 알아보기
<!DOCTYPE html>
<html lang="ko">
<!-- 주석 -->
<head>
<title>공부</title>
</head>
<body>
<header>
<p>Header</p>
</header>
<section>
<p>Section</p>
</section>
<aside>
<p>aSide</p>
</aside>
<footer>
<p>footer</p>
</footer>
</body>
</html>
이 정도로 구분이 된다.
주요 시멘틱 태그
1) <header> : 헤더 영역을 나타냄
- 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입한다.
- 웹 문서의 정보를 담는 <head> </head>와는 다르다.
2) <nav> : 네비게이션 영역을 나타냄
- 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만듦.
- 내비게이션을 만들 때 사용
- 웹 문서의 위치에 영향을 받지 않는다. 그래서 헤더나 푸터, 사이드 바 안에 포함할 수도 있고, 독립해서 사용할 수도 있다.
- 이 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 네비게이션마다 다른 스타일을 적용할 수 있다.
3) <main> : 핵심 콘텐츠를 담음
- 메뉴, 사이드 바, 로고 처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성한다.
- 웹 문서에서 한 번만 사용할 수 있다.
4) <article> : 독립적인 콘텐츠를 담음
- 웹에서 실제로 보여 주고 싶은 내용을 넣는다.
- 문서 안에서 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있다.
5) <section> : 콘텐츠 영역을 나타냄.
- <article> 태그와는 좀 다른데, <article> 태그는 블로그의 포스트 처럼 독립된 콘텐츠로 쓰는 것을 의미하며,
- <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용한다.
6) <aside> : 사이드바 영역을 나타냄
- 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다.
7) <footer> : 푸터 영역을 나타냄
- 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다.
- 여기에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣는다.
- 이 영역에는 다른 시멘틱 태그를 모두 사용할 수 있다.
8) <div> : 여러 소스를 묶음.
- id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용.
- 영역을 구별하거나 스타일로 문서를 꾸밈.
728x90
'Front > Mega-HTML' 카테고리의 다른 글
| 6. input 태그 (1) (0) | 2023.05.12 |
|---|---|
| 5. 폼 삽입하기 (0) | 2023.05.12 |
| 4. 이미지, 오디오, 비디오, 하이퍼링크 삽입하기 (0) | 2023.05.12 |
| 3. 목록과 표 만들기 (0) | 2023.05.12 |
| 2. 텍스트 입력하기 (0) | 2023.05.12 |
'Front/Mega-HTML' Related Articles
more
Comments