[유노코딩] 반응형 웹 Part 1 ~ 7

반응형 웹이란?

구성이나 크기가 다양한 기기나 브라우저에 맞게 변하는 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 파일을 참고하자