![[HTML/CSS] 10. Img 와 Icon](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-11T12%3A48%3A36.097Z-af1a43f2-f564-4763-9ecb-0b8627cc6038&w=3840&q=75)
1. Icons
<!DOCTYPE html>
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
/>
<!-- min = 띄어쓰기를 제거한 압축된 파일 -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>icons</h1>
<i class="fas fa-ambulance"></i>
<i class="fas fa-fire"></i>
<i class="fas fa-fire-alt"></i>
<i class="fas fa-tree"></i>
</body>
</html>- 클라우드플레어에 있는 폰트어썸css파일을 다운 받아서 아이콘을 사용함
- 파일이름에 min이 들어있으면 띄어쓰기 줄 바꿈이 없는 압축 파일임
- link 태그를 사용해 파일을 요청할 수 있음
- 외부 서버는 https를 사용하고
- 내부 파일은 파일의 주소를 작성하면 됨
2. Img
- 왼쪽은 width, height = 100%
- 오른쪽은 이미지의 크기
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.img-box {
width: 300px;
height: 300px;
border: 1px solid black;
}
.img-item {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="img-box">
<img src="hello.png" class="img-item" />
</div>
</body>
</html>- 이미지 파일을 출력해 준다
- height, width을 기본적으로 100%를 넣고 하자
- object-fit은 cover을 주로 사용한다.
- cover = 이미지를 박스의 크기에 맞게 키우면서 비율을 유지한다.
- 기본적으로 가운데를 기준으로 움직인다.
스타일링할때 사이즈 설정을 편하게 하려면…
- 왼쪽은 border-box
- 오른쪽은 content-box
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
.img-box {
width: 300px;
height: 300px;
border: 1px solid black;
padding: 10px;
margin-bottom: 5px;
}
.img-item {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="img-box">
<img src="hello.png" class="img-item" />
</div>
<div class="img-box">
<img src="hello.png" class="img-item" />
</div>
</body>
</html>- 모든 요소의 box-sizing을 border-box로 하는 것이 크기 계산에 편리하다
- content-box: 기본값, 요소의 크기를 내부 컨텐츠에 맞춘다
- border-box: 요소의 크기를 border에 맞춘다.
Share article