Chapter 08. CSS Beginner (3) 이미지 다루기, Overflow 해결

웹페이지를 아름답게 만드는 CSS(Cascading Style Sheets)

 

 

CSS Beginner(3) 7. ~ 8.

 

| 목차

1. CSS 적용

2. CSS 구성(구조, 선택자, 주석)

3. CSS 특성

4. BOX model

5. BOX sizing

6. CSS 단위

7. 이미지 다루기

8. Overflow 및 해결

9. 폰트 꾸미기

10. 테두리 꾸미기

11. 배경 이미지 설정

12. 요소 정렬하기

 

 

---

 

7. 이미지 다루기

(1) img 이미지 태그

(2) 특정 블록 요소의 배경으로써 이미지를 세팅

(3) max-width: 100%

부모 영역에서 벗어나지 않도록 이미지의 상한선을 100%로 설정

 

(4) object-fit: cover;

이미지를 부모 요소의 영역의 크기 만큼 확대/축소하여 채움(부모 요소의 가운데로 자동으로 위치를 맞춤)

 

(5) object-filt: contain;

이미지의 비율을 유지하면서 크기를 변경하여 부모 요소를 채움

 

(6) object-fit: fill;

이미지의 비율을 유지하지 않고 부모 요소의 크기에 맞게 변경하여 채움

 

 

 

 

8. Overflow 및 해결

사실,

브라우저 입장에서 요소가 넘치는 것은 에러가 아니긴 하다!

 

(1) overflow 예시

 

(2) overflow 해결법- hidden: 넘치는 내용을 무시

 

(3) overflow 해결법-scroll: 스크롤 처리 (기본적으로 가로, 새로 둘 다 적용됨)

 

(4) overflow 해결법- scroll: 스크롤 처리(x축-가로만)

 

(5) overflow 해결법- auto: 알아서 넘치는 부분이 있으면 스크롤을 만들고, 없으면 만들지 않음