CSS

이미지 표현법

GYChoi 2022. 2. 2. 04:09

웹 사이트에서의 이미지 표현법

  • 1. HTML 태그를 통해서 표현
  • 2. CSS 속성을 통해서 표현
  • 3. 이미지 스프라이트 기법으로 표현

HTML 태그를 통해서 표현

HTML에서 <img> 태그를 시용해서 이미지를 표현할 수 있습니다. <img> 태그를 사용할 때 src 특성을 필수적으로 사용해야 하며 src 특성은 표현할 이미지로의 경로를 지정합니다. 주로 의미가 있는 이미지(로고, 메뉴)를 표현할 때 사용하며 alt를 사용해 대체 문자를 표현합니다.

<!DOCTYPE html>
<html>
   <head>
    	<title>img</title>
   </head>
   <body>
     	<div class="container">
	   <img src="이미지경로" alt="대체 문자">
      	</div>
   </body>
</html>

CSS 속성을 통해서 표현

CSS에서 background-image 속성을 사용해서 이미지를 표현할 수 있습니다. background-image 속성을 사용할 때 url 을 지정해 표현할 이미지로의 경로를 지정합니다. 주로 의미가 없는 이미지(배경, 색표현)를 표현할 때 사용하며 ir 효과를 사용해 CSS속성으로 대체 문자를 표현합니다.

 

이미지 스프라이트 기법으로 표현

이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 이미지 스프라이트 기법을 쓰면 웹 페이지에서 여러 이미지를 사용해도 서버엔 하나의 이미지만을 요청하기 때문에 로딩 시간을 줄여주고 많은 이미지 파일 대신 몇 개의 스프라이트 이미지 파일만을 관리하게 되기 때문에 이미지 파일 관리도 간편해진다. ir 효과를 사용해 CSS속성으로 대체 문자를 표현합니다.