KDT/HTML | CSS

HTML의 디스플레이

jhwannabe 2023. 3. 27. 17:11


1. inline

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

 

2. block

  • 라인을 모두 차지하는 요소
  • p, h, ul, li, div, ...
  • 명의 특징을 가지고 있음

 

span 태그

  • 줄 단위로 영역이 설정
  • inline 특징을 가지고 있음

 

div 태그

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

 

시맨틱 태그(Sementic)

  • Sementic: 의미론적인
  • 의미가 있는 태그를 사용

 

시맨틱 태그의 장점

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

 

<header> </header>

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

 

<nav> </nav>

  • 메뉴, 목차 등에 용용

 

<main> </main>

  • 지배적인 컨텐츠 영역을 나타내는 태그

 

<section> </section>

  • 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
  • 섹션에는 항상 제목이 잇는 것이 일반적

 

<article> </article>

  • 자체로 의미가 있는 웹페이지 부분이며, 독립적으로 배포 또는 재사용되도록 의도된 문서
  • 게시물, 잡지, 블로그 또는 신문기사

 

<footer> </footer>

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

 

<aside> </aside>

  • 간접적으로 문서와 관련된 내용
  • 사이드 바

예제 코드

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

728x90