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>
컨테이너 패딩
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>