여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. How To - W3.CSS 프레임워크로 웹사이트 구축

How To – W3.CSS 프레임워크로 웹사이트 구축

3주전 작성

w3.css

W3.CSS 프레임워크로 웹사이트 구축

모든 기기(PC, 노트북, 태블릿, 휴대폰)에서 작동하는 빠르고 반응형 웹사이트를 만드는 방법을 알아보자.

레이아웃 초안

웹사이트를 만들기 전에 페이지 디자인의 레이아웃 초안을 그려보는 것이 좋다.

“레이아웃 초안”이 있으면 웹 사이트를 만드는 것이 훨씬 쉬워진다.

Doctype, 메타 태그 및 CSS

doctype은 페이지를 HTML5 문서로 정의해야 한다.
<!DOCTYPE html>
메타 태그는 문자 집합을 UTF-8로 정의해야 한다.
<meta charset="UTF-8">
뷰포트 메타 태그는 웹 사이트가 모든 기기와 화면 해상도에서 작동하도록 해야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1">
W3.CSS는 모든 스타일링 요구 사항과 모든 장치 및 브라우저 차이점을 처리해야 한다.
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
첫 번째 빈 웹 페이지는 다음과 같다.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/3/w3.css">
<body>

<!-- Content will go here -->

</body>
</html>

페이지 콘텐츠 생성

우리 웹사이트의 <body> 요소 내부에서 “레이아웃 그림”을 사용하여 다음을 생성한다.

  • 탐색 바
  • 슬라이드 쇼
  • 헤더
  • 일부 섹션 및 기사
  • 바닥글

의미적 요소

HTML5는 여러 가지 새로운 의미적 요소를 도입했다.
의미적 요소는 웹 페이지의 구조를 정의하고 화면 판독기와 검색 엔진이 페이지를 올바르게 읽는 데 도움이 되기 때문에 사용하는 것이 중요하다.

가장 일반적인 의미적 HTML 요소는 다음과 같다.

<section> 요소 는 관련 콘텐츠가 있는 웹사이트의 부분을 정의하는 데 사용할 수 있다.

<article> 요소 는 개별 콘텐츠를 정의하는 데 사용할 수 있다.

<header> 요소 는 헤더(문서, 섹션 또는 기사)를 정의하는 데 사용할 수 있다.

<footer> 요소 는 바닥글(문서, 섹션 또는 기사)을 정의하는 데 사용할 수 있다.

<nav> 요소 는 탐색 링크 컨테이너를 정의하는 데 사용할 수 있다.

탐색 바

“레이아웃 초안”에는 “탐색 모음”이 있다.

예제
<!-- Navigation -->
<nav class="w3-bar w3-black">
  <a href="#home" class="w3-button w3-bar-item">Home</a>
  <a href="#band" class="w3-button w3-bar-item">Band</a>
  <a href="#tour" class="w3-button w3-bar-item">Tour</a>
  <a href="#contact" class="w3-button w3-bar-item">Contact</a>
</nav>
기본 예시
예제 보기

 

<nav> 또는 <div> 요소를 탐색 링크의 컨테이너로 사용할 수 있다.

w3-bar 클래스는 탐색 링크를 위한 컨테이너다.

w3-black 클래스는 탐색 모음의 색상을 정의한다.

w3-bar-item과 w3-button 클래스는 바 내부의 탐색 링크 스타일을 지정한다.

슬라이드 쇼

“레이아웃 초안”에는 “슬라이드 쇼”가 있다.

슬라이드 쇼의 경우 <section> 또는 <div> 요소를 그림 컨테이너로 사용할 수 있다.

예제
<!-- Slide Show -->
<section>
  <img class="mySlides" src="img_la.jpg" style="width:100%">
  <img class="mySlides" src="img_ny.jpg" style="width:100%">
  <img class="mySlides" src="img_chicago.jpg" style="width:100%">
</section>
기본 예시
예제 보기

 

3초마다 이미지를 변경하려면 약간의 JavaScript를 추가해야 한다.

// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}
  x[myIndex-1].style.display = "block";
  setTimeout(carousel, 3000);
}
기본 예시
예제 보기

섹션 및 기사

“레이아웃 초안”을 살펴보면 다음 단계는 기사를 만드는 것임을 알 수 있다.

먼저 밴드 정보를 포함하는 <section> 또는 <div> 요소를 만든다.

예제
<section class="w3-container w3-center" style="max-width:600px">
  <h2 class="w3-wide">THE BAND</h2>
  <p class="w3-opacity"><i>We love music</i></p>
</section>
기본 예시
예제 보기

 

w3-container 클래스는 표준 패딩을 처리한다.

w3-center 클래스는 콘텐츠를 중앙에 배치한다.

w3-wide 클래스는 더 넓은 제목을 제공한다.

w3-opacity 클래스는 텍스트 투명도를 제공한다.

max-width 스타일은 밴드 설명 섹션의 최대 너비를 설정한다.

그런 다음 밴드를 설명하는 문단을 추가한다.

<section class="w3-container w3-content w3-center" style="max-width:600px">
<p class="w3-justify">
We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
기본 예시
예제 보기

 

w3-justify 클래스는 텍스트의 오른쪽과 왼쪽 여백을 정렬한다.

그런 다음 각 밴드 멤버에 대한 <article> 또는 <div>가 있는 <section> 또는 <div>를 만든다.

 

<section class="w3-row-padding w3-center w3-light-grey">
  <article class="w3-third">
    <p>John</p>
    <img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
  </article>
  <article class="w3-third">
    <p>Paul</p>
    <img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
  </article>
  <article class="w3-third">
    <p>Ringo</p>
    <img src="img_bandmember.jpg" alt="Random Name" style="width:100%">
  </article>
</section>
기본 예시
예제 보기

바닥글

마지막으로 <footer> 또는 <div>를 사용하여 바닥글을 만든다.

예제
<!-- Footer -->
<footer class="w3-container w3-padding-64 w3-center w3-black w3-xlarge">
  <a href="#"><i class="fa fa-facebook-official"></i></a>
  <a href="#"><i class="fa fa-pinterest-p"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-flickr"></i></a>
  <a href="#"><i class="fa fa-linkedin"></i></a>
  <p class="w3-medium">
    Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a>
  </p>
</footer>
기본 예시
예제 보기

 

fa fa 클래스는 Font Awesome 아이콘 클래스다.

이러한 클래스를 사용하려면 Font Awesome 라이브러리에 링크해야 한다.

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
참고
Mingg`s Diary
밍구
밍구
공부 목적 블로그