본격적으로 가변 그리드 배우기
- 가변 그리드가 공식이 있는 기술이구나... 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술
- (가변 크기로 만들 박스의 width / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 width)x100 ㄴ> 패딩값 적용할땐 패딩값 빼기
- inline-block : inline속성값처럼 요소들이 한줄로 보이고 block 태그에 적용할 수 있는 속성도 사용할 수 있는 속성값
가변 마진과 가변 패딩 이해하기
- 반응형 웹에서는 "모든 요소가 가변적" → 당근 간격도 가변적이어야!!
- 가변 마진 적용 (가변 마진을 적용할 마진 값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) X 100
- 가변 패딩 적용 (가변 패딩을 적용할 패딩값 / 적용할 박스를 감싸고 있는 박스의 가로 너비 ) x 100
폰트도 자유자재로! 가변 폰트 이용하기
- em : 상대적 단위 , M의 너비를 1cm으로 표현한 것, =16px , 상속문제 발생
- (가변 폰트를 적용할 글자 크깃값 / 적용할 요소를 감싸고 있는 요소의 글자 크깃값) =가변폰트값
- rem 단위 : 상속문제 발생 x, 웹 문서 시작인 <html>태그를 기준
- 진정한 가변 폰트 - vw, vh, vmin, vmax 단위
- vw (viewport width)단위 : 웹 브라우저의 너비를 100을 기준으로 하여 크기를 결정 (vw 단위를 적용할 글자 크깃값 x 브라우저의 너빗값) / 100
- vh (viewport height)단위 : 웹 브라우저의 높이를 100을 기준으로 하여 크기 결정 (vh 단위를 적용할 글자 크깃값 x 브라우저의 높잇값 ) / 100
- vmin (viewport minimum)단위 : 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 크기결정
- vmax ( " max)단위 : 웹 브라우저의 너비와 높이 중 긴 쪽을 기준으로 하여 크기 결정 그 외에는 vw, vh단위랑 같음
멀티미디어 요소 가변적으로 만들기
- 만드는 방법 : width, max-width 속성값을 100%로 설정 (유튭,비메오에서는 x)
