CSS div, span차이점

CSS에서 `<div>`와 `<span>`은 둘 다 웹 페이지의 레이아웃 및 스타일링을 위한 중요한 HTML 요소입니다. 그러나 각각의 역할과 사용법에 차이가 있습니다.

 

1. `<div>` 요소:
   - `<div>`는 "division"을 나타내며, 블록 수준 요소입니다. 이것은 다른 요소들을 그룹화하고 레이아웃을 구성하는 데 주로 사용됩니다.
   - `<div>` 요소는 새로운 블록 레벨 컨테이너를 만들며, 자체적으로 줄 바꿈이 되기 때문에 수직으로 쌓이는 레이아웃을 만들 때 유용합니다.
   - `<div>`는 주로 큰 영역을 나누거나 섹션을 만들 때 사용하며, 주로 다른 블록 수준 요소(예: 헤딩, 문단, 리스트)를 포함하거나 그룹화하는 용도로 활용됩니다.



<div class="container">
  <h1>Main Title</h1>
  <p>Some text content here.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

 

2. `<span>` 요소:
   - `<span>`은 "span"을 나타내며, 인라인 요소입니다. 이것은 텍스트 또는 텍스트 내의 일부 내용을 선택적으로 스타일링하거나 그룹화하는 데 사용됩니다.
   - `<span>`은 텍스트의 일부분에 스타일을 적용하고 CSS를 통해 스타일을 지정할 수 있습니다. 예를 들어, 글자 색상, 글꼴 크기, 배경색 등을 변경하는 데 사용됩니다.
   - 주로 텍스트 내에서 스타일링이 필요한 작은 부분을 감싸는 용도로 사용됩니다.

예제:


<p>This is a <span style="color: red;">red</span> word in a sentence.</p>


추가적으로, CSS를 사용하여 `<div>`와 `<span>`을 스타일링할 수 있으며, 클래스 및 ID를 활용하여 특정 요소를 선택하여 스타일을 적용할 수 있습니다. 이러한 요소들은 웹 페이지의 레이아웃 및 디자인을 제어하는 데 중요한 역할을 합니다.