Chapter 1-8. 컨테이너와 전역 속성

📌 1. HTML 컨테이너 요소

컨테이너는 여러 요소를 묶어주는 역할을 하며, 콘텐츠나 레이아웃에 직접적인 영향을 미치지 않고, 다른 요소들을 편리하게 관리하는 데 사용됩니다.

🔹 컨테이너의 주요 역할

• 여러 요소를 묶어 그룹화합니다.
• 공통 스타일을 적용하는 데 유용합니다.
• 콘텐츠를 구분하거나, 페이지 레이아웃을 정의할 때 사용됩니다.

✅ 컨테이너 태그 예시

1. <div> 태그: 블록 레벨 컨테이너
   • 다른 블록 요소를 감싸는 데 사용됩니다. 화면에서 새로운 줄로 시작하고 전체 너비를 차지합니다.
2. <span> 태그: 인라인 컨테이너
   • 텍스트나 다른 인라인 요소들을 감싸는 데 사용됩니다. 한 줄에서 연속적으로 나열됩니다.

🔸 <div>와 <span> 비교

• <div>: 블록 레벨로 전체 너비를 차지하고, 다른 블록 요소와 수직으로 나열됩니다.
• <span>: 인라인으로 콘텐츠와 같은 줄에서 나열됩니다.

✅ 예시

<div>
  <h1>헤드라인 제목</h1>
  <p>본문 내용이 들어갑니다.</p>
</div>

<span>이것은 텍스트 안에 포함된 인라인 요소입니다.</span>

---

📌 2. HTML 전역 속성

전역 속성은 모든 HTML 태그에서 공통적으로 사용할 수 있는 속성입니다. 이를 사용하면 HTML 요소에 기능을 추가하거나 스타일을 조정하는 데 유용합니다.

🔹 주요 전역 속성

1. id: HTML 요소에 고유한 이름을 부여하여 식별합니다.
   • 예: id="header"
2. class: 여러 요소를 그룹화하여 공통 스타일을 적용할 수 있도록 합니다.
   • 예: class="button"
3. style: 해당 요소에 직접 CSS 스타일을 적용합니다.
   • 예: style="color: red;"
4. title: 요소에 대한 추가 정보를 제공하는 속성입니다. 보통 툴팁 형태로 나타납니다.
   • 예: title="이것은 툴팁입니다"

✅ 전역 속성 사용 예시

<div id="main-content" class="content-box" style="background-color: lightgrey;" title="메인 콘텐츠">
  이 곳은 메인 콘텐츠 영역입니다.
</div>

• id, class, style, title 속성은 모든 HTML 태그에서 공통적으로 사용할 수 있습니다.

---

📊 시각화: 컨테이너와 전역 속성

🔹 컨테이너 예시

• div 태그는 여러 요소를 블록 레벨로 묶어서 배치합니다. 이를 통해 각 콘텐츠를 구분할 수 있습니다.
• span 태그는 인라인 요소들을 묶는 데 사용됩니다.

🔹 전역 속성 예시

전역 속성은 HTML 태그에 직접적으로 스타일을 적용하거나, 추가적인 정보를 제공하는 데 사용됩니다. 이를 통해 코드의 효율성을 높이고, 페이지 내의 요소들을 쉽게 관리할 수 있습니다.

---

🚩 결론

• 컨테이너 요소는 웹 페이지 내에서 여러 요소를 묶고 관리하는 데 중요한 역할을 합니다. div와 span 태그를 사용하여 블록 레벨 및 인라인 요소들을 그룹화할 수 있습니다.
• 전역 속성은 HTML 태그에 공통적으로 사용할 수 있는 속성으로, 페이지의 디자인과 동작을 개선하는 데 매우 유용합니다. id, class, style, title 속성 등을 적절히 활용하여 HTML 요소를 더욱 효율적으로 관리하세요.

이제 컨테이너와 전역 속성의 개념을 바탕으로, HTML 문서 구조와 요소들을 보다 잘 관리하고 활용할 수 있을 것입니다!