[HTML] px을 %로 바꾸기 - 가변 그리드

위의 내용은 <Do it! 반응형 웹 페이지 만들기> 책을 보고 공부한 것을 기억하기 위해 작성한 기록장이다.

 

1. px을 %로 바꾸기 - 가변 그리드

 

가변 그리드 공식

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

= 가변 크기의 % 값

 

 

---

Q. wrap 또는 wrapper라는 박스가 소스에 항상 있는 이유

 

웹사이트의 소스를 보면 wrap 또는 wrapper라는 아이디를 쓰는 <div> 태그로 모든 태그들을 감싸고 있는 소스를 자주 볼 수 있다. wrap 또는 wrapper라는 요소로 박스 전체를 감싸면 웹 문서 내용 전체의 크기나 배경색 등을 한꺼번에 조절할 수 있을 뿐만 아니라, 브라우저 화면 크기에 상관없이 웹문서의 내용을 중앙에 배치할 수도 있다. 또한 반응형 웹에서는 자식 박스들이 가변 크기로 설정되었을 때 무제한으로 늘어나는 것을 방지할 수 있을 뿐만 아니라 자식 박스들을 가변 크기로 만들 때 기준 크기로 사용할 수도 있다.

---

 

 

자식 박스의 가변 크기 설정

첫 번째 <div>태그의 가로 너비인 300px을 가변 크기로 변환 -> 300px / 900px

두 번째 <div>태그의 가로 너비인 600px을 가변 크기로 변환 -> 600px / 900px

 

결과

다음과 같이 화면 크기를 줄여도 화면이 잘리지 않고 브라우저의 비율에 맞춰 박스의 크기도 줄어드는 것을 확인할 수 있다.

 

2. 가변 마진과 가변 패딩 이해하기

 

반응형 웹페이지에서는 모든 요소가 가변적이어야 한다.

따라서 기존의 고정된 마진(여백) 또한 변할 수 있게 설정해 주어야 한다.

 

 

2-1 가변 마진 적용하기 

 

가변 마진 값 공식

(가변 마진을 적용할 마진값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) * 100 

= 가변 마진값

 

위의 예제에서 만든 첫번째 박스를 A박스, 두번 째 박스를 B박스라고 할 때 

margin값을 설정해 두 박스 사이의 공간을 만들어 주려고 한다.

 

이 때 360px은 wrap의 너비 90% = 960px에서

wrap의 div클래스의 너비 31.25% = 300px 두 개를 뺀 여백 값이다.

 

결과

 

 

2-2 가변 패딩 적용하기

 

가변 패딩 공식

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

= 가변 패딩 %값

 

 

결과

고정 크기의 마진과 패딩을 위해 calc함수 이용하기

width: calc(100%-100px);

 

calc함수를 이용해 총 너비값에서 왼쪽,오른쪽 패딩값을 더한 값(100px)을 뺀 값을 너비 값으로 설정

-> 즉, 마진값을 50px로 설정한 예제

 

결과

웹 브라우저 크기를 변화하여도 마진의 크기는 유지된 채 박스의 크기만 조절되는 것을 확인할 수 있다.

 

---

 

Q. width와 max-width의 차이점

width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만, max-width 속성은 속성값을 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않는다.

 

---

 

Q. 상/하 퍼센트 패딩 값의 기준점

상/하 퍼센트 패딩 값은 해당 요소의 부모 요소 가로 너비를 기준으로 한다.

 

---