Responsive Web Design

ViewPort

🤔 정의

• 사용자가 웹페이지에서 볼 수 있는 영역
• 디바이스(pc, tablets, phone...) 등에 따라 달라짐

❓ 사용하는 이유

• 원래는 웹페이지를 보여주는 디바이스는 pc하나였으나
• tablets, phone 등이 나오며 디바이스에 따라 화면을 달리 보여줄 필요가 생김

🔧 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

meta tag 를 통해 브라우저엥 page 의 치수와 비율을 어떻게 조절할 건지 전달함

width=device-width

page 를 디바이스 화면 크기에 맞춤

initial-scale=1.0

초기 zoom 을 1.0 으로 설정

Media Query

🤔 정의

• 특정 조건이 만족될 때만 css 속성이 적용되도록 하는 기술

ex>

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

=> 화면 너비가 600px 이거나 작을 때 body 색 변경

❓ 사용하는이유

• 디바이스에 따라 다른 화면을 사용자에게 보여주기 위해

📱 자주사용되는 Breakpoints

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

pc, 모바일 두개로만 분류한다면 768px 를 Breakpoints 로 지정하면 될듯

🖼️ Using The width Property

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

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

max-width 를 100% 로 설정하면 화면이 작아져 width 로 설정한 크기보다 작아져야 하면 크기가 줄어든다.
참고