웹페이지 레이아웃을 구성하기 위해 공간을 분할하는 태그

sssuin·2021년 6월 15일
0

html

목록 보기
9/9
  • 공간을 분할할 수 있는 태그는 div, span, table 등이 있음
  • 모던 웹에서는 주로 div를 사용
  • div 태그는 의미론적으로 의미를 가지고 있지 않기 떄문에, div태그와 같은 기능을 수행하지만 검색엔진이나 그 외의 기계적인 동작들이 웹페이지를 쉽게 이해할 수 있는 시맨틱태그를 사용하는 것이더 낫다. 하지만 IE에서 작동하지 않기 때문에 주의 필요

1.시맨틱태그

  • header: 헤더
  • nav: 내비게이션
  • aside: 사이드에 위치하는 공간
  • section: 본문의 여러 내용(article)을 포함하는 공간
  • article: 본문의 주내용이 들어가는 공간
    -footer: 푸터

    -> 이와 같은 공간 분할 태그는 다른 요소를 포함하는 컨테이너 역할을 함

2.div와 span의 차이

(1)div 태그

: block형식으로 공간 분할 -> 차곡차곡 쌓아 올려지는 형식

여기서 blcok레벨 요소란?

  • 항상 새로운 라인에서 시작
  • 화면 크기 전체의 가로폭을 차지(width: 100%)
  • width, height, margin, padding 프로퍼티 지정 가능
  • block레벨 요소 내에 inline레벨 요소 포함 가능
  • block 레벨 요소 예: div, h1~h6, p, ol, ul, li, hr, table, form

(2)span 태그

: inline형식으로 공간 분할 -> 한줄안에 차례차례 위치

여기서 inline레벨 요소란?

  • 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치
  • content의 너비가 가로폭
  • width, height, margin-top, margin-bottom 프로퍼티를 지정X, 상하 여백은 line-height로 지정
  • inline레벨 요소 뒤에 공백(엔터, 스페이스)가 있는 경우, 정의하지 않은 space(4px)가 자동 지정됨
  • inline레벨 요소 뒤에 block요소를 포함X, inline레벨 요소는 일반적으로 block레벨 요소에 포함되어 사용
  • inline 레벨 요소 예: span, a, strong, img, br, input, select, textarea, button, 글자형식태그

-> 자세한 내용은 css display 프로퍼티에서!

출처

0개의 댓글