🌎 Web/HTML

[HTML] HTML에서 공간을 나누는 요소들

오늘 ONEUL 2022. 3. 16. 00:53

블록(block)과 인라인(inline)

HTML에는 2가지의 display 속성이 있다.

  1. 블록(block)
  2. 인라인(inline)

 

블록(block) 타입의 요소

언제나 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다.

ex) <div>, <p>, <h>

 

인라인(inline) 타입의 요소

새로운 라인에서 시작하지 않고, 해당 내용(content)만큼만 차지한다.

ex) <span>, <a>, <img>

 

<div> 요소

영역을 분리하여 담아주는 컨테이너 역할의 태그

 

<span> 요소

텍스트의 특정 부분을 컨트롤하기 위한 태그

 

 

 

레이아웃(Layout)과 시멘틱(Semantic)

<div class="header">Header 영역</div>

<div class="nav">Nav 영역</div>

<div class="section">Section 영역</div>

<div class="footer">Footer 영역</div>

<div> 태그에 class값을 부여해서 레이아웃을 작성할 수도 있지만, HTML5에는 레이아웃만을 위한 의미론적(semantic) 요소들이 있다.

 

 

의미 요소설명
<header> HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함.
<nav> HTML 문서의 탐색 링크를 정의함.
<section> HTML 문서에서 섹션(section) 부분을 정의함.
<article> HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함.
<aside> HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. 
<footer> HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함.

 

 

 

iframe 요소

  • iframe이란 inline frame의 약자이다.
  • 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.
  • 브라우저가 중첩되서 사용되기 때문에 많이 사용할수록 리소스 사용이 증가한다.

 

 

 

 

※ 참고자료

http://www.tcpschool.com/html/intro

https://www.w3schools.com/html/default.asp

 

저작자표시