https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상
CSS
3. Responsive Design
반응형 웹 (Responsive Web)
디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 웹사이트. 하나의 HTML 소스로 특정 장치에 최적화된 환경을 사용자에게 제공
미디어 쿼리 (Media Query)
미디어 타입
all, aural, braille, handheld, print, projection, screen, tty, tv, embrossed 등이 있다. 위 문법에서 미디어 타입은 1개만 사용가능한 것은 아니며 쉼표(,)를 사용하여 여러 타입을 적용할 수 있다.
속성
width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, monochrome, resolution 등이 있다. 속성 명 앞에 min-, max- 를 붙여서 최솟값과 최댓값을 판단. 속성은 and 를 사용하여 여러 속성을 적용할 수 있고 min-, max- 와 and 를 사용하여 범위를 설정할 수도 있다.
<html>
<head>
<style>
div {
width: 100%;
height: 100%;
}
@media screen and (max-width:200px) {
div {
background-color: blue;
}
}
@media screen and (min-width: 200px) and (max-width:300px) {
div {
background-color: red;
}
}
@media screen and (min-width: 300px) {
div {
background-color: green;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
기기별 미디어 쿼리(Andy Clarke)
Andy Clarke라는 사람이 작성한 기기별 미디어 쿼리. 데스크탑 브라우저, iPhone, iPad, 스마트폰으로 구분되어 있다.
<style>
/* 스마트폰 가로+세로 */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {}
/* 스마트폰 가로 */
@media only screen and (min-width: 321px) {}
/* 스마트폰 세로 */
@media only screen and (max-width: 320px) {}
/* iPhone4와 같은 높은 크기 세로 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {}
/* iPhone4와 같은 높은 해상도 가로 */
@media only screen and (min-width: 640px) {}
/* iPad 가로+세로 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
/* iPad 가로 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}
/* iPad 세로 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}
/* 데스크탑 브라우저 가로 */
@media only screen and (min-width: 1224px) {}
/* 큰 모니터 */
@media only screen and (min-width: 1824px) {}
</style>
유동형 그리드 (Fluid Grid)
그리드의 폭을 고정값이 아닌 em, % 값으로 설정하는 것을 말한다. 기기별 가로 폭에 따라 칼럼의 크기가 상대적으로 변화할 수 있게 된다. 미디어 쿼리를 사용하여 반응적으로 그리드의 고정값을 변경시켜 주는 반응형 그리드도 있다.
<html>
<head>
<style>
div {
height: 100%;
float: left;
}
#grid_1 {
width: 30%;
background-color: green;
}
#grid_2 {
margin-left: 5%;
width: 45%;
background-color: blue;
}
#grid_3 {
margin-left: 5%;
width: 15%;
background-color: red;
}
</style>
</head>
<body>
<div id="grid_1"></div>
<div id="grid_2"></div>
<div id="grid_3"></div>
</body>
</html>
유동형 레이아웃 (Liquid Layouts)
레이아웃의 크기를 유동형 그리드와 같이 상대적 단위로 지정하여 웹의 크기에 따라 유동적으로 변화를 주는 레이아웃 기법. 반응형 그리드와 같이 미디어 쿼리를 사용하여 일정 크기가 되면 레이아웃 구조를 바꾸어 주는 방법.
<html>
<head>
<style>
div {
height: 50px;
float: left;
}
@media screen and (min-width:200px) {
div {
height: 100px;
}
#layout_1 {
width: 30%;
background-color: green;
}
#layout_2 {
margin-left: 5%;
width: 45%;
background-color: blue;
}
#layout_3 {
margin-left: 5%;
width: 15%;
background-color: red;
}
}
@media screen and (max-width:200px) {
#layout_1 {
width: 30%;
background-color: green;
}
#layout_2 {
margin-left: 5%;
width: 65%;
background-color: blue;
}
#layout_3 {
margin-top: 5%;
width: 100%;
background-color: red;
}
}
</style>
</head>
<body>
<div id="layout_1"></div>
<div id="layout_2"></div>
<div id="layout_3"></div>
</body>
</html>
유동형 레이아웃의 대표적인 패턴으로 LukeW 5가지 패턴이 있다.
Mostly Fluid
가장 작은 화면을 제외한 대부분의 작은 화면에서 유동형 그리드와 유동형 이미지를 사용하고 레이아웃은 그대로 한다. 하지만 가장 작은 화면에서는 수직으로 칼럼을 배치하는 구조
Column Drop
화면이 작아짐에 따라 부차적인 칼럼들을 아래로 떨어트리는 방법. 대부분의 칼럼의 폭은 화면 크기가 달라져도 변함이 없다.
Layout Shifter
다양한 기기에 따라 각기 다른 레이아웃을 보여주는 패턴. 복잡하고 많은 작업이 필요하지만 혁신적인 디자인을 사용자에게 제공할 수 있다.
Tiny Tweaks
하나의 칼럼을 사용하는 패턴. 변화가 거의 없으며 주로 글내용을 중시하는 웹페이지에서 사용.
Off Canvas
큰 화면에서는 모든 칼럼을 보여주고 작은 화면에서는 하나의 메인 칼럼을 보여주며 나머지 부가적인 칼럼들은 화면 밖에 숨기는 패턴. 숨겨져 있는 칼럼들은 필요 시 접근.
유연한 이미지 (Flexible Image)
모든 화면에서 볼 수 있게 화면 폭보다 큰 이미지를 사용하고 max-width: 100%, height: auto 를 주는 방법. 화면폭에 맞게 단순히 이미지의 가로세로가 변화하며 유연한 이미지가 완성된다.
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<img alt="이미지" src="/image.png">
</body>
</html>
https://www.nextree.co.kr/p8622/ - 참고
