HTML 구조를 잡을 때 사용하는 태그
<header>
<nav>
</nav>
</header>
<main>
<section>
<article>
</article>
</section>
</main>
<footer>
</footer>
Semantic Tag
브라우저와 개발자 모두에게 정확한 의미를 설명해 준다.
구조상 <body>안에 들어간다.
According to the W3C:
"A semantic Web allows data to be shared and reused across applications, enterprises, and communities."
<header>
소개 및 탐색에 도움을 주는 콘텐츠를 나타냄.
웹 사이트의 머리글을 담는 공간.
이미지 등을 활용하여 로고 등이 존재함.
head / header / heading 구별하기
head
기본 구조 태그 (!doctype.html-html-head-body) 에 속함.
페이지를 열 때 브라우저에 나타나지 않는다.
메타 데이터(<meta charset = "UTF-8">이 기록된다.
header
시멘틱 태그로 <body>안에 위치한다.
heading
문서의 제목. <body> 안에 위치한다. <h1>~<h6>으로, 숫자가 클수록 글자 크기가 작아진다.
참고 사이트 :
head, heading, head 구별 방법: https://nonipc.com/entry/head-heading-header-%EA%B5%AC%EB%B3%84-%EB%B0%A9%EB%B2%95
head, heading, header 구별 방법
1. HTML의 구조를 와 로 나눌 때 윗부분이 이다. 이 영역은 페이지를 열 때 브라우저에 나타나지 않는다. (단, title은 브라우저 창 탭에 나타난다) 에는 , CSS, 파비콘, metadata가 기록된다. 메타 데이터
nonipc.com
Q. 검색 엔진에 표시되는 데 중요한 건 무엇이죠? 설명했던 게 있었는데 뭐였더라.
<nav>:
메뉴 버튼을 담는 공간.
navigation의 약자, 문서의 또 다른 페이지로 이동하는 링크의 모음
<ul>,<li>,<a>와 함께 사용.
<main>:
body 내의 주요 콘텐츠(내용)을 담는 태그.
IE는 지원하지 않으므로, <main role="main"> 이라고, 속성 입력이 필수.
<article>:
문서 내의 주요 이미지/텍스트 등의 정보를 담고 구역을 설정하는 태그
사이트 내 독립적인 구분(블로그 게시글, 뉴스 기사 등), heading<h#>을 포함해서 사용
<section>
<section>과 <article>의 관계:
서로 부모 자식이 될 수 있다.
<aside>
<footer>
웹 사이트 하단과 같은 바닥글, 저작권, 연락처, 작성자 등의 정보를 적음.
<div>태그를, 여기서 임의의 공간을 만들 때 사용한다.
HTML 구조, 출력되는 화면, 태그의 의미(semantci)를 잘 고려해야 한다.
블록 태그와 인라인 태그
| 블록 태그 Block Tag | 인라인 태그 Inline Tag | |
| 기능 | 공간을 만들 수 있음. 상하 배치 작업 가능 가능한 전체 너비를 차지한다. |
공간 만들 수 없음. 상하 배치 작업 불가능. 필요한 만큼의 너비만 차지한다. |
| 정렬 형태 | Y축 정렬 형태(줄바꿈 현상O) 항상 새 줄에서 시작한다. |
X축 정렬 형태(줄바꿈 현상X) 새 줄에서 시작하지 않고 이어진다. |
| tags | <h1>, <p>,<ul>,<ol>,<li> | <a>,<em>,<img>,<strong> |
| 공간 구분자 | 블록 단위 공간 구분자: <div> 콘텐츠 블록 스타일 지정 가능
|
인라인 단위 공간 구분자: <span> 텍스트의 부분 스타일 지정 가능 |
블록과 인라인 요소를 구분짓는 세 가지 주요 특징: 줄바꿈 현상, 가로세로, 상하배치
'공부기록 > HTML&CSS' 카테고리의 다른 글
| [CSS] 애니메이션 (0) | 2022.06.29 |
|---|---|
| [CSS] Display, Float, Clear, 공간 디폴트 세팅(복습 필요) (0) | 2022.06.29 |
| [HTML] 박스 모델, Block, line, 마진 병합 현상 (0) | 2022.06.28 |
| [CSS] 주요 속성 (0) | 2022.06.28 |
| [HTML] Basic Tags 기본 태그들 (0) | 2022.06.27 |
