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>