22일차 - 반응형 웹디자인을 위한 글꼴 크기옵션 조정, 미디어 쿼리 등
반응형 웹디자인을 위한 글꼴 크기옵션 조정
21일차에는 반응형 웹디자인을 위한 글꼴 크기옵션에 대해 알아봤고, 오늘은 저번에 수업을 하며 만든 웹페이지의 글꼴 크기 옵션에 변화를 줬다.
%값도 사용하고, rem을 주로 사용하여 수정했으며, HTML 요소에는 지정된 글꼴 크기가 없이 사용자가 지정한 글꼴 크기에 맞춰 여러 환경에서 적절한 글꼴크기가 나올 수 있도록 했다.
위 이미지는 수정된 완성본이고, 브라우저의 크기를 줄일수록 글꼴크기가 조금씩 변화하는 와중에 캡쳐한 모습이다.
변화된 CSS 코드 분석
헤더섹션은 섹션의 높이를 5rem으로 수정하여 사용자가 설정한 글꼴 크기에 따라 적정한 높이를 유지할 수 있도록 했다. 패딩은 좌우에 5%의 값을 줘서 높이와 마찬가지로 사용자가 설정한 글꼴 크기에 따라 적당한 패딩을 유지할 수 있도록 했다.
로고 부분의 왼쪽 여백은 기존과 동일하게 유지했고, 글꼴 크기를 1.5rem으로 설정했다. 그래서 크롬 브라우저에 기본적으로 설정되어 있는 사용자 지정 글꼴크기인 16px의 1.5배인 24px로 표출이 되었다.
오른쪽의 사이트메뉴의 좌우 여백에도 1rem을 설정하여 장치가 달라져도 적정 여백을 유지할 수 있도록 했고, 사이트메뉴의 글꼴 크기도 1.25rem으로 수정해주었다.
메인섹션의 타이틀인 h1태그에도 3rem의 글꼴 크기를 설정하여 16px의 3배인 48px로 표출되도록 했다.
그리드를 적용한 음식메뉴 부분의 너비는 기존과 동일하게 80%로 유지했고, 간격은 1rem을 설정하고 상하 여백으로 2rem을 주어 사용자가 설정한 글꼴 크기에 맞춘 적정한 간격 및 여백을 유지하도록 했다.
음식이름의 글꼴 크기는 1.5rem으로 설정했으며, border-radius 같은 속성값들은 장치가 달라져도 모양이 변하는 걸 원치 않았기 때문에 8px 값을 유지했다.
음식이미지의 높이는 15rem을 설정하여 글꼴 크기에 맞춘 적정한 이미지가 표출되도록 했고, 카트에 담는 앵커태그의 패딩으로 .5rem(0.5rem)을 설정하여 크지도, 작지도 않은 적당한 패딩을 유지하도록 했다.
반응형 글꼴크기에 대해서
글꼴 크기 옵션인 %와 em은 부모 요소의 글꼴크기와 관련이 있다고 보았다. 그래서 부모 요소 글꼴이 16px일 때 특정 요소에 100%나 1em의 글꼴 크기를 지정하면 16px이 표출되고, 200%나 2em를 지정하면 2배인 32px로 표출된다.
또한, 사용자가 글꼴 기본 크기를 16px로 해놨고, 최상위 요소(HTML)에 별도의 글꼴 크기를 지정하지 않았을 때, 특정 요소에 1rem을 설정하면 사용자가 설정한 16px이 표출되고, 2rem을 설정하면 32px이 표출된다.
그래서 rem을 이용하면 최상위 요소의 글꼴 크기나 사용자가 지정한 기본 글꼴 크기에만 영향을 받기 때문에 사이트가 커져서 복잡해질 일이 없게 된다.
만약 글꼴의 크기가 아닌 부분에 %값을 설정하면 마찬가지로 부모 요소의 특성을 참조하게 된다. 예를 들어 패딩에 %값을 사용하면 부모 요소의 패딩을 참조하는 것이다. 그러나 em, rem은 글꼴 외 다른 요소에 적용되어도 항상 글꼴 크기 속성값을 참조하게 된다. 다시 말해 em은 요소 자체의 글꼴 크기를 참조하여 패딩값을 지정하고, rem은 최상위 요소에 설정된 글꼴 크기를 참조하여 패딩값을 지정한다는 것이다.
위 이미지는 아까 코드분석에서 봤던 메인섹션의 음식메뉴 내 앵커태그 부분인데, 0.5rem을 적용했고, 16px로 지정된 기본 글꼴 크기에 맞춰 적당한 패딩값이 나온 것을 보여주고 있다. 글꼴이 16px이기 때문에 상하좌우 모두 절반인 8px의 패딩이 적용되어 있다.
정리해보면, 부모 요소에 설정된 글꼴 크기가 없어 사용자가 설정한 20px의 크기가 있는 페이지의 특정 요소에 글꼴 크기를 200% 적용했다면, 이 글꼴 크기는 40px인 것이고, 하위 요소의 패딩값으로 0.1em을 설정했다면 이 요소의 패딩은 40px에서 계산하여 표출이 된다. 만약 패딩에 0.1rem을 설정했다면 200%인 40px에서 계산하는 것이 아니라 사용자가 설정한 20px에서 계산하여 표출이 된다.
데스크탑 우선 디자인과 모바일 우선 디자인
데스크탑 우선 디자인은 우리가 흔히 쓰는 데스크탑이나 랩톱에 맞춘 디자인이며, 이는 전통적인 접근 방식에 해당하고 사무실에 기반을 둔 고객에 집중된 형태를 보이고 있다. 또, 기능이 많은 웹사이트의 제작이 가능해진다.
모바일 우선 디자인은 스마트폰이나 태블릿 등에 맞춘 디자인이며, 좀 더 기능적인 접근 방식을 가졌고, 라이프스타일이나 뉴스를 자주 보는 고객에 알맞은 형태이며, 모바일 장치의 제한된 공간에서 주요 콘텐츠를 고객에게 보여줘야 하는 특성 때문에 '콘텐츠 우선'이라는 특성이 존재하는 디자인이다.
반응형 웹디자인을 위한 미디어 쿼리
미디어 쿼리는 반응형 웹디자인의 전부라 할 수 있는데, 위 이미지처럼 @media를 추가하여 최소 너비나 최대 너비를 지정하여 그 너비가 되면 레이아웃의 배치가 변하도록 하는 CSS 코드이다.
이 미디어 쿼리를 작성하면 브라우저에게 이 미디어 쿼리가 어떤 장치에서 실행될지 알려주고, 쿼리가 활성화되면 실행될 코드를 추가해준다.
데스크탑 우선 디자인에서는 최대 너비 키워드를 주로 사용하고, 모바일 우선 디자인에서는 위 이미지처럼 최소 너비 키워드를 주로 사용한다.
이 데스크탑 우선 디자인은 웹사이트 제작이 데스크탑에서 모바일로 넘어가므로 1200px이나 768px 이하에서 미디어 쿼리 내 코드를 실행하는 방식으로 사용하며, 모바일 우선 디자인은 웹사이트 제작이 모바일에서 데스크탑으로 넘어가므로 768px이나 1200px 이상에서 미디어 쿼리 내 코드를 실행하는 방식으로 사용한다.
중요한 점은, 기본적인 전체 CSS 코드는 유지된 채로 특정 너비 이상이나 이하 환경에서 새로 추가한 미디어 쿼리 내 코드가 실행이 되는 원리라는 것이다.
자주 사용되는 미디어 쿼리의 너비 한계점
한계점에는 장치에 따라 여러가지가 있지만, 보통 스마트폰은 480px, 태블릿은 768px을 사용하며, 노트북은 1024px, 데스크탑 및 그 이상의 TV 화면 등은 1200px을 사용한다.
