이미지 크기를 조절하는 방법을 상세히 설명하고 CSS와 HTML 코드를 포함한 예제를 제공하겠습니다. 각 부분을 상세히 설명하고 마지막에 티스토리용 태그를 한 줄로 나열하겠습니다.
1. 이미지 크기 조절 (HTML 속성):
가장 간단한 방법은 HTML 속성을 사용하여 이미지 크기를 조절하는 것입니다. width와 height 속성을 사용합니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="image.jpg" width="200" height="150" alt="조절된 이미지">
</body>
</html>
이 예제에서 이미지의 가로 크기를 200픽셀로, 세로 크기를 150픽셀로 조절하고 있습니다.
2. 이미지 크기 조절 (CSS 속성):
CSS를 사용하여 이미지 크기를 동적으로 조절할 수 있습니다. 이 방법은 다양한 레이아웃에 더 적합합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.image-size {
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<img src="image.jpg" class="image-size" alt="조절된 이미지">
</body>
</html>
위의 예제에서 .image-size 클래스를 사용하여 이미지의 가로 크기를 200픽셀로, 세로 크기를 150픽셀로 조절하고 있습니다.
3. 이미지 크기 조절 (반응형):
이미지를 반응형으로 만들려면 다음과 같이 CSS를 사용하여 이미지의 최대 너비를 설정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-image {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img src="image.jpg" class="responsive-image" alt="반응형 이미지">
</body>
</html>
이렇게 하면 이미지는 부모 요소의 너비에 맞게 크기가 조절됩니다.
4. 이미지 크기 조절 (백그라운드 이미지):
CSS를 사용하여 요소의 배경 이미지 크기를 조절할 수도 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.background-image {
background-image: url('image.jpg');
background-size: 200px 150px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="background-image">배경 이미지 크기 조절</div>
</body>
</html>
이미지 크기를 조절하려면 background-size 속성을 사용하고, 요소의 크기도 설정합니다.
'CSS' 카테고리의 다른 글
| 여백 조절: 요소 주위 여백(padding) 설정. (0) | 2023.12.23 |
|---|---|
| 테두리 추가: 요소 주위에 테두리 추가. (0) | 2023.12.23 |
| 글자 가운데 정렬: 텍스트를 가로로 가운데 정렬. (0) | 2023.12.23 |
| 배경색 변경: 요소의 배경 색상 설정 (0) | 2023.12.22 |
| 텍스트 스타일링 예제 : 텍스트의 크기, 색상 및 폰트 스타일 변경. (0) | 2023.12.22 |