[HTML/CSS] 10. Img CSS 와 Icon

Mar 10, 2025

Contents

Icon Img 📌 이미지 스타일링 (CSS img 스타일)1. 기본 이미지 스타일 2. 반응형 이미지 (Responsive)3. 이미지 둥글게 만들기 4. 이미지 테두리 (Border)5. 이미지 그림자 효과 (Shadow)6. 이미지 정렬 7. 이미지 오버레이 효과 (Hover)8. 배경 이미지로 사용하기 9. 흑백 필터 적용 📌 정리

‼️

Icon은 w3school에서 가져다쓰기

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

Icon


<!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="fas fa-fire"></i>
    <i class="fa fa-tree"></i>
  </body>
</html>

Img

‼️

✅ object-fit: cover → 이미지 비율 유지 + 내용이 잘리지 않도록


<!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="sky.png" class="img-item" />
    </div>
  </body>
</html>

‼️

📌 CSS * {} (전체 선택자) → 페이지 내의 모든 요소에 스타일을 적용 ✅ box-sizing: border-box; → 너비 계산 방식 변경


<!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: cover;
      }
    </style>
  </head>
  <body>
    <div class="img-box">
      <img src="sky.png" class="img-item" />
    </div>
    <div class="img-box">
      <img src="sky.png" class="img-item" />
    </div>
  </body>
</html>

📌 이미지 스타일링 (CSS `img` 스타일)

1. 기본 이미지 스타일

기본적으로 이미지에 width와 height를 지정해 크기를 조정할 수 있습니다.


img {
  width: 100%; /* 부모 요소 크기에 맞춤 */
  height: auto; /* 비율 유지 */
  display: block; /* 하단 여백 제거 */
}

✅ width: 100% → 반응형 조정

✅ height: auto → 가로세로 비율 유지

2. 반응형 이미지 (Responsive)

📌 고정 크기가 아닌, 화면 크기에 맞춰 이미지 조정


.responsive-img {
  max-width: 100%;
  height: auto;
}

✅ max-width: 100% → 부모 요소보다 커지지 않도록 제한

✅ height: auto → 비율 유지

3. 이미지 둥글게 만들기

📌 둥근 테두리


.rounded-img {
  border-radius: 15px; /* 모서리를 둥글게 */
}

📌 완전히 원형 이미지


.circle-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

✅ border-radius: 50% → 원형 이미지

✅ object-fit: cover → 크기를 유지하면서 잘리지 않도록

4. 이미지 테두리 (Border)


.img-border {
  border: 5px solid #4a90e2;
  border-radius: 10px;
}

✅ border: 5px solid color; → 테두리 추가

✅ border-radius: 10px; → 둥근 테두리

5. 이미지 그림자 효과 (Shadow)


.img-shadow {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

✅ box-shadow: X Y Blur Color; → 입체감 추가

6. 이미지 정렬

📌 가운데 정렬 (텍스트 없이 단독 이미지일 경우)


.center-img {
  display: block;
  margin: 0 auto;
}

✅ margin: 0 auto; → 가운데 정렬

📌 Flexbox로 정렬


.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

✅ justify-content: center; → 수평 정렬

✅ align-items: center; → 수직 정렬

7. 이미지 오버레이 효과 (Hover)


.img-hover:hover {
  opacity: 0.7;
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
}

✅ opacity: 0.7; → 흐리게

✅ transform: scale(1.05); → 확대 효과

8. 배경 이미지로 사용하기

이미지를 <img> 태그가 아니라, background-image로 사용할 수도 있습니다.


.bg-image {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 300px;
}

✅ background-size: cover; → 화면에 맞게 조정

✅ background-position: center; → 중앙 정렬

9. 흑백 필터 적용


.img-gray {
  filter: grayscale(100%);
}

✅ grayscale(100%) → 흑백 이미지

📌 정리

스타일	설명
`width: 100%`	반응형 조정
`border-radius`	둥근 모서리
`box-shadow`	그림자 효과
`opacity`	투명도 조절
`object-fit: cover`	잘리지 않도록 크기 조정
`filter: grayscale(100%)`	흑백 효과
`transition`	애니메이션 효과

Contents

HTML/CSS

[HTML/CSS] 10. Img CSS 와 Icon

김미숙

Mar 10, 2025

Contents

‼️

Icon은 w3school에서 가져다쓰기

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

Icon


<!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="fas fa-fire"></i>
    <i class="fa fa-tree"></i>
  </body>
</html>

Img

‼️

✅ object-fit: cover → 이미지 비율 유지 + 내용이 잘리지 않도록


<!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="sky.png" class="img-item" />
    </div>
  </body>
</html>

‼️

📌 CSS * {} (전체 선택자) → 페이지 내의 모든 요소에 스타일을 적용 ✅ box-sizing: border-box; → 너비 계산 방식 변경


<!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: cover;
      }
    </style>
  </head>
  <body>
    <div class="img-box">
      <img src="sky.png" class="img-item" />
    </div>
    <div class="img-box">
      <img src="sky.png" class="img-item" />
    </div>
  </body>
</html>

📌 이미지 스타일링 (CSS `img` 스타일)

1. 기본 이미지 스타일

기본적으로 이미지에 width와 height를 지정해 크기를 조정할 수 있습니다.


img {
  width: 100%; /* 부모 요소 크기에 맞춤 */
  height: auto; /* 비율 유지 */
  display: block; /* 하단 여백 제거 */
}

✅ width: 100% → 반응형 조정

✅ height: auto → 가로세로 비율 유지

2. 반응형 이미지 (Responsive)

📌 고정 크기가 아닌, 화면 크기에 맞춰 이미지 조정


.responsive-img {
  max-width: 100%;
  height: auto;
}

✅ max-width: 100% → 부모 요소보다 커지지 않도록 제한

✅ height: auto → 비율 유지

3. 이미지 둥글게 만들기

📌 둥근 테두리


.rounded-img {
  border-radius: 15px; /* 모서리를 둥글게 */
}

📌 완전히 원형 이미지


.circle-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

✅ border-radius: 50% → 원형 이미지

✅ object-fit: cover → 크기를 유지하면서 잘리지 않도록

4. 이미지 테두리 (Border)


.img-border {
  border: 5px solid #4a90e2;
  border-radius: 10px;
}

✅ border: 5px solid color; → 테두리 추가

✅ border-radius: 10px; → 둥근 테두리

5. 이미지 그림자 효과 (Shadow)


.img-shadow {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

✅ box-shadow: X Y Blur Color; → 입체감 추가

6. 이미지 정렬

📌 가운데 정렬 (텍스트 없이 단독 이미지일 경우)


.center-img {
  display: block;
  margin: 0 auto;
}

✅ margin: 0 auto; → 가운데 정렬

📌 Flexbox로 정렬


.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

✅ justify-content: center; → 수평 정렬

✅ align-items: center; → 수직 정렬

7. 이미지 오버레이 효과 (Hover)


.img-hover:hover {
  opacity: 0.7;
  transform: scale(1.05);
  transition: all 0.3s ease-in-out;
}

✅ opacity: 0.7; → 흐리게

✅ transform: scale(1.05); → 확대 효과

8. 배경 이미지로 사용하기

이미지를 <img> 태그가 아니라, background-image로 사용할 수도 있습니다.


.bg-image {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 300px;
}

✅ background-size: cover; → 화면에 맞게 조정

✅ background-position: center; → 중앙 정렬

9. 흑백 필터 적용


.img-gray {
  filter: grayscale(100%);
}

✅ grayscale(100%) → 흑백 이미지

📌 정리

스타일	설명
`width: 100%`	반응형 조정
`border-radius`	둥근 모서리
`box-shadow`	그림자 효과
`opacity`	투명도 조절
`object-fit: cover`	잘리지 않도록 크기 조정
`filter: grayscale(100%)`	흑백 효과
`transition`	애니메이션 효과

Contents