[CSS] 11. Img CSS와 Icon

김주희

Mar 12, 2025

Contents

1. 파일 위치 2. Icon 3. Img

1. 파일 위치

2. Icon

0. CSS를 <style></style>태그가 아닌 별도의 파일로 만들어서 관리


<!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>
</body>
</html>

style.css파일


h1{
    color: blue;
}

style.css 적용 전

style.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>
</body>
</html>

1. Icon 가져오기

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/icons/default.asp


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

1. w3schools에서 필요한 아이콘의 클래스명 찾기

❗

Try it을 클릭해 보면 활용 예시를 확인할 수 있다.

2. 예제


<!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>
</body>
</html>

3. Img


<!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;
        }
        .f-box{
            display:grid;
            grid-template-columns: 1fr 1fr;
        }

    </style>
</head>
<body>
    <div class="f-box">
        <div class="img-box">
            <img src="computer.png" class="img-item">
        </div>
    </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            /* 모든 태그에 적용*/
            box-sizing: border-box;
        }

        .img-box{
            padding: 10px;
            margin-bottom: 5px;
            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="computer.png" class="img-item">
    </div>
    <div class="img-box">
        <img src="computer.png" class="img-item">
    </div>
</body>
</html>

object-fit : contain / cover/ fill

contian

사진 원본 비율 유지

HTML/CSS

[CSS] 11. Img CSS와 Icon

김주희

Mar 12, 2025

Contents

1. 파일 위치 2. Icon 3. Img

1. 파일 위치

2. Icon

0. CSS를 <style></style>태그가 아닌 별도의 파일로 만들어서 관리


<!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>
</body>
</html>

style.css파일


h1{
    color: blue;
}

style.css 적용 전

style.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>
</body>
</html>

1. Icon 가져오기

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/icons/default.asp


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

1. w3schools에서 필요한 아이콘의 클래스명 찾기

❗

Try it을 클릭해 보면 활용 예시를 확인할 수 있다.

2. 예제


<!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>
</body>
</html>

3. Img


<!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;
        }
        .f-box{
            display:grid;
            grid-template-columns: 1fr 1fr;
        }

    </style>
</head>
<body>
    <div class="f-box">
        <div class="img-box">
            <img src="computer.png" class="img-item">
        </div>
    </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            /* 모든 태그에 적용*/
            box-sizing: border-box;
        }

        .img-box{
            padding: 10px;
            margin-bottom: 5px;
            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="computer.png" class="img-item">
    </div>
    <div class="img-box">
        <img src="computer.png" class="img-item">
    </div>
</body>
</html>

object-fit : contain / cover/ fill

contian

사진 원본 비율 유지