반응협 웹 구현 기법
반응형 웹을 구현하기 위한 다양한 기법들이 있습니다. 대표적으로 다음과 같은 기법이 존재합니다.
- 미디어 쿼리
- 유동형 그리드
- 유동형 이미지
이 기법들을 적절히 조합하여 반응형 웹을 구현할 수 있습니다.
이번 포스팅에서는 이 기법들 중 하나인 🌟 유동형 그리드 🌟에 대해 알아보려고 합니다.
유동형 그리드 (Fluid Grid)
나무위키에서 다음과 같이 설명합니다.
고정된 단위가 아니라 상황에 맞게 변할 수 있는 em이나 % 등의 단위를 사용하는 기법
즉, 유동형 그리드는 요소의 크기를 상대적인 비율로 지정하는 방식입니다.
유동형 그리드로 반응형 웹을 구현하기 위해 우리는 상대 단위에 대해 알아야합니다. 상대 단위는 대표적으로 em, rem, %, vh, vw 가 있습니다.
em 과 rem
em과 rem 모두 font-size를 기준으로 하는 상대적 단위를 나타냅니다.
이 개념을 알기 위해선 px과 em,rem의 차이를 알아야합니다.
px 과 em, rem
픽셀(px)은 절댓값입니다. 모니터의 크기 (해상도)에 상대적인 값을 가지기 때문에 브라우저의 root 글꼴 크기가 변하거나 브라우저를 확대/축소해도 폰트크기의 변화가 없습니다.
이와 다르게 em, rem은 브라우저의 크기와 글꼴 크기에 상대적으로 반응합니다.
그렇다면 em과 rem은 어떤 차이가 있을까요?
📐 em
em은 부모의 폰트 사이즈에 상대적으로 크기가 계산되어집니다.
예를들어,
<div style={{ fontSize:'16px' }}>
<div style={{ fontSize:'1em' }}>child</div>
</div>위와 같을 경우, child는 폰트 사이즈가 부모의 폰트 (16px) * 1 가 되어 16px이 적용됩니다.
그런데 여기서 부모 폰트가 16->20으로 바뀐다면 어떻게 될까요?
네. 자식도 거기에 맞춰 20*1=20px 이 적용됩니다.
여기까지는 어렵지 않습니다. 하지만 만약 자식태그가 한번 더 감싸지면 어떻게 될까요?
<div style={{ fontSize:'16px' }}>
<div style={{ fontSize:'2em' }}>
<div style={{ fontSize:'1em' }}>child</div>
</div>
</div>이제 다시 child의 폰트 크기를 계산해봅시다.
child의 부모는 font-size 가 2em 입니다. 이 값을 계산하기 위해 부모의 부모 폰트 사이즈를 확인해야합니다. 16px 입니다.
부모의 폰트 사이즈는 16*2 = 32px 와 같이 계산되어집니다.
이제 부모의 폰트사이즈를 알았으니 자식 폰트 사이즈를 계산합니다.
32px*1 = 32px 입니다.
이처럼, em은 부모의 폰트사이즈에 영향을 받아 계산되어집니다. 하지만 보시다시피 개발자가 폰트값을 계산해가며 사용해야하기 때문에 사용하기 어려움을 알 수 있습니다.
그래서 주로 사용되는 단위가 rem입니다.
📐 rem
rem과 em의 가장 큰 차이점은 단어에서 나타납니다. rem의 r은 root를 나타냅니다.
즉, Rem의 기준은 root의 font-size 입니다.
html의 최상단 요소는 html 태그이죠? 즉,html 태그의 font-size가 rem의 기준이 됩니다.
html{
font-size: 16px;
}보통 font-size의 기본 값은 16px이니 위와 같이 설정했습니다.
예제로 확인해보겠습니다.
<div style={{ fontSize:'3rem' }}>
<div style={{ fontSize:'2rem' }}>
<div style={{ fontSize:'1rem' }}>child</div>
</div>
</div>위와 같은 중첩 태그가 있을 때 child의 크기는 몇일까요?
html의 font-size가 16px이니 child는 16px*1 = 16px이 됩니다.
쉽죠?
em태그와 다르게 부모의 요소를 생각할 것도 없이 root의 font-size만 생각하면 되니깐요.
이러한 이유로 rem은 반응형 단위로 많이 사용되고 있습니다.
여기까지 font-size에 상대적인 반응형 단위들을 알아보았습니다.
지금부터는 상대적으로 변화하는 요소의 크기를 지정할 때 사용하는 반응형 단위들을 알아보겠습니다.
📐 %
% 단위는 레이아웃의 비율을 상대적으로 나타내기 위해 사용된다. 부모 요소를 기준으로 상대적인 값이 계산되어진다.
📐 vh,vw
%가 부모 요소를 기준으로 하는 상대적인 값이라면 vh,vw는 뷰포트 즉, 화면의 크기를 기준으로 계산되는 값이다.
vw (viewport width)
뷰포트 너비
100vw 라고 쓰게되면 라우저 너비 100%를 쓰겟다는것 (50vw 면 브라우저 너비의 반을 쓰겠다라고 지정하는 것)
vh (viewport height)
뷰포트 높이
100vh 라고 쓰게되면 라우저 높이 100%를 쓰겟다는것 (50vh 면 브라우저 높이의 반을 쓰겠다라고 지정하는 것)
결론
기본적으로 rem 단위를 사용하면서 전체적인 레이아웃을 구상하는데 있어서 %와 vh,vw를 적절히 사용해서 배치하며 반응형 웹을 구현할 수 있습니다.
참고
참고 자료 다음과 같습니다.
[반응형 웹] : 나무위키-반응형웹
[CSS 상대 단위 - em 과 rem] : https://www.daleseo.com/css-em-rem/
