[FE기초]HTML 시맨틱 태그
이전 포스팅에서는 HTML 에서 사용하는 기초 태그에 대해서 알아보았다.
HTML 두번째 포스팅에서는 시맨틱 테그와 블록,인라인의 개념에 대해서 한번 알아보자
[FE 기초]HTML 태그
[FE 기초]HTML 태그 백엔드 개발자 이지만 웹의 기초 중에 기초인 HTML,CSS, JS 가 어떤 식으로 동작하고 구성되는지 아는 것도 필요하다고 생각되었고 지금 듣는 KDT 과정에서도 일부 내용이 포함되어
developer-dodo.tistory.com
1. 시맨틱(Semantic) 태그
시맨틱 태그는 무슨의미일까?
즉 HTML에서 시맨틱 태그랑 의미를 가진다는 태그이다.
예를 들자면 <h1> 이 가장 큰 제목이라는 의미를 가진 태그인데 CSS로 동일한 상태로 표시되는 span 태그를 사용한다고 해보자
분명 보이는 모습은 동일하다. 그러나 그 의미가 크게 차이가 난다. 이런 방법을 지양해야한다.
👍 Semantic 태그 장점
- 검색엔진 최적화
- 네이버나 구글 등 포털 사이트에서 내가 만든 홈페이지의 상단에 올라올 확률이 높다.
- 웹 접근성 향상
- 앞서 언급한 스크린 리더등을 이용한 상황에서 의미를 명확하게 전달함으로 접근성이 향상 됩니다.
- 가독성 향상
- 개발을 하는 과정에서도 시맨틱 태그를 이용해서 그 목적을 코드 자체로 명시가 됨으로 유지보수 차원에서의 가독성이 향상 된다
HTML Sementic 요소
| 태그명 | 설명 |
| <header> | 페이지에 대한 정보를 담는 태그, 페이지 상단에 위치 |
| <nav> | 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션 |
| <aside> | 페이지 전체 내용과 어느정도 관련성이 있지만, 주요 내용과 직접적인 연관성은 없는 분리된 내용 |
| <main> | 문서의 Body의 요소의 주 컨텐츠를 정의 |
| <section> | 문서의 응용프로그램의 일반적인 섹션 |
| <article> | article은 여러가지 아이템들을 묶어 재사용 가능하게 그룹핑 |
| <footer> | 주로 저작권 정보나 제공자 정보등 사이트 하단 위치 |
| <details> | 추가적인 정보를 나타내거나 사용자가 요청하는 정보 |
| <summary> | 부모요소인 details요소의 내용에 대한 요약이나 캡션 |
| <figcaption> | 부모요소인 figure 요소의 내용들에 대한 캡션 ,혹은 제목 |
| <figure> | 일러스트, 다이어그램, 사진 코드 등 주석을 다는 용도 |
| <mark> | 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목적으로 마킹 또는 하이라이트 텍스트 의미 |
| <time> | 24시간 , 그레고리력에서의 정밀 날짜 |
MDN을 통해서 추가적으로 알 수 있다
HTML - Web 개발 학습하기 | MDN
웹사이트를 만들기 위해서는 웹 페이지 구조 정의의 토대가 되는 기술인 HTML에 대해 알아야 합나다. HTML은 작성하고자 하는 웹 콘텐츠가 문단인지, 리스트인지, 헤드라인인지, 링크인지, 이미지
developer.mozilla.org
예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Semantic</title>
</head>
<style>
* {
text-align: center;
}
header {
border: 2px solid red;
line-height: 55px;
height: 55px;
}
nav {
border: 2px solid blue;
height: 110px;
}
main {
border: 2px solid green;
height: 300px;
line-height: 300px;
}
footer {
border: 2px solid black;
height: 55px;
line-height: 55px;
}
ul {
list-style: none;
padding-left: 0px;
}
</style>
<body>
<header>Header 영역</header>
<nav>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</nav>
<main>컨텐츠 영역</main>
<footer>footer 영역</footer>
</body>
</html>
정리 해보자면 시멘틱 태그는 의미를 가지고 HTML에서 마크업 하는 경우에는 의미에 맞게 용도에 맞게 시멘틱 태그를 사용해서 개발하는 것이 중요하다
2. Block/Inline Element
블록 코드와 인라인 코드 이름 그대로 의역해보자면 레벨 단위가 블록이나 인라인 한줄 단위냐 그렇게 이해가 될 수 도 있다.
정확한 정의를 한번 알아보자
◼ Block Element
블록 레벨 요소는 부모 요소의 전체 공간을 차지하며 블록을 만든다
대표적으로 <h1>~<h6> <ol> <ul> <li> <p> 등이 있다.
- 화면의 구성이나 레이아웃을 구성할 때 사용
- 블록 레벨 요소는 한칸을 모두 차지하기에 세로로 나열 즉 하나로 가로 나열 불가
- width, height, margin 속성 적용 가능
◼ Inline Element
인라인 레벨 요소는 콘텐츠의 흐름이 지속, 즉 줄바꿈이 없다.
요소를 구성하는 태그에 할당된 공간만 차지한다.
글자로 치면 글자 수 만큼만 공간 할당
대표적으로 <a> <em> <img> <span> 등이 존재
- 인라인 레벨은 콘텐츠 영역만큼 차지하기에 가로로 나열
- maring-top, margin-bottom 미적용
- line-height 사용
- width, height 속성이 적용되지 않는다.
- 태그가 콘텐츠 할당 공간만 갖고 있기 때문에 text-align 같은 속성 불가능
◼ <div> / <span>
두 가지의 태그 모두 영역 태그이다.
영역을 가지는 태그인데 역활과 동작이 다른 점이 존재한다.
<div> 태근느 영역을 분할하는 태그이며, 컨테이너의 역할도 한다.
<span> 영역 태그이며 특정 아이템을 꾸밀때 사용한다.
이 두개의 차이는 바로 앞에서 설명한 block 과 inline의 차이이다.
실제로 아래 첨부된 예시를 실행 시키면 div는 영역 전체를, 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 2</title>
</head>
<style>
div {
background-color: yellow;
width: 100px;
height: 100px;
border: 1px solid black;
}
span {
background-color: red;
width: 100px;
height: 100px;
border: 1px solid;
}
</style>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<span>1</span><span>2</span><span>3</span>
</body>
</html>
'FrontEnd' 카테고리의 다른 글
| [FE기초]CSS 다루기 (0) | 2024.04.25 |
|---|---|
| [FE기초] CSS 기초 (0) | 2024.04.25 |
| [FE기초] Head 태그 (0) | 2024.04.25 |
| [FE기초] Form 태그 (0) | 2024.04.24 |
| [FE 기초]HTML 태그 (3) | 2024.04.19 |
