HTML - 컨테이너 요소

HTML의 컨테이너 요소는 레이아웃을 구성하고 스타일이나 스크립트를 적용하기 위해 그룹화하기 위해 사용하는 요소이다.

 

<div> : division 아무런 의미를 갖고 있지 않는 태그다. 블록 레벨 요소를 가지고 레이아웃을 나누는 데 사용된다.

<span> : div와 동일하게 아무런 의미를 갖지 않는 태그다. 인라인 레벨 요소를 가지고 텍스트나 다른 인라인 요소를 꾸미기 위해 사용한다.

 

<h2>블록 컨테이너 요소</h2>
    <div style="background-color: aqua">
      <p>div는 블럭 레벨 요소로 레이아웃을 나누기 위해 사용합니다.</p>
    </div>
    <div style="background-color: lightcoral">
      <p>예제에서는 두개로 나눠진 레이아웃을 확인 할 수 있습니다.</p>
    </div>

<h2>인라인 컨테이너 요소</h2>
    <div>
      <span style="color: red">AI 코딩도구</span>
      <span style="color: blue">윈드 서퍼</span>
      <span style="color: green">커서</span>
      <span style="color: violet">코파일럿</span>
    </div>

<section>, <article>, <aside>, <nav>, <header>, <footer>, <main>도 컨테이너 요소로 사용한다. 블록 레벨 요소로 동작하며 <div>와 다른 점은 의미를 가지고 있기 때문에 구조적인 HTML문서를 작성할 수 있다.