1. 가변 그리드 공식 이해하기
(가변 크기로 만들 박스의 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 크기의 % 값
- ex code
<body>
<div id="wrap">
<div class="container">
<div></div><div></div>
</div>
</div>
</body>#wrap {
width: 90%;
height: 500px;
margin: 0 auto;
border: 4px solid black;
}
.container {
width: 90%;
height: 450px;
margin: 0 auto;
border: 4px solid red;
}
.container div {
display: inline-block;
height: 100%;
}
.container div:first-child {
width: 33.33%;
background-color: rosybrown;
}
.container div:last-child {
width: 66.67%;
background-color: seagreen;
}- 예시와 같이 퍼센트를 사용해서 그리드의 크기를 지정해주면 사용자가 사용하는 브라우저의 크기에 맞춰서 적응형으로 개발이 가능합니다.
- 브라우저의 크기가 변하거나 사용하는 디바이스의 크기에 맞춰서 자동으로 변하는 컨텐츠를 기대할 수 있습니다.
2. 가변 마진과 가변 패딩 이해하기
2-1) 가변 마진
- 웹사이트의 요소에 마진과 패딩을 설정할 때는 모든 박스들을 감싸고 있는 wrap과 같은 요소들의 너빗값을 고려하여 요소의 마진값과 패딩값을 지정해야 합니다. 만약 너비값을 고려하지 않은 상태로 마진값과 패딩값을 설정하면 의도했던 대로 레이아웃이 나오지 않거나 박스들이 밀려 아래로 떨어지는 문제가 생길 수 있습니다.
- 반응형 웹사이트에서는 모든 요소가 가변적이어야 합니다. 구조상의 간격 역시 마찬가지입니다. 기존의 고정되어 있는 마진을 변할 수 있게 설정해줘야 합니다. 가변 마진은 가변 그리드에서 사용했던 공식과 같습니다.
(가변 마진을 적용할 마진값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 마진값
2-2) 가변 패딩
- 기본 방법은 가변 그리드 공식을 이용해서 적용시켜줍니다.
(가변 패딩을 적용할 패딩값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 패딩 % 값
- 두 번째 방법은 박스에 패딩을 적용하더라도 박스의 정해진 너빗값 이상이 되지 말아야 하는 경우에 이용하는 방법입니다.
(가변 패딩을 적용할 패딩값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 패딩 % 값
블로그 운영 x