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";
}
기본 예시
예제 보기참고
W3C School - W3.CSS Case Study
공부 목적 블로그