CSS Responsive

Viewport

• content="width=device-width: 페이지의 너비를 기기의 뷰포트 너비대로 설정
• initial-scale=1.0": 처음페이지 로딩시 확대/축소가 되지 않은 원래 페이지의 사이즈를 사용하도록 설정

Grid-View

• box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다.

Media Query

/ For desktop: /
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
/ For mobile phones: /
[class*="col-"] {
width: 100%;
}
}

---

[class*="col-"] {
float: left;
padding: 15px;
}
-->class 이름에 'col-'이 들어가는 element에 style 적용

---

orientation: 가로인지 세로인지 판별하여 style을 적용

• landscape:가로 모드
• portrait:세로 모드

---

background-size

• contain
• cover

--

picture

: 뷰포트(viewport)의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해준다.

• picture 요소는 0개 이상의 source 요소와 하나의 img 요소로 구성되며, 브라우저는 source 요소 중에서 해당 뷰포트와 가장 잘 어울리는 source 요소를 다음과 같은 방법을 사용하여 선택합니다.

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
    <img src="/examples/images/people_200.jpg" alt="People">
</picture>