오늘 한 것

반응형 웹

동일한 마크업으로 viewport에 따라 다른 레이아웃으로 보여줄 수 있는 웹을 말한다.
작은 디바이스 레이아웃에서 확장시키는 것을 권장한다.(하지만 현업에서는 대부분 데스크탑 레이아웃을 이미 갖고있어서 큰 디바이스에서 작은 디바이스로 확장시키는 과정도 많이 사용 중이다.)

@media queries

@media queries의 내용은 다음과 같다.

@media all and (min-width: 100px){
    사용자 해상도가 100px 이상일 때 코드 실행
    }
@media all and (min-width: 100px) and (max-width: 200px){
    사용자 해상도가 100px 이상이고 200px 이하일 때 코드 실행
}
@media all and (min-width: 201px){
    사용자 해상도가 200px을 초과할 때 코드 실행
}

위의 예처럼 사용자 viewport에 따라 다른 코드를 실행함으로써 layout 등을 유동적으로 보여줄 수 있다.

반응형 img

img {
  max-width: 100%;
  height: auto;
}

그냥 width로 크기를 지정할 경우 원본 이미지보다 큰 viewport일 경우 이미지가 깨질 수 있기 때문에 이미지의 최대 크기만큼만 크기를 지정한다.

이미지 이슈

디바이스나 환경마다 이미지의 용량 최적화가 필요하다. 그렇지 않다면 필요 이상의 큰 용량의 크기를 가진 이미지를 불러오느라 성능이 저하되며 클라이언트의 데이터 사용량이 필요 이상으로 증가한다.
고해상도 디스플레이(Retina Display)가 들어오면서 비트맵 이미지가 깨지는 현상이 발생하기 때문에 고해상도 이미지가 필요하다. 이미지를 백터 이미지, 초고해상도 이미지로 준비하고 상황에 따라 다르게 뿌려줄 필요가 있다.(<img srcset>을 이용할 수 있다).
Art direction: 기기 지원 해상도에 비해 불필요하게 해상도가 높은 이미지를 쓰는 경우 클라이언트의 데이터 낭비로 직결된다.

<img srcset> / <picture> (srcset보다 직관적이긴 하지만 현업에서 잘 쓰이지 않음(IE11 호환 안 된다.)등을 사용한다.

참고: 반응형웹디자인

백터 이미지 사용

<svg width="50" height="50" viewBox="0 0 50 50" fill="none">
  <title>페이지 상단 이동</title>
  <circle cx="25" cy="25" r="25" fill="#C8CDE2" />
  <path
    d="M25 38C25.6072 38 26.1 37.5147 26.1 36.9167V15.3047L34.1037 23.5803C34.3198 23.804 34.6097 23.9167 34.9001 23.9167C35.1723 23.9167 35.4457 23.8175 35.6585 23.6177C36.0985 23.2049 36.1156 22.5192 35.6965 22.0858L26.556 12.6348C26.1402 12.2259 25.588 12 25 12C24.412 12 23.8598 12.2259 23.4259 12.6538L14.3035 22.0864C13.8844 22.5197 13.9015 23.2055 14.3415 23.6182C14.7815 24.031 15.4783 24.0142 15.8969 23.5808L23.9 15.2706V36.9167C23.9 37.5147 24.3928 38 25 38Z"
    fill="#0F0F0F"
  />
</svg>

title을 통해 <img>의 alt 속성의 기능을 대체할 수 있다.

접근성 관련

<button
  type="button"
  class="button is-close-menu"
  title="메뉴 닫기"
  aria-label="메뉴 닫기"
>
  <span class="close" aria-hidden="true">×</span>
</button>

aria-label로 메뉴 닫기 의미를 전달하며 x기호를 aria-hidden으로 읽지 못하게 하여 접근성을 높인다.

오늘 느낀 것

반응형 웹을 공부한다. 생각보다 할만 하지만 CSS의 양도 늘어나고 기기마다의 해상도 차이 문제로 골치 아플 것 같다.
EDIYA 홈페이지 클론코딩을 하는데 재미있다. 근데 당분간 EDIYA는 가기 싫을 것 같다.
오늘도 새로운 배움에 즐거웠다. 내일도 ‘즐코’

Nyong’s GitHub

Nyong's Blog

201102_TIL(반응형 웹)

오늘 한 것

반응형 웹

@media queries

반응형 img

이미지 이슈

백터 이미지 사용

접근성 관련

오늘 느낀 것