HTML CSS 학습 11일차

파랑·2021년 11월 15일
1

HTML CSS 학습 11일차

요즘 거의 flex만 배우고 있는 것 같다.
FLEX에 익숙해지자.
오늘은 모르겠던 가변 요소에 대하여 적어본다.

가변 요소 공부

  1. 가변 레이아웃과 가변 요소

- 가변 글꼴

텍스트 크기를 픽셀(px) 단위로 지정시 크기가 고정되어,
화면 크기가 작은 기기에서 매우 작게 표시됨.
반응형 디자인을 위해 글자 크기도 유동적으로 사용해야함.

EM

부모 요소에서 지정한 폰트위 대문자 M 너비를 1em으로 지정한 것.
(1em = 16px)

REM

em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받는다. (부모 요소의 크기에 자식이 영향을 받음)
이러한 단점을 없애기 위해 만든 단위로, 루트의 영향을 받아서 중간에 기본값이 바뀌지 않는다.

- 가변 이미지

이미지를 레이아웃에 맞게 표시하려면 max-width:100% 로 지정하면 됨.

(영상도 마찬가지)

오늘의 각오

내일도 집중하자.
이제 어느정도 프로젝트를 해볼 수 있을 것 같다.

Firebase로 간단히 백엔드를 구성하는 예제를 찾아보자.

0개의 댓글