Sementic 태그
: 의미를 가지는 태그
: 검색엔진 최적화
: 웹 접근성 향상
: 가독성 향상
span 태그를 사용하여 h1 태그처럼 스타일을 꾸밀 수 있지만 이는 지양하는 바이다.
non-sementic 태그를 사용하는 경우
: div 태그는 class를 지정해줘야 함으로 가독성이 떨어진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="header">Header 영역</div>
<div class="nav">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
<div class="main">Content 영역</div>
<div class="main">Footer 영역</div>
</body>
</html>
sementic 태그를 사용하는 경우
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Semantic</title>
</head>
<body>
<header>Header 영역</header>
<nav>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</nav>
<main>Contenet 영역</main>
<footer>Footer 영역</footer>
</body>
</html>
HTML Sementic Element
- <header> : 페이지에 대한 정보를 담는 태그, 페이지 상단에 위치한다.
- <nav> : 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현한다.
- <aside> : 페이지 전체 내용과는 어느정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있다.
- <main> : 문서의 body 요소의 주 콘텐츠(main content)를 정의할 때 사용
- <section> : 문서나 응용프로글매의 일반적인 섹션을 표현한다.
- <article> : article은 여러가지 아이템들을 묶어 재사용 가능하게 그룹화함
- <footer> : 주로 저작권 정보나 서비스 제공자 정보 등을 나타내며 사이트 하단에 위치한다.
- <details> : 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타낸다.
- <summary> : 부모요소인 details 요소의 내용에 대한 요약이나 캡션 등을 나타낸다.
- <figure> : 일러스트, 다이어그램, 사진, 코드 등에 주석을 다는 용도로 사용한다.
- <figcaption> : 부모요소인 figure 요소의 내용들에 대한 캡션, 혹은 제목을 나타낸다.
- <mark> : 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목적으로 마킹되거나 하이라이트된 텍스트를 표현한다.
- <time> : 24시간에서의 시간 혹은 그레고리력에서의 정밀한 날짜를 나타낸다.
Inline Level Element vs Block Level Element
<div> vs <span> : 웹 페이지 영역에서 영역을 구분할 때 사용하는 태그
| <div>_Block | <span>_Inline |
| Display : Block | Display : Inline |
| 박스형태로 구분 | 컨텐츠의 할당된 공간만으로 구분 |
| 부모 요소의 전체공간을 차지하여 "블록"을 만든다. | margin-top, margin-bottom 적용되지 않음 대신 line-height 이용 |
| 화면 구성이나 레이아웃을 짤 때 | width, height 속성이 적용되지 않는다. |
| 가로영역을 모두차지 >>> 세로로 나열 | 컨텐츠 공간만 차지 >>> 가로로 나열 |
| width, height, margin 속성이 적용된다 | 컨텐츠의 할당된 공간만 >>> text-align과 같은 속성은 사용X |
| <h1>~<h6> , <0l>, <ul>, <li>, <p>, | <a> , <em> , <img>, <span>, |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inline Block 1</title>
<style>
div {
background-color: red;
}
span {
background-color: yellow;
}
</style>
</head>
<body>
<div>
애국가의 자취는 조선 후기 개화기와 갑오개혁 직후까지 올라간다. 1896년 당시
독립문 정초식에서 배재학당 학생들에 의해 그 유명한 스코틀랜드 민요 올드 랭
사인의 멜로디에 맞춰 불린 작사 미상인 '무궁화 노래' 가 원류로 여겨진다.
공식적으로 배재학도들이 부른 것은 '조선가', '독립가', '진보가' 이 3개이고
다른 학원 학생들도 여러 애국가를 불렀다는데 참여한 학당 중 밀러학당이
있었고 여기서 부른 것으로 추정되는 '최초의 무궁화 노래' 에 후렴 "무궁화
삼천리 화려강산 죠션 사람 죠션으로 길이 보죤하세" 라는 가사가 지금의
애국가 가사에서도 맥을 이어 변형(조선→대한)되어 쓰이고 있는 데서 확인할 수
있다. 이 때는 한 해에 수십 개의 애국가가 쏟아져 나왔다.
</div>
<span
>애국가의 자취는 조선 후기 개화기와 갑오개혁 직후까지 올라간다. 1896년
당시 독립문 정초식에서 배재학당 학생들에 의해 그 유명한 스코틀랜드 민요
올드 랭 사인의 멜로디에 맞춰 불린 작사 미상인 '무궁화 노래' 가 원류로
여겨진다. 공식적으로 배재학도들이 부른 것은 '조선가', '독립가', '진보가'
이 3개이고 다른 학원 학생들도 여러 애국가를 불렀다는데 참여한 학당 중
밀러학당이 있었고 여기서 부른 것으로 추정되는 '최초의 무궁화 노래' 에 후렴
"무궁화 삼천리 화려강산 죠션 사람 죠션으로 길이 보죤하세" 라는 가사가
지금의 애국가 가사에서도 맥을 이어 변형(조선→대한)되어 쓰이고 있는 데서
확인할 수 있다. 이 때는 한 해에 수십 개의 애국가가 쏟아져 나왔다.</span
>
</body>
</html>
'HTML' 카테고리의 다른 글
| Head 태그 안에 배치할 수 있는 요소 (0) | 2024.01.22 |
|---|---|
| Form 태그 (0) | 2024.01.22 |
| 이미지 & 멀티미디어 | 오디오, 비디오, 하이퍼링크 태그 (0) | 2024.01.22 |
| HTML 태그 | 글꼴태그 | 목록태그 | 표태그 (1) | 2024.01.21 |
| HTML 이란? | Emmet ? (0) | 2024.01.21 |
댓글