HTML과 CSS/HTML

HTML - 디스플레이, 시멘틱 태그

큐트아리 2023. 10. 14. 15:58

1. HTML의 디스플레이

1.1. inline 

    - content의 크기만큼만 자리를 차지하는 요소
    - 텍스트, img, span
    - 텍스트의 특징을 가지고 있음 

 

1.1.1. span 태그 

- inline 특징을 가지고 있음
- 글자 단위로 영역이 설정
- css를 입히기 위한 역할



1.2. block

    - 라인을 모두 차지하는 요소
    - p,h,ul,li,div
    - 면의 특징을 가지고 있어서 글자취급이 아니라 면적취급당함

 

1.2.1. div 태그


- block 특징을 가지고 있음
- 면 단위로 영역이 설정 

 

<코드 예시>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>디스플레이</title>
</head>
<body>
    <h2>디스플레이</h2>
    1. <span style="font-size: 30px; color : deeppink">span 태그 영역</span>입니다
    <div style="width: 600px; height: 300px; color: blueviolet; background-color: silver;">2. div 태그 영역</div>

</body>
</html>

<결과>

디스플레이

디스플레이

1. span 태그 영역입니다
2. div 태그 영역

2. 시멘틱 태그

시멘틱 태그는 HTML 요소 중 웹 페이지의 내용을 의미론적으로 구조화하는 태그들을 의미합니다. 이러한 태그들은 웹 브라우저와 검색 엔진에 웹 페이지의 내용을 더 명확하게 설명하고 의미를 부여합니다.시멘틱 태그를 사용하면 웹 페이지가 의미론적으로 보다 풍부하게 설명되며, 웹 접근성과 SEO에 도움이 됩니다.

 

✔SEO란?

SEO(검색 엔진 최적화)란, 웹 사이트나 웹 페이지를 검색 엔진에서 높은 순위로 나타낼 수 있도록 최적화하는 작업을 말합니다. 이를 통해 더 많은 사람이 해당 웹 페이지를 찾을 수 있고, 웹 페이지에 더 많은 유기적인 트래픽을 유치할 수 있습니다.

 

2.1.  시맨틱 태그의 장점 

- 검색엔진 최적화
- 스크린 리더를 사용해 페이지 탐색시 도움
- 끝없는 div를 탐색하는것보다 효율적
- 개발자에게 명확한 의미를 전달

 

2.2. 시멘틱 태그를 쓰기위해 div대신 쓰는 태그

  • <header></header>
    - 페이지의 제목과 같은 소개, 내용을 포함
    - heading 태그나 로고, 검색양식, 작성자 이름 등을 포함

  • <nav></nav>
    - 메뉴, 목차 등에 사용

  • <main></main>
    - 지배적인 컨텐츠 영역을 나타내는 태그

  • <section></section>
    - 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
    - 섹션에는 항상 제목이 있는 것이 일반적
    - 네이버 홈에서 연예. 사회, 스포츠면이 이런거에 해당

  • <article></article>
    - 자체로 의미가 있는 웹페이지 부분이며 독립적으로 배포 또는 재사용 되도록 의도된 문서
    - 블로그, 신문기사, 게시물 같은 경우가 article로 구성되어 있음

  • <footer></footer>
    - 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트 등을 포함

  • <aside></aside>
    - 간접적으로 문서와 관련된 내용 또는 관련없는 사이드바(광고)