[FE기초]HTML 시맨틱 태그

2024. 4. 19. 15:42· FrontEnd
목차
  1. 1. 시맨틱(Semantic) 태그
  2. 2. Block/Inline Element
반응형

[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
  1. 1. 시맨틱(Semantic) 태그
  2. 2. Block/Inline Element
'FrontEnd' 카테고리의 다른 글
  • [FE기초] CSS 기초
  • [FE기초] Head 태그
  • [FE기초] Form 태그
  • [FE 기초]HTML 태그
김도도새
김도도새
1년자 주니어 개발자의 좋은 백엔드 개발자로 걸음을 기록하는 공간
반응형
김도도새
Stacking Devlop
김도도새
전체
오늘
어제
  • 분류 전체보기 (48)
    • 회고 (0)
    • Spring (13)
    • Java (3)
    • 잡동사니 (0)
    • 도서 (0)
    • 웹 Basic (5)
    • 개인프로젝트 (0)
    • 에러모음 (2)
    • 개발회고록 (0)
    • 알고리즘 (5)
    • Git (1)
    • 디자인패턴 (2)
    • FrontEnd (11)
    • JPA (3)
    • Build Tool (1)
    • DB (0)
    • 운영체제 (0)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

최근 댓글

최근 글

hELLO · Designed By 정상우.v4.2.2
김도도새
[FE기초]HTML 시맨틱 태그
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.