CSS 이미지 태그 alt, title 속성, 간단한 툴팁 효과

CSS 이미지 태그 alt 속성의 중요성

안녕하세요! 오늘은 웹사이트 제작할 때 꼭 알아야 하는 CSS 이미지 태그의 alt 속성에 대해 이야기해볼게요. alt 속성은 이미지가 로드되지 않거나 시각장애인을 위한 스크린 리더에서 이미지 설명을 제공할 때 사용돼요. 즉, 단순히 검색엔진 최적화(SEO)에 좋은 것뿐 아니라 웹 접근성을 높이는 데도 꼭 필요한 요소랍니다.

예를 들어, 아래와 같이 alt 속성을 추가하면 이미지가 표시되지 않을 때 대체 텍스트가 보여요.

<img src="image.jpg" alt="고양이가 창문을 바라보는 모습">

검색엔진은 이미지 자체를 인식하기 어렵기 때문에 alt 속성을 통해 이미지가 어떤 의미를 가지는지 파악해요. 따라서 alt는 핵심 키워드와 자연스러운 문장으로 작성하는 게 좋답니다.

 

CSS 이미지 태그 title 속성의 역할

title 속성은 alt 속성과 헷갈리기 쉬운데, 역할이 조금 달라요. 이미지에 title 속성을 넣으면 마우스를 이미지 위에 올렸을 때 작은 툴팁처럼 설명 문구가 나타나요.

사용법은 간단해요.

<img src="image.jpg" alt="고양이 사진" title="귀여운 고양이">

위와 같이 title 속성을 넣으면 마우스를 이미지에 올렸을 때 “귀여운 고양이”라는 툴팁이 표시돼요. 다만, title 속성은 접근성 측면에서 한계가 있기 때문에 필수는 아니고, 사용자 경험을 보완하는 정도로 활용하면 좋아요.

 

CSS 이미지 태그로 간단한 툴팁 효과 만들기

title 속성만으로는 툴팁 디자인을 꾸미기가 어렵죠. 그래서 CSS를 이용해 조금 더 예쁜 툴팁을 만들어볼 수 있어요. 아래는 간단한 예시예요.

<div class="tooltip">
  <img src="image.jpg" alt="강아지 사진">
  <span class="tooltip-text">귀여운 강아지예요!</span>
</div>

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  width: 140px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

위 코드를 적용하면 이미지를 마우스로 올렸을 때 깔끔한 툴팁이 자연스럽게 나타나요. 이런 방식은 CSS만으로도 충분히 가능하고, 디자인을 다양하게 커스터마이징할 수 있답니다.

 

CSS 이미지 태그 활용 시 주의할 점

CSS 이미지 태그를 쓸 때 가장 중요한 건 접근성과 SEO를 모두 고려하는 거예요. alt 속성은 꼭 넣되 너무 길게 작성하지 말고 핵심 의미만 담아야 해요. title 속성은 보조적으로만 활용하고, 툴팁을 만들 때는 CSS를 활용해 더 보기 좋게 만들어주세요.

또한, 이미지의 파일명 역시 영어와 숫자 조합으로 의미 있는 단어를 사용하면 SEO에 좋아요. 예를 들어, img001.jpg보다는 cute-cat-window.jpg처럼 의미를 담아주는 게 더 좋답니다.

 

마무리

오늘은 CSS 이미지 태그의 alt와 title 속성, 그리고 툴팁 효과까지 알아봤어요. 이 부분을 잘 이해하고 적용하면 웹사이트의 품질과 사용자 경험이 한 단계 업그레이드될 거예요. 꼭 직접 적용해보고 다양한 스타일로 테스트해보세요. 궁금한 점 있으면 댓글로 물어봐도 좋고요!