[HTML/CSS] 10. Img 와 Icon

Mar 11, 2025

Contents

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에 맞춘다.

See more posts

[HTML/CSS] 10. Img 와 Icon

1. Icons

2. Img

스타일링할때 사이즈 설정을 편하게 하려면…

More articles

[HTML/CSS] 12. Card 박스 만들기

[HTML/CSS] 11. Grid Layout 실습

[HTML/CSS] 9. CSS Position

[HTML/CSS] 8. Input 디자인