요기보드3   필수기초 선택과목 요기보드 그누보드 로그인

W3CSS


사이드바

사이드바는 주로 상단의 주메뉴를 선택했을때, 해당 주메뉴에 대한 부메뉴를 보여 주는게 홈페이지에서 가장 일반적인 레이아웃이야.
이번에는 사이드바를 w3css를 이용해서 예쁘게 꾸며 보자구..

예를들어 우리 연습용 홈페이지의 상단 메뉴의 [게시판]을 선택하면 아래 그림과 같은 형태의 부메뉴가 사이드바에 나타나게 한다고 가정해 보자구.

사이드바
위 사이드바는 아래와 같은 소스로 만들 수 있어.


    <div class="w3-card w3-bar-block w3-round w3-left-aling">
      <div class="w3-center w3-dark-gray w3-padding-16 w3-round">게 시 판</div>
      <a href="#" class="w3-bar-item w3-button w3-border-bottom">자유게시판</a>
      <a href="#" class="w3-bar-item w3-button w3-border-bottom">질문과 답</a>
    </div>

위 소스를 바로 전 장 [다단페이지(Grid)] 의 [<p>폰12칸,태블릿4칸,PC 3칸</p>] 자리에 대신 넣으면 화면 좌측의 부메뉴 자리에 들어가겠지?

이 상태에서 전장에서 마지막으로 했던 3단 짜리 이미지를 본문 쪽으로 옮기고, 윤곽을 보여주던 w3-border 을 빼면 아래 링크의 화면 처럼 깔끔하게 보이게 될거야.
여기서 다시 브라우저의 가로폭을 조절해 가면서 어떻게 보이는지 테스트해 보도록 해.
http://yogibbs.kr/w3cssDemo/w3SideBar.html

새로 나온 클래스에 대해서 간단하게 설명을 할께.
w3-card   w3-round   w3-left-aling  
w3-card 는 지정한 요소의 주위에 그림자 효과를 넣어서 카드 처럼 보이게 해줘.
w3-round 는 박스의 모퉁이를 약간 둥글게 해주고,
w3-left-aling 는 박스 안의 글자들이 좌측정렬이 되게 해.
이제는 클래스 속성 이름만 가지고도 척척 이해가 되지?

▶ w3-center   w3-dark-gray   w3-padding-16
사이드바의 제목인 [게시판]은 w3-center 로 중앙 정렬을 시키고, 배경은 짙은회색(w3-dark-gray) , 주변의 패딩 여백은16px (w3-padding-16) 을 주었어

▶ w3-bar-item   w3-button   w3-border-bottom
부메뉴의 첫번째 항목인 [자유게시판]이야.
여기는 a 태그를 사용해서 클릭하면 href="" 로 지정한 php 스크립파일로 이동하게 될거야.(현재는 한페이지 짜리여서 그냥 # 로 현재 위치에 그대로 있으라고 되어 있지만..)
이 a 태그에 대한 w3 클래스 속성을 보면..
바 형태의 아이템으로(w3-bar-item) 버튼모양을 하고(w3-button), 아래쪽에 줄을 긋는다(w3-border-bottom)
사이드바는 비교적 간단하지?

Tips!
레이아웃이나 디자인을 위해 클래스를 적용할 때 내가 잘 쓰는 방법 하나 알려 줄께..
클래스 이름 만으로는 어떤 역할을 하는지 잘 모를 때는 일단 해당 클래스 이름을 임시로 살짝 바꿔 보도록 해.
예를들어 w3-button 이 어떤 역할을 하는지 잘 모르면 이름을 zw3-button 처럼 클래스 이름 앞에 z x 같은 임의의 문자를 하나 더 붙여서 저장하는 거야.
그리고 이렇게 저장하고 화면에서 [새로고침]을 해서 봐.
그러면 zw3-button 이라는 클래스는 스타일 파일에 없으므로 이 클래스는 작동을 하지 않을거야.
화면도 조금 어딘가 변하겠지?
이 차이점을 보면 이 클래스의 역할을 쉽게 이해할 수 있어.
그리고 나서 다시 임시로 변경한 클래스이름을 다시 원상태로 돌려 두면 되겠지?
만일 차이점이 전혀 없다면?
그럼 안써도 되는 클래스를 괜히 하나 더 쓰고 있는 것으로 생각할 수 있어.
모르는 클래스 나올 때 마다 일일이 메뉴얼 찾아가서 공부하는 것 보다 이게 훨씬 더 빠르고 쉽게 이해돼.

목차제 목조회
1 39
2 232
3 291
4 125
5 104
6 98
7 87
8 86
9 103