HTML&CSS

CSS img 속성을 알아보자.

초콜렛시몽 2024. 12. 31. 23:12
반응형

CSS에서 img 태그는 이미지를 표시하는 HTML 요소로, 다양한 스타일링 옵션을 통해 웹 페이지의 레이아웃과 디자인에 맞게 조정할 수 있습니다. 이미지 태그와 관련된 CSS 속성은 크기, 위치, 여백, 모양, 반응형 디자인 등 여러 측면에서 이미지를 제어하는 데 사용됩니다. 아래는 img 태그와 관련된 주요 CSS 속성과 그 사용 방법에 대한 상세 설명입니다.

 1. 기본 선택자

img 태그는 기본적으로 브라우저에서 인라인 요소로 처리됩니다. CSS를 사용하여 스타일을 변경할 수 있습니다. 

img {
  display: block; /* 인라인 요소를 블록 요소로 변경 */
}

 

 2. 크기 조정

이미지의 크기를 조정할 때 width, height 속성을 사용합니다.

상대적 크기
  • %: 부모 요소의 크기에 비례.
  • auto: 원본 이미지의 비율 유지. 
img {
  width: 100%; /* 부모 요소의 너비에 맞춤 */
  height: auto; /* 원본 비율 유지 */
}
고정 크기
  • px: 고정된 크기를 지정. 
img {
  width: 200px;
  height: 150px;
}

 

 3. 모양 및 모서리 스타일

테두리
  • border: 이미지에 테두리를 추가. 
img {
  border: 2px solid black;
  border-radius: 10px; /* 둥근 모서리 */
}
그림자
  • box-shadow: 이미지에 그림자 추가. 
img {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}



 4. 위치 및 정렬

정렬
  • 이미지를 텍스트와 함께 정렬하거나 가운데 정렬하려면 float, text-align, 또는 margin 속성을 사용합니다. 
img {
  display: block;
  margin: 0 auto; /* 가운데 정렬 */
}
플로팅
  • 이미지를 텍스트 옆에 배치. 
img {
  float: left; /* 왼쪽으로 플로팅 */
  margin-right: 10px;
}

 

 5. 반응형 디자인

반응형 웹 디자인을 위해 CSS에서 이미지를 조정할 수 있습니다.

최대 너비
  • max-width: 이미지가 부모 요소를 초과하지 않도록 제한. 
img {
  max-width: 100%;
  height: auto; /* 비율 유지 */
}

 

 6. 배경 이미지와 차이

CSS의 background-image와 HTML의 <img>는 목적이 다릅니다. 

최대 너비
  • img: 콘텐츠 이미지로 사용.
  • background-image: 장식적 목적으로 사용. 
div {
  width: 300px;
  height: 200px;
  background-image: url('image.jpg');
  background-size: cover; /* 이미지를 크기에 맞춤 */
}

 

 7. 필터 효과

CSS의 filter 속성을 사용하여 이미지를 스타일링할 수 있습니다.

일반적인 필터
  • grayscale: 흑백 이미지.
  • blur: 블러 효과.
  • brightness: 밝기 조정.
  • contrast: 대비 조정. 
img {
  filter: grayscale(100%); /* 흑백 */
  transition: filter 0.3s;
}

img:hover {
  filter: none; /* 원본 이미지로 복귀 */
}

 

 8. 오버레이 효과

이미지 위에 텍스트나 색상을 덮어씌울 때는 position 속성을 활용합니다.

<div class="image-container">
  <img src="image.jpg" alt="Example">
  <div class="overlay">Text Overlay</div>
</div>
.image-container {
  position: relative;
}

img {
  display: block;
  width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

 

 9. 애니메이션

이미지에 애니메이션 효과를 추가하여 동적인 웹 디자인을 구현할 수 있습니다.

img {
  transition: transform 0.3s ease;
}

img:hover {
  transform: scale(1.1); /* 확대 효과 */
}

 

 10. 접근성 고려

이미지의 접근성을 높이기 위해 CSS뿐만 아니라 HTML 속성도 중요합니다.

  • alt 속성을 활용하여 대체 텍스트 제공.
  • aria-hidden 속성을 사용하여 데코레이션 이미지에서 스크린 리더가 무시하도록 설정. 
<img src="decorative.jpg" alt="" aria-hidden="true">

 

img 태그는 다양한 스타일 속성을 통해 단순한 이미지 삽입에서부터 고급 디자인 요소로 확장할 수 있습니다. 이를 통해 웹 페이지의 시각적 요소를 개선하고, 반응형 디자인을 구현하며, 접근성을 강화할 수 있습니다. 

2024년 마지막날 마지막 포스팅을 마칩니다.

모두 건강한 해 보내셨길 바라며, 2025년은 모두 행복과 돈이 풍족한 해가 되었으면 합니다.

그럼 새해복 많이 받으시고, 내년에도 잘 부탁드립니다 ^^

반응형