CSS 01 em , rem % vw vh

CSS 01  em , rem % vw vh  

필수 반응형 CSS 입니다. 

 

 

1. % Persent  부모 요소 사이즈 

안에 패딩 상위 개념에 패딩값까지 포함한 기준 시작 

 

%  박스 전체 크기 를 말한다

% 아까 말했지만 부모의 너비 기준으로 적용한다

 

Max-width 최대폭 최대값

 

요소의 너비와 높이 박스 는 % v*(view port) 

Font-siez 폰트사이지는  em ,rem

 

더 상세하게 적어볼게요 

 

2. em 과 rem 차이  공통 폰트사이즈 반응형입니다

em  상위 부모   유동적 이고

rem  최상위[맨상위!!] 고정적 이다 

 

- em  relative to Parent Element   [Relative]

상위 요소의[부모] 폰트 사이즈 몇배곱하기

 상위 부모 사이즈 차이남 ( 유동적 사이즈를 늘어나게함)

예) 박스 폰트 크기가 16 px  => 2em = 16px *2 = 32px 값이다 

2em = 32px  2em = 64px  2em = 128 px   Each equals 16px

 

 

-rem  relative to Root Element [Absolute]

   최상위[맨상위!!]  폰트사이즈 기준이다 

2rem = 32px  2rem = 32px  2rem = 32 px  

부모 요소 16px   맨 상위 요소기준으로 고정값 부여 

if padding: 1em value 폰트 사이즈 처럼 변경이 되어야 한다면 

 

 

3. vh vw 

viewport  화면 크기  상대적

 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻

 

하지만 고정 단위인 px 대신 유동 단위인 %를 사용하면 좀 더 유연한 코드를 만들 수 있다 
예를 들어 width:50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS죠!

1vw = view port 너비의 
500픽셀 너비의 뷰 포트면 1vw = 5px;


1vh = view port 높이의 1%
500px 높이의 뷰포트 
1vh = 8px;

또, 이들을 calc()와 결합하면 좋은 시너지를 낼 수 있습니다.
헤더영역 높이가 50px이고 컨텐츠 영역 높이를 '헤더를 제외한 나머지 높이 전체'로 만들고 싶다면, height: calc(100vh - 50px);을 지정해주면

 

4. 미디어 쿼리

grammer

@media screen and (max-width: 786px) {
.container {
flex: direction : column;
}
}

 

font-size: 1rem ;
padding: 0.5 rem ;

rem 고정
정렬을 원한다면
0.5em 위아래 왼오 0.5rem give it

정리 

[유동적]

% vh

상대적 em 

@copyright gamakim