여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 컨테이너
w3.css – 컨테이너
4개월전 작성
5개월전 수정

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>
기본 예시

The w3-container class is an important w3.CSS class.

 

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

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

London is the capital city of England.

머리글과 바닥글

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>
기본 예시
London

London is the most populous city in the United Kingdom,
with a metropolitan area of over 9 million inhabitants.

Paris

The Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.

Tokyo

Tokyo is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.

⭐ 많은 웹페이지에서는 <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>
참고
Mingg`s Diary
밍구
공부 목적 블로그