-
[유노코딩] 반응형 웹 Part 1 ~ 7프로그래밍/CSS 2023. 6. 28. 02:33
반응형 웹이란?
구성이나 크기가 다양한 기기나 브라우저에 맞게 변하는 Css의 형태
뷰포트
현재화면에 보여지고 있는 영역을 의미한다.상대길이 단위
박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위
(px은 절대길이 단위이기에 어떤상황에서도 동일한 값을 유지하여 반응형 웹에 적합하지 않다.)
em : 부모요소의 글꼴 크기에 상대적으로 나타낸 크기 (em으로 마진이나 패딩을 정하면 자기자신의 글자크기를 기준으로 한다)
rem : 루트em이며 html의 글꼴크기에 비례한다 (기본값은 16px)
1vw : 뷰포트의 너비의 100분의 1
1vh : 뷰포트의 높이의 100분의 1
1vmin : 높이와 너비 중 작은 쪽의 100분의 1
1vmax : 높이와 너비 중 큰 쪽의 100분의 1
가변레이아웃(그리드)
레이아웃에도 비율에 기반한 개념을 적용할 수 있다
부모요소의 크기에 비례해 자식요소의 크기가 변하는 방식
%의 사용법 안어려워요 부모요소와의 상대적 크기를 지정한다. 너비노핑 여백 글자 다 사용가능
산술연산자
css함수 calc(30px -20xp)
미디어쿼리
@media 미디어_타입 and (조건에 대한 물음) {}기타 내용들은 html 파일을 참고하자
'프로그래밍 > CSS' 카테고리의 다른 글
[Jest] Vite + Typescript + pnpm 환경에서 Jest (0) 2023.11.30 [TailwindCSS] TailwindCSS사용 5가지의 모범사례 (0) 2023.11.21 [드림코딩 Css] Flex-box (0) 2023.06.26 [CSS] Display && Position (0) 2023.06.24 띵동코딩 CSS (0) 2023.06.01