멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 13 (미디어 쿼리, 반응형 웹, 컴포넌트 스타일링)

 

 

목차

• meta 요소
• 미디어 쿼리
• 반응형 웹
• 컴포넌트 스타일링
• 오늘 하루를 돌아보며

 

meta 요소

meta는 문서를 설명하는 데이터인 메타 데이터를 담는 요소다.

 

<meta charset="UTF-8" />에서 charset 속성은 웹 페이지의 문자 인코딩을 지정한다.

UTF-8은 유니코드(Unicode)를 위한 가변 길이 문자 인코딩 방식이다. 전 세계의 거의 모든 문자와 기호를 표현할 수 있다. 그래서 title 요소를 meta 요소보다 위에 선언하면 탭 제목이 깨질 수 있다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0" />에서 viewport는 브라우저에 보이는 영역이다. 뷰포트의 width를 기기 크기에 맞추고, initial-scale(초기 배율)을 1로 맞춘다는 뜻이다. initial-scale을 설정하는 것은 핀치 제스쳐(줌인 줌아웃)를 할 때 2배, 3배, 0.5배로 확대하거나 축소할 수 있는데, 그 초기 값을 설정한다는 뜻이다.

 

미디어 쿼리

미디어 쿼리를 지정하는 방법은 다음과 같다.

• link 요소의 media 속성을 사용하여 미디어 종류에 따라 선택적으로 CSS를 적용할 수 있다. 예를 들어, media의 속성 값을 screen으로 주어서 스크린에 보일 스타일을 지정하고, print 속성 값을 지정하여 인쇄할 때의 스타일을 지정하여 미디어 종류에 따라 다르게 보이도록 지정할 수 있다. 배경이 까맣거나 스타일이 많은 페이지라면 인쇄할 때 잉크 낭비가 심할 수 있으니 그런 부분을 고려해서 media print에서 스타일을 다르게 지정할 수 있다.
• style 태그에서도 media 속성을 사용할 수 있다.
• @media at-sign 규칙을 사용하여 미디어 종류에 따라 선택적으로 CSS를 적용할 수 있다. min-width를 사용해서 뷰포트에 반응하는 반응형으로도 만들 수 있다.

/* 모든 매체에 공통적으로 적용되는 CSS */
body {
  color: #000;
}

/* 미디어 타입이 screen이면서 기기 width가 640px 이상일 때 적용되는 CSS */
@media screen and (min-width: 640px) {
  body {
    color: #ffc;
  }
}

 

뷰포트 반응형을 만들 때 viewport meta 태그가 없으면, 브라우저의 크기를 줄일 때는 잘 작동하는 것처럼 보이지만, 기기 width가 다른 상황에서 본다면 적용되지 않는다.

모바일 기기는 물리적인 해상도와 논리적인 해상도가 다르다. 뷰포트 width에 pixel-ratio를 곱해서 논리적인 해상도를 받는다. 이때 물리적인 해상도를 알려주는 게 viewport meta 태그다.

반응형을 확인할 때는 브라우저에서 뷰포트를 늘였다 줄였다 하면서 확인하는 게 아니라, '개발자 도구'에서 반응형 모드로 확인해야 한다. 그리고 다양한 기종의 기기로 확인해야 한다.

 

orientation은 화면의 방향에 따라 나눠서 구현할 수 있다. 속성 값은 landscape(가로 보기)와 portrait(세로 보기)을 지원한다.

 

이 외에도 다양한 조건들을 사용할 수 있다. 더 자세한 내용은 MDN 홈페이지에서 확인할 수 있다.

@media - CSS: Cascading Style Sheets | MDN

 

 

반응형 웹

기기 width별로 조건을 줄 때 걸러내는 지점을 중단점(breakpoint)이라고 한다.

tailwindcss에서 이런 중단점들을 rem 단위로 알려준다. - https://tailwindcss.com/docs/responsive-design

 

clamp()는 반응형 크기를 설정하는 CSS의 함수다. 함수 값은 최소 값, 다이나믹 사이즈(vw), 최대 값을 갖는다.

/* 글자 크기를 뷰포트 사이즈에 따라 다르게 지정한다. */
p {
  font-size: clamp(1rem, 2.5vw, 2rem);
}

 

calc()는 사칙연산을 사용할 수 있는 CSS의 함수다. 커스텀 속성을 사용해서 값을 계산할 수도 있다.

 

컴포넌트 스타일링

컴포넌트를 구분하는 눈이 생겨야 한다. 부분에서도 반복되는 것이 있지만, 전체 페이지에서 반복되는 제목, 버튼, 입력 서식 등도 있다. 반복되는 모든 부분을 컴포넌트화 해놓아야 한다.

 

컴포넌트 베이스로 마크업을 하고 스타일링을 하면 페이지 전체를 한 번에 마크업하려고 할 때보다 훨씬 쉽게 할 수 있다. 부품별로 나눠서 만들어 놓고, 하나씩 가져다가 조립하면 된다. 컴포넌트를 잘 구분했다면 조립하는 과정에서 마크업을 수정하지 않아도 된다. 마크업을 잘 했다면, 스타일링할 때 마크업을 뜯어고칠 필요도 없어진다. 마크업을 바꾸지 않아도 스타일링으로 얼마든지 시안대로 만들 수 있다!

 

반응형 웹을 만들기 위해 사용자 지정 속성도 많이 활용하게 된다. 색깔이나 길이 등을 사용자 지정 속성으로 지정하면 모든 css 파일들을 다 뒤져가면서 속성 값을 바꾸지 않아도, 한 곳에서 수정하면 전체에 다 적용된다.

 

오늘 하루를 돌아보며

오늘 가장 크게 느낀 것은 컴포넌트를 구분하는 눈이 생겨야 한다는 것이다. 반복되는 것을 많이 찾아봐야겠다. 어떻게 컴포넌트화할 수 있을지 사이트에 접속했을 때마다 고민해 봐야겠다.

 

디자이너가 웹스럽게/앱스럽게 디자인해주면, 웹과 앱의 간극을 프론트엔드 개발자가 채워야 한다. 이럴 경우에 코드가 복잡해지고, 유지보수도 힘들다. 반응형 디자인은 UI가 심플해야 하고, 한 화면에 많은 기능을 떼려넣지 말아야 한다. 디자인을 직접 하게 되지는 않겠지만, 기억하고 있으면 도움이 될 것이다.