CSS Style Images

CSS Style Images: 이미지에 스타일 적용하기

CSS는 이미지를 더 매력적이고 인터랙티브하게 만들기 위한 다양한 스타일링 옵션을 제공합니다. 이미지를 크기 조절하거나, 테두리를 추가하거나, 모서리를 둥글게 하거나, 그림자 효과를 추가하는 등의 작업을 통해 이미지를 더욱 시각적으로 개선할 수 있습니다. 이 자료에서는 CSS로 이미지를 스타일링하는 다양한 방법을 예제를 통해 설명합니다.

1. 이미지 크기 조절

이미지의 크기를 조절할 때 CSS의 width와 height 속성을 사용할 수 있습니다.

예시: 이미지 크기 조절

img {
  width: 300px; /* 이미지의 너비를 300px로 설정 */
  height: auto; /* 비율을 유지하면서 높이를 자동으로 설정 */
}

width: 이미지를 지정한 너비로 설정합니다.
height: auto: 이미지를 비율에 맞게 자동으로 높이를 설정합니다.

2. 이미지의 테두리 추가

이미지에 테두리를 추가하면 이미지가 더 깔끔하게 보일 수 있습니다. border 속성을 사용하여 테두리를 쉽게 추가할 수 있습니다.

예시: 이미지에 테두리 추가

img {
  border: 5px solid #333; /* 5px 너비의 검은색 테두리 */
}

border: 이미지에 테두리를 추가합니다. 테두리의 두께, 스타일, 색상을 지정할 수 있습니다.

테두리 스타일

테두리 스타일은 다양한 형태로 지정할 수 있습니다:

solid: 실선 테두리.
dashed: 점선 테두리.
dotted: 점선 테두리.

img {
  border: 3px dashed red; /* 빨간색 점선 테두리 */
}

3. 둥근 모서리 (Rounded Corners)

이미지에 둥근 모서리 효과를 주기 위해 border-radius 속성을 사용할 수 있습니다. 이 속성은 이미지의 네 모서리를 둥글게 만듭니다.

예시: 둥근 모서리 적용

img {
  border-radius: 15px; /* 모서리를 둥글게 설정 */
}

border-radius: 이미지의 모서리를 둥글게 설정합니다. 값이 클수록 모서리가 더 둥글어집니다.

예시: 완전히 둥근 이미지

이미지를 원형으로 만들고 싶다면, border-radius 값을 **50%**로 설정하면 됩니다.

img {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* 원형 이미지로 설정 */
}

이 코드는 정사각형 이미지를 완전한 원형으로 만들어 줍니다.

4. 이미지에 그림자 추가

이미지에 그림자를 추가해 입체감을 줄 수 있습니다. box-shadow 속성을 사용하면 이미지를 부드럽게 부각시킬 수 있습니다.

예시: 이미지에 그림자 추가

img {
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* 부드러운 그림자 효과 */
}

box-shadow: 이미지를 기준으로 그림자를 추가합니다. 첫 번째와 두 번째 값은 그림자의 x축과 y축 오프셋을 나타내고, 세 번째 값은 흐림 정도, 네 번째 값은 그림자 색상을 설정합니다.

5. 이미지의 불투명도(투명도) 조절

opacity 속성을 사용하면 이미지의 투명도를 조절할 수 있습니다. 값은 0에서 1까지의 숫자이며, 0은 완전히 투명하고, 1은 불투명(기본값)입니다.

예시: 이미지 투명도 조절

img {
  opacity: 0.7; /* 이미지의 불투명도를 70%로 설정 */
}

opacity: 이미지의 투명도를 설정합니다. 값이 작을수록 더 투명해집니다.

6. 이미지에 필터 효과 적용

CSS 필터(filter) 속성을 사용하면 이미지에 다양한 시각적 효과를 추가할 수 있습니다. 흑백 효과, 밝기 조절, 블러(흐림) 등의 효과를 손쉽게 적용할 수 있습니다.

필터 효과 예시

img {
  filter: grayscale(100%); /* 흑백 이미지 */
}

filter: grayscale(100%): 이미지를 완전한 흑백으로 변환합니다.
filter: blur(5px): 이미지를 흐리게(블러) 만듭니다.
filter: brightness(150%): 이미지의 **밝기를 150%**로 조절합니다.

여러 필터 효과 함께 사용

여러 필터를 동시에 적용할 수도 있습니다. 필터는 공백으로 구분하여 나열하면 됩니다.

img {
  filter: brightness(120%) contrast(90%) blur(2px);
}

이 코드는 밝기, 대비, 블러 효과를 동시에 적용합니다.

7. 호버 시 이미지 스타일 변경

호버(Hover) 효과를 통해 마우스를 이미지 위에 올렸을 때 스타일이 변경되도록 만들 수 있습니다. 이를 통해 인터랙티브한 웹사이트 디자인을 할 수 있습니다.

예시: 이미지 호버 시 그림자 및 확대 효과

img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

img:hover {
  transform: scale(1.1); /* 이미지 확대 */
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); /* 그림자 강조 */
}

transition: 이미지가 서서히 변하도록 애니메이션 효과를 추가합니다.
transform: scale(1.1): 마우스를 올렸을 때 이미지가 10% 확대됩니다.
box-shadow: 호버 시 그림자를 더 크게 만들어 이미지가 부각됩니다.

8. 이미지의 객체 맞춤(Object Fit)

object-fit 속성은 이미지가 컨테이너에 맞게 잘릴 때 어떻게 조정될지를 결정합니다. 주로 이미지가 다른 비율의 컨테이너 안에 들어갈 때 유용합니다.

예시: 이미지 객체 맞춤

img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* 이미지가 잘리지 않고 컨테이너에 맞게 채워짐 */
}

object-fit: cover: 이미지가 비율을 유지하면서 컨테이너에 맞게 채워집니다.
object-fit: contain: 이미지가 비율을 유지하며, 잘리지 않고 컨테이너 안에 맞게 축소됩니다.

9. 실전 예시: 스타일링된 이미지 갤러리

예시: 이미지 갤러리 스타일링

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.gallery {
  display: flex;
  gap: 10px;
}

.gallery img {
  width: 200px;
  height: 150px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

이 코드는 이미지 갤러리를 만들고, 이미지를 둥근 모서리와 그림자로 스타일링한 후, 호버 시 이미지가 확대되고 그림자가 더 강조되도록 설정했습니다.

코딩 스쿨 CSS