w3.css

이미지

W3.CSS 로 이미지 의 모서리를 둥글게 만들거나 테두리, 텍스트를 추가할 수 있다.

둥근 이미지

w3-round 클래스는 이미지에 둥근 모서리를 추가한다.

예제

<img src="img_snowtops.jpg" class="w3-round" alt="Norway">

원모양 이미지

w3-circle 클래스는 이미지를 원 모양으로 만든다.

예제

<img src="snowtops.jpg" class="w3-circle" alt="Alps">

테두리가 있는 이미지

w3-border 클래스는 이미지 주위에 테두리를 추가한다.

예제

<img src="snowtops.jpg" class="w3-border w3-padding" alt="Alps">

이미지 카드

<img> 요소 주위에 w3-card-* 클래스를 래핑하여 카드로 표시한다(그림자 추가).

예제

<div class="w3-card-4">
  <img src="img_avatar.png" alt="Person">
</div>

이미지 텍스트

w3-display-class를 사용하여 이미지에 텍스트 위치를 지정한다.

예제

<div class="w3-display-container">
  <img src="img_lights.jpg" alt="Lights">
  <div class="w3-display-topleft w3-container">Top Left</div>
  <div class="w3-display-topright w3-container">Top Right</div>
  <div class="w3-display-bottomleft w3-container">Bottom Left</div>
  <div class="w3-display-bottomright w3-container">Bottom Right</div>
  <div class="w3-display-left w3-container">Left</div>
  <div class="w3-display-right w3-container">Right</div>
  <div class="w3-display-middle w3-large">Middle</div>
  <div class="w3-display-topmiddle w3-container">Top Middle</div>
  <div class="w3-display-bottommiddle w3-container">Bottom Middle</div>
</div>

반응형 이미지

이미지의 크기가 컨테이너 크기에 맞게 자동으로 조정되도록 설정할 수 있다.

필요한 경우 이미지의 크기를 축소하고 싶지만 원래 크기보다 더 크게 확장하지 않으려면 w3-image 클래스를 사용한다.

예제

<img src="img_lights.jpg" alt="Lights" class="w3-image">

 

반응성에 따라 이미지의 크기를 늘리거나 줄이려면 CSS 너비 속성을 100%로 설정한다.

예제

<img src="img_lights.jpg" alt="Lights" style="width:100%">

 

반응형 이미지를 최대 크기로 제한하려면 max-width 속성을 사용한다.

예제

<img src="img_lights.jpg" alt="Lights" style="width:100%;max-width:400px">

불투명

w3-opacity 클래스는 이미지를 투명하게 만든다.

예제

<img src="img_forest.jpg" alt="Forest" class="w3-opacity-min">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity">
<img src="img_forest.jpg" alt="Forest" class="w3-opacity-max">

그레이스케일

w3-grayscale 클래스는 이미지에 회색조 효과를 추가한다.

예제

<img src="image.jpg" alt="Table" class="w3-grayscale-min">
<img src="image.jpg" alt="Table" class="w3-grayscale">
<img src="image.jpg" alt="Table" class="w3-grayscale-max">

세피아

w3-sepia 클래스는 이미지에 세피아 효과를 추가한다.

예제

<img src="image.jpg" alt="Table" class="w3-sepia-min">
<img src="image.jpg" alt="Table" class="w3-sepia">
<img src="image.jpg" alt="Table" class="w3-sepia-max">

 

⭐ w3-sepia 클래스는 IE 11 및 이전 버전에서는 지원되지 않는다.

호버 효과

호버/마우스 오버에 특수 효과를 추가할 수도 있다.

예제

<img src="image.jpg" alt="Einstein" class="w3-hover-opacity">
<img src="image.jpg" alt="Einstein" class="w3-hover-grayscale">
<img src="image.jpg" alt="Einstein" class="w3-hover-sepia">

불투명도 끄기

w3-hover-opacity 클래스는 마우스 오버 시 이미지에 투명도를 추가하고, w3-hover-opacity-off 클래스는 마우스 오버 시 투명도를 제거한다.

예제

<img src="snowtops.jpg" class="w3-hover-opacity" alt="Alps">
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">

사진 앨범 만들기

이 예에서는 W3.CSS 반응형 그리드 시스템을 사용하여 모든 장치에서 보기 좋게 보이는 사진 앨범을 만든다.
이에 대해서는 나중에 자세히 배우게 된다.

예제

<div class="w3-third">
  <div class="w3-card">
    <img src="img_monterosso.jpg" style="width:100%">
    <div class="w3-container">
      <h4>Monterosso</h4>
    </div>
  </div>
</div>