[HTML5 & CSS3] 가변 레이아웃과 가변 요소

▶ 가변 레이아웃과 가변 요소

가변 그리드를 사용하면 사이트에 접속하는 브라우저의 너비에 따라 웹 요소들의 너비가 유동적으로 바뀐다. 이때 웹 요소 중 너비 값을 가진 요소들도 브라우저 너비가 바뀔 때 함께 바뀌어야 자연스럽게 표현될 수 있다.

​

​

​

*가변 글꼴

텍스트 크기를 픽셀(px) 단위로 지정하면 크기가 고정되기 때문에 화면 크기가 작은 기기에서는 매우 작게 표시된다. 따라서 반응형 웹 디자인을 위해 가변 그리드 레이아웃을 사용할 때는 글자 크기도 유동적으로 바뀌어야 한다. 이것을 '가변 글꼴'이라고 한다. 가장 많이 사용하는 단위는 em 과 rem 이다.

​

-em 단위

em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받는다. 즉, em 단위를 사용하면 부모 요소의 크기에 따라 자식 요소의 글자 크기가 바뀌는 것이다. 이렇게 하면 em 수치가 계속 달라진다는 단점이 있다.

em 단위 사용하기

<style>
   .header-text {
      font-size: 2em;
   }
   .content {
      font-size: 1.5em;
   }
   .right-side {
      font-size: 1.5em;
   }
   footer {
      font-size: 1.5em;
   }
</style>

 

​

-rem 단위

em의 단점을 없애기 위해 만든 단위가 rem이다. rem에서 r은 루트(root)를 뜻하며 rem은 처음부터 기본 크기를 지정하기 때문에 중간에 기본 값이 바뀌지 않는다.

<style>
   body {
      font-size: 16px;
   }
   .header-text {
      font-size: 2rem; ①
   }
   .fluid-text {
      font-size: 1.5rem; ②
   }
</style>

 

​

​

*가변 이미지

이미지의 경우, 웹 문서에 삽입할 때부터 이미지의 크기가 정해져 있기 때문에 브라우저 창의 크기가 변하더라도 이미지의 너비 값은 바뀌지 않는다. 그래서 가변 그리드 레이아웃에서 이미지의 너비가 브라우저 화면의 너비보다 클 경우, 브라우저 화면의 너비를 줄이면 이미지의 일부가 가려진다.

​

<style>
   .content img {
      max-width: 100%;
      height: auto;
   }
</style>

 

​

-화면 해상도와 화면 너비에 따라 이미지 지정하기

<picture> <source srcset="images/shop-large.jpg" media="(min-width:1024px)"> <source srcset="images/shop-medium.jpg" media="(min-width:768px)"> <source srcset="images/shop-small.jpg" media="(min-width:320px)"> <img src="images/shop.jpg" alt="fill with coffee" style="width:100%;"> </picture> ​

​

 

​

*가변 비디오

가변 이미지와 마찬가지로 비디오도 화면의 너비가 달라질 때마다 비디오의 너비가 늘어나거나 줄어들 수 있도록 해야 한다. HTML5에서 동영상을 삽입할 때는 기본적으로 <video> 태그를 사용하므로 CSS를 사용해 max-width 속성을 100%로 지정하면 웹 문서 안에서 크기가 적절히 조절된다.

​

<style>
   video {
      max-width:100%;
   }
</style>
<video src="cars.mp4" controls></video>

max-width:100%로 설정한 가변 비디오를 삽입한 예제이다. 크롬 개발자 도구의 디바이스 도구를 이용해 PC와 태블릿, 모바일 크기에서 비디오 화면 크기가 적절히 조절되는 것을 볼 수 있다.