💥 중요 포인트 💥
부모/자식(DOM) 관계!!

공간 분할 태그

div: 블록 형식으로 공간 분할
> width: 전체 행
> 한 행을 모두 차지하며 끝 태그 이후 바뀜
span: 인라인 형식으로 공간 분할
> width: 컨텐츠의 크기
> 내용 만큼만 영역을 차지 / 끝 태그 이후 줄바꿈 하지 않고 다음 내용 출력
블록 형식: div, h1~h6, p, 목록, table
> 부모 태그의 크기
> 상하좌우 마진 가능, 상하 마진 다른 div와 겹칠 수 있음
> 크기 조정 가능 💨
인라인 형식: span, a, input, 글자 형식, 입력 양식
> 상하 마진 불가
> 좌우 마진 가능! (부모 기준)
> 조정 불가능 💫
인라인-블록 형식: img

시맨틱 태그(semantic): 웹 페이지의 태그에 의미를 부여하는 태그

header	머리말(페이지 제목, 페이지 소개)
nav (메뉴)	하이퍼링크들을 모아 둔 내비게이션
aside	본문 흐름에 벗어나는 노트나 팁
section	문서의 장이나 절에 해당하는 내용
article	본문과 독립적인 콘텐츠 영역
footer	꼬리말(저자나 저작권 정보)

주로 layout을 잡는 데에 사용!
그냥 의미만 있는 태그. 구조를 잡는 것.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <header>
      <h1>HTML5 기본</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">메뉴 - 1</a></li>
        <li><a href="#">메뉴 - 2</a></li>
        <li><a href="#">메뉴 - 3</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <h1>Lorem ipsum dolor sit amet!</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </article>
    </section>
    <footer>
      <span>서울시.. 졸립구 배고프동</span>
    </footer>
  </body>
</html>

실행 결과

HTML5 기본

Lorem ipsum dolor sit amet!

Lorem ipsum dolor sit amet.

저작자표시

'Web > html' 카테고리의 다른 글

[WEB][HTML5] 입력 양식 태그 (0)	2025.03.06

[WEB][HTML5] 구조화 태그

공간 분할 태그

HTML5 기본

Lorem ipsum dolor sit amet!

'Web > html' 카테고리의 다른 글

티스토리툴바