기술이 발전함에 따라 다양한 크기의 스크린을 가진 기기들이 등장하게 되고… 사용자는 그냥 쓰기만 하면 되지만 개발자는 다르쥐.. 이번에 나온 갤럭시 폴더블… 부들부들… 그건 또 반응형으로 어떻게 만들지?ㅋㅋㅋㅋ

여튼.. 스크린 크기에 상관없이 시각적으로 가독성 좋은 페이지를 만들기 위해 도입된 것이 바로 반응형 웹디자인이다! 개발자는 웹 사이트의 콘텐츠 크기와 웹 사이트가 보여지는 스크린의 크기에 따라 반응형 구조를 짜야 한다.

먼저 콘텐츠의 크기에 따라서 정리해보았다!

컨텐츠의 크기

콘텐츠의 절대 수치

px을 생각해보자면.. 딱 그 만큼의 크기를 차지하는 hard한 개념이다. 스크린의 크기가 달라져도 원래 정해진 px만큼의 자리를 차지하게 된다. 이걸 보완하려고 나온게 CSS에서의 상대적인 측정값이다. px과는 다르게 상대적인 측정값을 쓰게 되면 콘텐츠의 크기가 스크린의 크기나 레이아웃에 얽매이지 않게 된다.

콘텐츠의 상대 수치

• em : 사용한 font의 크기를 토대로 변화하는 값. 브라우저에서 기본 폰트가 16px이라면 1em은 16px이다.
• rem : em과 비슷하지만, root element(html)의 font size를 참조한다는 점에서 다르다.

퍼센트

width나 height, padding, border, margins와 같은 box model 값에 자주 적용 된다. 퍼센트가 padding과 margin에 적용될 땐 부모 div의 width값을 토대로 계산이 된다! padding과 margin의 세로값 또한 부모div의 width값을 토대로 계산이 됨..height이 아니라~ 오 씐기씐기!

최대값과 최소값

상대적인 값을 쓸 때, 우리는 최대값과 최소값을 이용해 콘텐츠의 크기를 제한할 수 있다. 예를 들어…

미디어쿼리

웹사이트의 콘텐츠를 다양한 스크린 사이즈에 맞게 적용시키는 것이 바로 CSS의 미디어쿼리다. CSS가 스크린의 크기를 감지해서 그 스크린의 가로사이즈에 맞게 스타일을 적용시키는 것이 바로 핵심! 용어들을 한번 알아볼까?

그 전에 예시 코드 하나 투척쓰!

@media only screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

@media

미디어쿼리 시작할때의 약속! 저렇게 시작해야 한다~~

only screen

어떠한 장치를 써도 이 법칙을 따라야 한다는걸 명시한다. only가 왜 쓰였냐.. 초창기 미디어 타입에는 screen 말고도 handheld, print가 있었는데 지금의 CSS 법칙은 다른거 다 제끼고 only 스크린에 적용된다는 것!

and (max-width: 480px)

CSS법칙이 가로길이 480px이거나 그것보다 더 작은 것들에 적용이 된다는 것. 저 가로길이 이후 중괄호를 열어서 값에 변화를 주면 사용자의 스크린 크기가 480px보다 작아졌을때 원래의 css값이 아닌 미디어쿼리에 적용한 새로운 값이 적용된다.

Range(범위)

@media only screen and (min-width: 320px) and (max-width: 480px) {
}

max 뿐만 아니라 min 값까지 동시에 줄 수 있다! 저건 무슨 뜻이냐면.. 스크린 크기가 320px과 480px 사이일때 저걸 적용해라 라는 뜻..!

DPI(Dots Per Inch)

고해상도 스크린의 반응형 디자인을 하기 위해 고안된 모델. min 혹은 max-resolution을 쓴다.

@media only screen and (min-resolution: 300dpi) {
    /* CSS for high resolution screens */
}

사실 코드아카데미 사이트를 보며 여기까지 정리해봤는데… DPI 2번문제에서 안 넘어가서.. 그 다음껄 정리를 못하고 있다. 일주일 무료기간 끝나면 20만원 과금이 되서 미리 손절해야 하는데!

여튼.. 정리는 이쯤에서 마치고 실제 프로젝트에 적용한 결과물을 보자

현재 우리두리닷컴 페이지의 메인이다.

다시 한번 말하지만 절대 이 이름은 내가 지은게 아니다!

여튼 화면 크기가 줄어들 때 Navbar의 글씨가 로고로 바뀌는걸 구현하고 싶었다

.logo_wrap {
        img {
          width: 100px;
          display: none;
          @media only screen and (max-width: 690px) {
            display: block;
          }
        }
        h1 {
          font-size: 35px;
          font-weight: 500;
        }
      }

@media only screen and (max-width: 690px) {
  .logo_wrap {
    h1 {
      display: none;
    }

    // #image_logo {
    //   display: block;
    // }
  }
}

원래는 logo_wrap 클래스 내부에 h1만 있었으나, img태그를 추가했음 그리고 img에는 display: none이라는 효과를 줘서 가렸음 visibility: hidden이라는 속성도 있지만, 그걸 쓰면 화면엔 안 보이지만 자리차지는 한다. 완전 눈속임ㅋㅋㅋㅋ

그래도 언제 한번 쓸 일이 있었으면 좋겠다~ 까먹지 않게!

여튼.. 스크린의 가로길이가 690px이 되는 순간, wooridoori.com이라는 글자가 사라지고 로고가 뜨게 하고 싶었다! 처음엔 h1과 같이 아래에 미디어쿼리 효과를 따로 줬지만 이미지는 뜨지 않았다. 아무래도 우선순위에서 밀려서 그런것 같았다(순규님 왈) 그래서 img태그에 직접 미디어쿼리를 주니까 먹혔다!

화면을 줄이면…

뙇! 이렇게 WD 로고가 뜬다!!! 반응형을 한번도 써보지 않아서 어렵게만 생각했었는데.. 생각보다 괜찮네? 이번에 간단하게 함 해봤으니까 다음번에는 좀 더 자연스럽게 콘텐츠 크기가 변화할 수 있도록 적용해보는게 목표!

Reference

• codeAcademy