HTML 이미지 표현 방법
웹에서 이미지를 표현하는 방법은 3가지로 나눌 수 있습니다.
- HTML 태그를 통해서 : img 태그 (의미가 있는 이미지)
- CSS 속성을 통해 : background 속성 (의미가 없는 이미지)
- 이미지 스프라이트 : background와 ir 효과를 통해서 이미지를 표현
img 태그를 통해
img는 HTML 문서에 이미지를 삽입하는 태그입니다.
주요 속성은 src, alt, width, height, loading입니다.
- src
- alt
- width
- height
- loading
예제
- width, height 속성을 정하지 않으면 이미지 원본 크기 그대로 나옵니다.
- 만약 지정한 경로에 이미지가 없다면 alt 속성에 있는 값이 출력됩니다.
- width 속성으로 가로 크기만 정하면 세로 크기는 원본의 가로 세로 비율에 맞게 정해집니다.
- height 속성으로 세로 크기만 정하면 가로 크기는 원본의 가로 세로 비율에 맞게 정해집니다.
- 가로 크기와 세로 크기를 동시에 정하면 원본의 가로 세로 비율과 상관없이 설정한 크기로 나옵니다
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<img src="" alt="duck">
<img src="assets/image/duck1.png" alt="duck">
<img src="assets/image/duck1.png" alt="duck" width="100">
<img src="assets/image/duck1.png" alt="duck" height="150">
<img src="assets/image/duck1.png" alt="duck" width="100" height="200">
</body>
</html>
CSS 속성을 통해
background-image는 이미지를 배경으로 사용하게 하는 속성입니다.
다음은 기본 문법과 예제입니다.
- none : 이미지를 배경으로 사용하지 않습니다.
- url : 이미지의 URL을 입력합니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
왼쪽 위에서 시작하여 가로 방향과 세로 방향으로 해당 요소를 다 채울 때까지 반복되어 나옵니다. 반복 여부는 background-repeat 속성으로 정합니다.
예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.test {
width: 50%;
height: 100px;
border: 1px solid #bcbcbc;
background-image: url( "assets/image/duck1.png" );
}
</style>
</head>
<body>
<div class="a">
</div>
</body>
</html>play-state>CSS 이미지 스프라이트(Image Sprite)
웹 페이지의 첫 로딩 속도를 줄여주는 여러 방법 중 하나로 서버로의 요청 횟수를 최소화 해줘서 모바일환경과 같이 한정된 자원을 사용하는 플랫폼의 최적화 요소 중에서도 실제 적용하기에 아주 손쉬운 방법입니다.
원리는 아이콘이나 버튼과 같은 반복되서 표시되지 않는 그림들을 하나의 그림으로 합쳐놓고 CSS의 background-position속성을 이용해 특정 부분만 노출되도록 하는 것입니다.
원본 이미지
<style>
.test {
width: 50%;
height: 100px;
border: 1px solid #bcbcbc;
background-image: url("assets/image/duck1.png");
}
.up, .down, .right, .left {
display: inline-block;
background: url("assets/image/sprite.png") no-repeat;
}
.up {
width: 59px;
height: 62px;
background-position: 0 0;
}
.down {
width: 56px;
height: 62px;
background-position: -60px 0;
}
.right {
width: 62px;
height: 60px;
background-position: -117px 0;
}
.left {
width: 62px;
height: 60px;
background-position: -178px 0;
}
</style>