4. 크롬은 최소 폰트사이즈가 10px이다
문제발생!
크롬 브라우저에서 화면을 축소하다보면, 어느 지점부터 이미지 크기는 줄어드는데 텍스트 크기는 줄어들지 않는 현상을 발견 할 수 있다. 이는 크롬의 최소 폰트사이즈가 10px로 고정되어 있기 떄문이다.
(브라우저마다 상황이 다 다름)
(크롬 -> 세팅 -> 폰트 에서 "최소 글꼴 크기"를 통해 개인적으로 10px 이하로 설정도 가능)
기억할 점!
웹 개발자는 폰트크기를 최소 10px 이하로 하지 않도록 주의
5. 생각처럼 동작하지 않는 height: 100%
이미지를 화면 배경으로 넣어보기로 해보자!
width: auto; 요소의 부모 크기 기준으로 가득찬다.
height: auto; 요소의 자식 기준으로 자동 조절된다.
height: 100%를 넣을 경우 부모 크기의 100%를 받겠다는 뜻이다.
이때 body의 크기를 따르게 되는데, body의 크기가 설정이 되지 않은 경우 height를 원하는 이미지 높이만큼 얻지 못한다.
해결방법
1. CSS2.1버전: html, body { height : 100% }를 통해 부모요소의 크기 자체를 넓혀버리면 된다.
2. CSS3버전: height: 100vh (viewport height)
'멋쟁이사자처럼FE 2기 > 추천 강의' 카테고리의 다른 글
| 빔캠프_OACSS 시리즈(1~3강) (2) | 2022.04.06 |
|---|---|
| 스타트업 A to Z_ 이호준 강사님 (2) | 2022.04.05 |