W3.CSS 사례 연구
처음부터 반응형 웹 사이트 구축
이 장에서는 처음부터 W3.CSS 반응형 웹사이트를 구축할 것입니다.
먼저 초기 뷰포트와 W3.CSS에 대한 링크가 있는 간단한 HTML 페이지로 시작합니다.
예시
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
컨테이너에 요소 넣기
공통 여백과 패딩을 추가하려면 HTML 요소를 컨테이너(<div class="w3-container">) 안에 넣습니다.
두 개의 개별 <div> 요소를 사용하여 헤더를 나머지 콘텐츠와 분리합니다.
예시
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
색상 클래스
색상 클래스는 요소의 색상을 정의합니다.
이 예에서는 첫 번째 <div> 요소에 색상을 추가합니다.
예시
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
크기 등급
크기 클래스는 요소의 텍스트 크기를 정의합니다.
이 예에서는 두 헤더 요소에 크기를 추가합니다.
예시
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
시맨틱 요소 사용
HTML5 의미론적 권장 사항을 따르고 싶다면. 제발!
<div>나 <header>를 사용하면 W3.CSS는 상관없습니다.
예시
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
다중 열 반응형 레이아웃
W3.CSS를 사용하면 여러 열로 구성된 반응형 레이아웃을 쉽게 만들 수 있습니다.
열은 다른 화면 크기에서 볼 때 자동으로 재정렬됩니다.
일부 그리드 규칙:
- 행 클래스 <div class="w3-row-padding">로 시작
- 그리드 열을 빠르게 만들기 위해 "w3-third"와 같은 미리 정의된 클래스를 사용합니다.
- 그리드 열 안에 텍스트 콘텐츠 배치
이 예에서는 너비가 동일한 세 개의 열을 만드는 방법을 보여줍니다.
예시
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
이 예에서는 너비가 동일한 4개의 열을 만드는 방법을 보여줍니다.
예시
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
너비가 다른 열
이 예에서는 가운데 열이 첫 번째 및 마지막 열보다 넓은 3열 레이아웃을 만듭니다.
예시
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
탐색 모음
탐색 모음은 페이지 상단에 배치되는 탐색 헤더입니다.
예시
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
페이지 탐색
측면 탐색에는 다음과 같은 몇 가지 옵션이 있습니다.
- 항상 페이지 콘텐츠 왼쪽에 탐색 창을 표시합니다.
- 접을 수 있는 "완전 자동" 반응형 측면 탐색을 사용합니다.
- 페이지 콘텐츠의 왼쪽 부분에 탐색 창을 엽니다.
- 모든 페이지 콘텐츠에 대한 탐색 창을 엽니다.
- 탐색 창을 열 때 페이지 콘텐츠를 오른쪽으로 밉니다.
- 왼쪽 대신 오른쪽에 탐색 창 표시
이 예에서는 페이지 콘텐츠의 왼쪽 부분에 탐색 창을 엽니다.
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
메뉴를 열고 숨기는 데 사용되는 JavaScript:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}