[HTML/CSS] 11. Img CSS와 Icon

문정준

Mar 10, 2025

Contents

Icon 사용 Img 사용 박스 크기

✏️

CSS (Cascade Style Sheet)

특정 개체의 style 정보를 파일로 저장한 것

외부 css 파일의 링크를 통해 내 컴퓨터에 없는 스타일도 적용할 수 있음

Icon 사용

icon은 font-awesome 페이지에서 특정 키 값을 받아 사용할 수 있음

또는 아이콘 정보가 저장되어 있는 css 파일을 다운로드 받거나, 링크를 넣어 사용할 수 있음


<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>

<body>
    <h1>Icons</h1>
    <i class='fas fa-ambulance'></i>
    <i class='fas fa-ambulance' style='font-size:24px'></i>
    <i class='fas fa-ambulance' style='font-size:36px'></i>
    <i class='fas fa-ambulance' style='font-size:48px;color:red'></i>
    <i class='fa fa-fire'></i>
    <i class='fa fa-tree'></i>
</body>

</html>

Img 사용

✏️

Image Sizing

이미지 자체의 크기를 건드리지 말 것!

이미지가 박스 안에 차도록 설정

이미지의 배율을 직접 조절

object-fit : 내부 Item을 박스 안에 어떻게 표시할 것인지 결정

contain : 이미지의 비율에 맞춰서 (가로 크기 기준)
cover : 이미지의 비율에 맞춰서 ( 세로 크기 기준, 큰 부분은 잘라서 출력 )
fill : 박스 크기에 맞춰서 ( 비율 자동 조절 )

박스 크기

이미지를 삽입할 때에, 이미지가 담긴 박스의 크기에 유의해야 함

아래 코드와 같이 padding을 10, border를 1을 준 300x300의 박스

실제 크기는 322x322로, 설정한 크기와 다름

총 크기를 300x300으로 사용하고 싶다면 box-sizing을 사용해야 함

border-box : border까지의 영역을 박스로 설정, 내부 크기는 자동 조절


<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            box-sizing: border-box;
        }

        .img-box {
            margin-bottom: 5px;
            padding: 10px;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        .img-item {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
    </style>
</head>

<body>
    <div class="img-box">
        <img src="woman.jpg" class="img-item">
    </div>
    <div class="img-box">
        <img src="woman.jpg" class="img-item">
    </div>
</body>

</html>

Contents

Icon 사용 Img 사용 박스 크기

<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> </head> <body> <h1>Icons</h1> <i class='fas fa-ambulance'></i> <i class='fas fa-ambulance' style='font-size:24px'></i> <i class='fas fa-ambulance' style='font-size:36px'></i> <i class='fas fa-ambulance' style='font-size:48px;color:red'></i> <i class='fa fa-fire'></i> <i class='fa fa-tree'></i> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <style> * { box-sizing: border-box; } .img-box { margin-bottom: 5px; padding: 10px; width: 300px; height: 300px; border: 1px solid black; } .img-item { width: 100%; height: 100%; object-fit: fill; } </style> </head> <body> <div class="img-box"> <img src="woman.jpg" class="img-item"> </div> <div class="img-box"> <img src="woman.jpg" class="img-item"> </div> </body> </html>