여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 바
w3.css – 바
3개월전 작성
3개월전 수정

w3.css

런던
파리
도쿄
런던
파리
도쿄
런던
파리
도쿄
런던
파리
도쿄

수평 막대

가로 막대는 일반적인 웹 디자인 요소다.

런던
파리
도쿄

 
w3-bar 클래스는 수평 막대의 스타일을 지정하는 데 사용된다.

예제
<div class="w3-bar w3-green">
  <div class="w3-bar-item">London</div>
  <div class="w3-bar-item">Paris</div>
  <div class="w3-bar-item">Tokyo</div>
</div>

 

w3-bar-item 클래스의 목적은 올바른 간격, 패딩 및 위치 지정을 제공하는 것이다.

수직 막대

세로 막대(사이드바)도 웹 디자인에서 흔히 사용된다.

런던
파리
도쿄

 

w3-bar-block 클래스는 수직 막대의 스타일을 지정하는 데 사용된다.

예제
<div class="w3-bar-block w3-green">
  <div class="w3-bar-item">London</div>
  <div class="w3-bar-item">Paris</div>
  <div class="w3-bar-item">Tokyo</div>
</div>

막대 색상

어떤 색상이든 사용하여 막대 스타일을 지정할 수 있다.

런던
파리
도쿄
런던
파리
도쿄
런던
파리
도쿄
런던
파리
도쿄
예제
<div class="w3-bar w3-black">
  <div class="w3-bar-item">London</div>
  <div class="w3-bar-item">Paris</div>
  <div class="w3-bar-item">Tokyo</div>
</div>

호버 색상

마우스오버 색상을 사용하여 막대 스타일을 지정할 수 있다.

효과를 보려면 막대 항목 위에 마우스를 올려보자.

런던
파리
도쿄

런던
파리
도쿄
예제
<div class="w3-bar w3-black">
  <div class="w3-bar-item w3-hover-red">London</div>
  <div class="w3-bar-item w3-hover-green">Paris</div>
  <div class="w3-bar-item w3-hover-blue">Tokyo</div>
</div>

바 링크

네비게이션은 바의 일반적인 용도다.

예제
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-hover-green">London</a>
  <a href="#" class="w3-bar-item w3-hover-green">Paris</a>
  <a href="#" class="w3-bar-item w3-hover-green">Tokyo</a>
</div>

바 버튼

w3-button 클래스는 바의 링크 스타일을 지정하는 데 적합하다.

효과를 보려면 막대 항목 위에 마우스를 올려보자.

런던
파리
도쿄

런던
파리
도쿄
예제
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">London</a>
  <a href="#" class="w3-bar-item w3-button">Paris</a>
  <a href="#" class="w3-bar-item w3-button">Tokyo</a>
</div>

반응형 바

w3-mobile 클래스는 막대 항목을 반응형으로 만드는 데 적합하다.

효과를 보려면 창 크기를 조정해보자.

런던
파리
도쿄
예제
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button w3-mobile">London</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Paris</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Tokyo</a>
</div>

오른쪽 정렬 막대 항목

w3-right 클래스는 막대 항목을 오른쪽 정렬하는 데 적합하다.

런던
파리
도쿄
예제
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">London</a>
  <a href="#" class="w3-bar-item w3-button">Paris</a>
  <a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>
</div>
참고
Mingg`s Diary
밍구
공부 목적 블로그