w3.css

컨테이너

컨테이너 클래스

w3 -container 클래스는 HTML 요소에 16px 왼쪽 및 오른쪽 패딩을 추가한다.

w3 -container 클래스는 다음과 같은 모든 HTML 컨테이너 요소에 사용하기에 완벽한 클래스다.

<div>, <article>, <section>, <header>, <footer>, <form> 등.

컨테이너 동일성

w3-container는 모든 HTML 컨테이너 요소에 대한 동일성을 제공한다.

• 공통 여백
• 일반적인 패딩
• 공통 정렬
• 일반적인 글꼴
• 일반적인 색상

 

컨테이너를 사용하려면 요소에 w3-container 클래스를 추가하기만 하면 된다.

예제

<div class="w3-container">
  <p>The w3-container class is an important w3.CSS class.</p>
</div>

 

색상을 추가하려면 w3-color 클래스를 추가하자.

예제

<div class="w3-container w3-red">
  <p>London is the capital city of England.</p>
</div>

머리글과 바닥글

w3-container 클래스는 헤더 스타일을 지정하는 데 사용할 수 있다.

예제

<div class="w3-container w3-teal">
  <h1>Header</h1>
</div>

예제

<header class="w3-container w3-teal">
  <h1>Header</h1>
</header>

 

⭐ W3.CSS에서 <div> 및 <header> 요소를 처리하는 방식에는 차이가 없다.

w3-container 클래스는 바닥글 스타일을 지정하는 데 사용할 수 있다.

예제

<div class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</div>

예제

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</footer>

⭐ 많은 웹페이지에서는 <header> 및 <footer> 요소 대신 <div> 요소를 사용한다.

아티클 및 섹션

w3-container 클래스는 <article> 및 <section> 요소의 스타일을 지정하는 데 사용할 수 있다.

예제

<div class="w3-container">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<article class="w3-container">
  <h2>Paris</h2>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 2 million inhabitants.</p>
</article>

<section class="w3-container">
  <h2>Tokyo</h2>
  <p>Tokyo is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</section>

⭐ 많은 웹페이지에서는 <article> 및 <section> 요소 대신 <div> 요소를 사용한다.

웹페이지 예

자동차는 운송에 사용되는 바퀴가 달린 자체 동력 자동차입니다. 대부분의 용어 정의에서는 자동차가 주로 도로에서 주행하도록 설계되었다고 명시합니다. (위키피디아)

HTML <div> 요소를 사용한 예

<div class="w3-container w3-red">
  <h1>Header</h1>
</div>

<img src="img_car.jpg" alt="Car" style="width:100%">

<div class="w3-container">
  <p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>

<div class="w3-container w3-red">
  <h5>Footer</h5>
</div>

HTML 의미 요소를 사용한 예

<header class="w3-container w3-teal">
  <h1>Header</h1>
</header>

<img src="img_car.jpg" alt="Car" style="width:100%">

<article class="w3-container">
  <p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
</footer>

컨테이너 패딩

w3-container 클래스에는 기본 16px 왼쪽 및 오른쪽 패딩이 있으며 상단 또는 하단 패딩은 없다.

예제

<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>

 

일반적으로 단락과 제목은 여백을 시뮬레이션하는 여백을 제공하므로 컨테이너의 기본 여백을 변경할 필요가 없다.

예제

<div class="w3-container w3-blue">
  <h1>I am a Heading</h1>
  <p>I am a paragraph.</p>
</div>