CSS 동적 레이아웃을 적용하는 방법입니다. 미디어쿼리를 써서 여러 화면크기에 대응했다고 하더라도 레이아웃에 고정적인(픽셀) 값을 주면 안 좋은 결과가 나올 때가 많습니다. 가령 빈 공백이 생긴다거나 이미지가 지나치게 크게 보인다거나 하는 것처럼 말이죠.
화면의 넓이에는 '표준'이란것이 없습니다. 물론 1024, 1280, 1920 등 대표적인 것들이 있긴 하지만 이것이 사용자들의 다양한 디바이스 화면을 커버하지는 못합니다. 결국은 동적인 레이아웃(퍼센트, em)을 적용하는 것이 가장 좋은 방법입니다.
아래 CSS를 사용해 동적 레이아웃을 만들 수 있는 3가지 방법을 확인해 보세요.
동적인 레이아웃 값을 구하는 공식은 다음과 같습니다. 해당요소 / 전체내용 = 결과(%)
예를 들어 전체 폭이 1024픽셀이고 오른쪽 사이드 메뉴가 256픽셀이라면, 256/1024 = 25% 가 되므로 사이드 메뉴의 width 값을 25% 로 설정해 주면 됩니다.
계산한 결과값에 소수점이 생길 경우에는 반올림하여 사용해도 됩니다. 어차피 브라우저별로 이 소수점 값을 임의대로 처리하기도 하기 때문에 크게 신경쓸 필요는 없습니다.
이미지의 크기도 동적으로 변하게 할 수 있습니다. 이미지를 감싸고 있는 부모 요소의 크기를 고려하여 동적 레이아웃 공식을 똑같이 적용하면 됩니다. 그리고 아래 코드를 추가하면 이미지가 부모 요소보다 더 커지지 않도록 막아줄 수 있습니다.
img {
max-width: 100%;
}
폰트 크기를 동적으로 지정합니다. 폰트의 크기는 em을 사용합니다. 퍼센트 대신 em을 쓰는 이유는 관행 때문입니다. 일반적으로 블록요소의 폭(width)은 퍼센트로 설정하고 폰트의 크기는 em을 씁니다. 단, 특이한 케이스로 body의 font-size는 퍼센트를 사용합니다. (주로 100% 로 지정함) 1em에 해당하는 다른 단위의 값은 아래와 같습니다.
1em = 100% ≒ 12pt ≒ 16px
