[CSS] 가변 그리드, 마진, 패딩, 폰트

[ 공식 ]

(가변 크기로 만들 박스의 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 크기의 % 값

👉 가변 그리드, 마진, 패딩에 동일하게 적용 (단, 패딩은 조건에 따라 다르게 적용)
px값 기준으로 계산한다

[ id = "wrap / wrapper" ]

모든 태그를 감싸는 박스
웹 문서 내용 전체의 크기나 배경색 등 한꺼번에 조절
브라우저 화면 크기에 상관없이 웹 문서의 내용 중앙에 배치
반응형 웹에서 자식 박스들이 가변 크기로 설정되었을 때 무제한으로 늘어나는 것 방지
자식 박스들 가변 크기로 만들 때 기준 크기로 사용
가장 상위의 박스 -> 가변 그리드 계산 시 기준이 될 박스 없음

<body>
  <div id="wrap">
      <div class="container">

[ 가변 패딩 적용 방법 ]

방법 1. 기본 방법

(가변 패딩을 적용할 패딩값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 패딩 % 값

ex) 960px 크기의 박스 안에 또 다른 박스가 있고, 이 박스의 상하좌우에 40px 크기의 가변 패딩 적용

방법 2. 제한적인 조건 존재할 때

공식은 방법1과 같다.
ex) 960px 박스 안에 하나의 박스 있고, 이 박스가 600px 넘지 않으면서 상하좌우 패딩값을 50px로 적용

1. 600px 유지해야 하는 박스에서 (왼쪽+오른쪽 패딩값) 뺀다
2. 나온 값으로 공식에 적용시켜서 => 결과 %를 width로 설정
3. 공식에 적용한 패딩값 설정

[ calc 함수 ]

width 속성에서 사용할 수 있는 모든 값, 연산 기호
박스는 가변적이되 마진이나 패딩은 고정되도록 설정
ex) width: calc(100% - (왼쪽+오른쪽 패딩값));

[ 폰트 ]

(가변 폰트를 적용할 글자 크깃값 / 적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트값

em 단위 사용 시 PXtoEM 사이트에서 간단히 계산 가능
가변 폰트의 단위로서는 브라우저 비율에 따라 변경되는 "vw, vh, vmin, vmax" 사용

(vw 단위를 적용할 글자 크깃값 * 브라우저의 너빗값) / 100 = 크깃값
(vh 단위를 적용할 글자 크깃값 * 브라우저의 높잇값) / 100 = 크깃값

[ 멀티미디어 ]

#wrap div{
  width:100%; /* 요소의 크기를 100%로 유지 */
  max-width:100%; /* 요소의 기본 크기 이상으로는 크기 조절 불가 */
}

참고

- 김운아, 『Do it! 반응형 웹페이지 만들기』, 이지스퍼블리싱(2021), p.46~78

'web > html & css' 카테고리의 다른 글

[CSS] 미디어 쿼리, 뷰포트 (0)	2021.07.22
[CSS] 반응형 미디어 쿼리 (0)	2021.07.13
[CSS] em, rem 그리고 css의 단위들 (0)	2021.07.09
[CSS] position (0)	2021.07.09
[Bootstrap] checkbox와 radio (0)	2021.06.25

티스토리툴바