요기보드

필수 기초과목

W3CSS

메인페이지와 메인 메뉴

▶ 학습용 페이지 만들기

w3css 역시 가장 쉽게 배우는 방법은 예제 페이지를 직접 만들어서 내 눈으로 확인하는 거야.
우리는 학습용 예제로 차후 '요기보드' 기본형태의 페이지를 html 과 w3css 로 만들어 볼거야.
아래 그림을 보면 상단에 주메뉴가 있고, 좌측에는 서브메뉴 그리고 우측에는 게시판글이 테이블 형태로 보여지는 아주 고전적인 홈페이지 스타일이야.
(일단 디자인은 보지 말고 기능만 눈여겨 봐 줬으면 좋겠어..)

단순한 한 장짜리 웹페이지 화면이지만 웹 초보자는 쉽게 만들 수 없는 기능들이 숨어 있어.
우선 페이지가 길어져서 아래쪽을 보기 위해 스크롤을 내려도 상단의 주메뉴는 그대로 항상 화면상단에 붙어 있게 돼.
또 브라우저의 가로 크기를 마우스로 확 줄여서 스마트폰 크기로 한 번 줄여봐.

상단 메뉴가 없어지면서 상단 우측에 [메뉴] 버튼 속으로 숨어 버리게 되는 것을 볼 수 있어.
우측의 [메뉴]를 클릭하면 원래 상단에 있던 메뉴들이 드롭다운 형식으로 보이게 돼.
(즉 스마트폰에서 볼때는 가로여백이 충분하지 않기 때문에 메뉴버튼을 클릭해서 선택하도록 한거지)
요즘 웹페이지에서 많이 보는 형식이지?
이것을 Html, CSS 방금 막 끝낸 내가 하려면 정말 어려운 일이야.
그런데 W3CSS 를 사용하면 뚝딱 만들 수 있어.

1. 에디터에서 w3css.html 이라는 새 파일을 만들고 아래 내용을 입력해서 저장해.

직접 입력하는게 공부에는 제일 좋겠지만 아무래도 오타가 많이 날테니, 아래 내용 긁어 복사해서 에디터에 붙여 넣는게 편할거야.
(아래 소스창에 마우스를 올리면 우측 상단에 Copy 라는 버튼이 보일거야.. 그거 클릭하면 복사된거야. 에디터 창으로 가서 Ctrl-V 로 붙여넣기를 하면 쉽게 복사할 수 있겠지?)


<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>내홈피</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<!-- PC, 타블렛용 메뉴 -->
<div class="w3-top">
  <div class="w3-bar w3-black">
    <div style="max-width:1200px; margin:auto;">
    <a class="w3-bar-item w3-button w3-padding-large w3-hide-medium w3-hide-large w3-right" onclick="menuToggle()">메뉴</a>
    <a class="w3-bar-item w3-button w3-padding-small w3-xlarge" href="/">내홈피  </a>
    <a class="w3-bar-item w3-button w3-padding-large w3-hide-small" href="#intro.php">홈피소개</a>
    <a class="w3-bar-item w3-button w3-padding-large w3-hide-small" href="#help.php">게시판</a>
    </div>
  </div>
</div>
<!-- 스마트폰용 메뉴 -->
<div id="mobileMenu" class="w3-top w3-bar-block w3-dark-gray w3-hide w3-hide-large w3-hide-medium" style="margin-top:46px">
  <a href="#intro.php" class="w3-bar-item w3-button" onclick="menuToggle()">홈피소개</a>
  <a href="#help.php"  class="w3-bar-item w3-button" onclick="menuToggle()">게시판</a>
</div>
<!-- 본문 시작 -->
<div class="w3-container w3-content w3-center w3-padding-64 w3-border w3-white" style="max-width:1200px; min-height:1000px">
    <H1>즐거운 우리집</H1>
</div>
<script>
// 모바일 화면에서 메뉴토글 작동 스크립트
function menuToggle() {
  var x = document.getElementById("mobileMenu");
  if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show", "");
  }
}
</script>
</body>
</html>

2. 브라우저에서 이 파일을 열어 봐.

보통 윈도우 탐색기에서 저장된 파일을 찾아서 마우스로 드래그 해서 브라우저 안에 떨어 뜨리면 될거야.
그대로 따라했으면 아래 링크와 같은 화면이 나올거야.
http://yogibbs.kr/w3cssDemo/w3css.html

단순히 복사해서 만든 웹페이지이지만 꽤 멋진 페이지가 완성되었어.
화면에 메뉴가 잘 표시되면 마우스로 브라우저의 가로 크기를 확 줄여봐.
브라우저의 가로 사이즈가 스마트폰 정도가 되면 상단 메뉴가 사라지고 대신 [메뉴]라는 새 메뉴가 생기는 것을 볼 수 있어

또 아래쪽으로 스크롤을 했을 때 상단의 메뉴바는 따라 올라가지 않고 제자리에 고정 되는 것을 볼 수 있어.

이제 어떻게 해서 이런 작동이 가능한지 몇가지만 살펴볼까?

▶ link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"

이 라인은 w3.css 파일을 내 홈페이지에 있는 파일이 아니고 w3schools.com 사이트 직접 끌어다 사용했어.
이처럼 남의 사이트에 등록된 css 파일을 가져다 쓰는 방법도 있는데 이러한 것을 CDN (Content Delivery Network)라고 불러.
예전에는 CSS 파일도 꼭 내 서버에 저장해서 사용했는데 최근에는 이처럼 다른 서버에 있는 파일을 연결해 사용하는게 더 일반적이야.
이렇게 하면 내 서버에 몰리는 부하를 조금이나마 분산을 시킬 수 있기 때문이지.
또 이렇게 유명한 css 자바스크립트 js 파일을 CDN 으로 제공하는 사이트도 많기 때문에 만일 위 사이트에 문제가 생긴다면 다른 CDN 사이트를 사용해도 똑같아.
w3schools.com 사이트는 워낙 유명한 사이트여서 이곳에 트래픽이 몰릴 때는 가끔 내 사이트까지 덩달아 느려질 수가 있는데 이럴 때는 w3.css 는 아래 CDN 사이트로 연결해서 사용해도 좋아.


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/w3-css/4.1.0/w3.css">

이밖에도 찾으면 많은 CDN 사이트가 있어.
그리고 물론 이 w3.css 를 다운 받아서 내 사이트의 폴더에 저장해 두고 연결해도 똑같아.
만약 여러분이 w3.css 의 내용을 입맛에 맞게 조금 변경해 사용한다면, 여러분의 서버에 다운 받아 수정하고 연결을 하면 되겠지?

위 소스에서 나온 w3css 의 주요 클래스의 역할과 기능을 소개해 볼께/
내 설명이 이해가 잘 되지 않으면 ▶ 클래스명 을 클릭하면 자세한 설명과 예제를 볼 수 있는 페이지로 이동할거야.

▶ w3-top

w3-top 은 메뉴나 div의 위치를 상단에 고정시키는 역할을 하는 클래스야.
이렇게 지정하면 페이지에 내용이 많아 아래쪽을 보려고 스크롤을 해도 상단메뉴는 항상 제자리에 있게 되는거지.
w3-top 이 있다면 w3-bottom 도 있지 않을까?
맞아. w3-bottom 은 화면 맨 아래에 고정 메뉴바나 꼬리말을 항상 보이게 만들고 싶을 때 사용하면 돼.

▶ w3-bar

w3-bar 클래스는 가로폭 100%의 막대 형태의 디자인을 표현할 때 사용 돼.
특히 w3-bar-item 클래스와 함께 사용해서 메뉴바를 표현할 때 아주 유용하게 사용할 수 있어.
w3-bar 는 메뉴바를, w3-bar-item 은 각각의 메뉴에 안성맞춤이야.

▶ w3-색상명

w3css 는 요소의 색상을 기본 30개의 색상 이름 클래스로 제공해
w3-black 은 당연히 검정색이고, w3-blue, w3-red, w3-indigo, w3-lime ...등 (기본색상은 위 제목을 클릭해 보도록해)
이 'w3-색상명' 은 요소의 배경색이고, 글자색상을 클래스로 지정하려면 'w3-text-색상명' 으로 사용하면 돼.(예: w3-text-red)
또 'w3-border-색상명' 에 사용할 수도 있어. div 의 테두리 색상을 정할 때는 이렇게 해.
이 기본색상은 여러분이 얼마든지 변경할 수 있어.
예를들어 w3-red 의 기본색상은 #f44336 인데 이것을 #ff0040 로 표현하고 싶다면 여러분의 style.css 에 아래와 같이 w3-red 클래스를 추가해.


.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#ff0040!important}

그러면 같은 이름이니 소스의 뒤쪽에서 읽은 style.css 의 속성 값이 앞 w3css의 속성을 덮어 쓰게 되니 앞으로 w3-red 는 #ff0040 으로 표현되겠지?
또 w3css 에서는 '추가 색상 라이브러리'를 제공하고 있으니 디자인과 색상에 관심 많은 디자이너는 이것을 사용하는 것도 좋은 방법이야.

▶ w3-button

a링크를 버튼 처럼 표현할 때 유용한 클래스로 마우스가 올라가면 색상이 살짝 바뀌어서 버튼의 효과를 가지게 돼.
위 메뉴에서 w3-bar w3-bar-item w3-button 3개를 사용해서 완벽한 메뉴의 느낌을 살렸어.

▶ w3-hide-small w3-hide-medium w3-hide-large

w3css 에서는 화면의 가로사이즈를 601px 보다 작으면 small, 992px 보다 크면 large, 중간은 medium 으로 생각해.
이 구분은 대략 스마트폰, 태블릿, pc 화면의 크기와 비슷해.
그래서 위 클래스들은 다음과 같이 작동해.

w3-hide-small	가로 601px 보다 작은 스마트폰에서는 감춰라.
w3-hide-medium	가로가 601~992px 사이의 태블릿에서는 감춰라.
w3-hide-large	가로 992px 이 넘는 모니터에서는 감춰라

실제 위 데모 페이지를 볼 때 브라우저 가로 크기를 마우스로 확 줄이면 상단의 [홈피소개] [게시판]이라는 메뉴가 없어지지?
이 두 메뉴의 클래스를 보면 w3-hide-small 을 적용했기 때문이야.
또 반대로 상단 우측에 있는 [메뉴]라는 버튼은 w3-hide-medium w3-hide-large 클래스가 적용되어 있기 때문에 처음에는 안보이다 가로사이즈가 601px 이하가 되면 그때 나타나게 되어 있어.

위 소스를 보면 상단 메뉴가 두 개로 이루어져 있어.
주석으로  부분이 있고, 아래에 
즉 큰화면의 메뉴와 작은화면에서 보여줄 메뉴 2개인거지.
이것을 w3-hide-large w3-hide-medium, w3-hide-small 세개의 옵션을 적절하게 사용해서 가로가 큰 화면에서는 아래쪽 메뉴를 감추고, 또 작은화면에서는 위쪽 큰 메뉴바에서 [홈피소개] [게시판] 메뉴명을 감추는 방식으로 화면 크기에 따라 자동 토글되게 하였어.
이게 바로 반응형웹의 한 특징이라고 할 수 있어.

▶ w3-padding w3-margin

padding, margin 에 대해서는 이미 여러분들도 잘 알고 있을 거야. w3css 에서는 일반적으로 많이 사용하는 padding 간격을 여러가지 이름으로 미리 설정해 두었으니 이것을 잘 이용하면 요소들의 간격을 쉽게 조정하고 사용할 수 있어.

▶ w3-display

w3css 에는 글자나 요소의 위치를 제어하는 클래스들도 다수 지원하고 있어. w3-left 는 float:left 와 같은 효과를, 또 w3-right는 float:right 와 같은 효과를 표현해. 이밖에도 w3-show(보이기) w3-hide(감추기) 도 있고, 'w3-display-위치' 클래스명을 사용해서 div 안에서 글자들의 위치를 모퉁이나 한가운데 위치하도록 할 수도 있어.

▶ onclick="menuToggle()"

마지막의 onclick="menuToggle()" 은 자바스크립을 실행하라는 명령으로 이건 w3css 가 아니야.
웹페이지에서 클릭을 했을 때 어떤 동작을 하게 하려면 '자바스크립트'가 필요해.

지금 우리 예제에서 menuToggle() 을 작동시키는 자바스크립은 위 소스 맨 아래쪽의 사이에 있어.
봐도 무슨 말인지 모르겠지?
당연해.. 그리고 걱정마.
간단히 설명하면 화면을 스마트폰 크기로 줄여서 [메뉴]가 보일때 이것을 클릭하면 스마트폰용 메뉴를 보였다, 감췄다 하는 역할을 하는 기능이야.

그런데 이 자바스크립은 지금까지 배운 Html/CSS 보다 훨씬 더 어려워.
이것까지 배우고 나면 여러분도 진짜 프로가 되는거지.
그럼 자바스크립 없으면 영영 좋은 웹사이트를 못 만들까?
아냐, 지금처럼 다른 사람이 만든 사이트에서 소스보기를 통해서 만들어 둔 소스를 복사해서 붙이면 돼.
뭐 지금 배우고 있는 w3css 도 복사해서 사용하고 있잖아.
또 w3css 처럼 아주 자주 사용하는 스크립트의 라이브러리 모음집들도 많이 있어.
초보들은 모두 그렇게 배우면서 실력을 키워 가는 거야.
그리고 계속 읽어 가다 보면 [선택과목-자바스크립트] 강의가 있어. 기대해

"그런데 이렇게 대충 얼렁뚱땅 설명해서 되겠어?" 하는 분들도 있을거야.
걱정마. 나중에 w3css 의 모든 속성을 하나하나 아주 상세하게 알려 줄거야.
지금은 여러분이 쉽게 이해하고 적응하도록 하는게 목표이기 때문에 이렇게 설명하는거야.
계속 읽어 보자구..

목차	제 목	조회
1	반응형 웹 (Responsive Web)	93
2	Bootstrap 과 W3CSS	324
3	메인페이지와 메인 메뉴	397
4	다단 페이지 (Grid) 와 레이아웃	194
5	사이드바	165
6	테이블 (w3-table)	152
7	색상(w3-Color)	139
8	w3css 클래스 요약정리	135
9	그밖에 W3CSS의 모든 것	158