반응형 디자인 개요
- 다양한 화면 크기는 뷰포트를 이야기함, 이는 모바일 화면과 PC화면이 다르기에 적용되는 이야기임
- 모바일 기기와 웹 사이트로 보는 이미지와 크기가 다 다름
- 작은 기기를 위해서 디자인을 수정해야 하는데 그에 맞게 반응형 디자인을 써야함
- 적응형 디자인은 반응형 디자인과 어느정도 반대되는 개념임
- 하지만 적응형 디자인도 반응형까진 아니어도 디바이스에 따라서 아예 웹페이지를 따로 만드는 것을 적응형 디자인이라고 함
- 적응형은 아예 다른 CSS파일이 있고 반응형의 경우 같은 CSS 파일에서 그 스타일링을 적용을 다르게 처리하는 방법임
- Content에 대한 레이아웃이 계속 변하는 것이 반응형 디자인의 포인트임
- 개발자 도구에서 직접 반응형 스타일을 다 확인해볼 수 있음
- 동적으로 레이아웃이 뷰포트가 변경되는 것임
- 참고자료
Media Query @media - 1
- 반응형 처리를 하는데 쓰는 것을 미디어 쿼리라고 함, 반응형 웹 디자인의 적합한 문법임
- 미디어 쿼리 안에 기본적인 CSS 문법을 그대로 작성해서 쓰면 됨
- 미디어 타입의 들어갈만한 것과 함께 여러가지 조건 및 규칙을 작성해서 쓸 수 있음
- 아래의 예시와 같이 뷰포트에 따라서 바뀌게끔 처리할 수 있음, 유의할 점은 안에 똑같은 셀렉터와 문법을 써야함
- 아래 예시는 결국 최대 300px까지 배경색이 tomato이고 그 이후의 값은 앞서 설정한 기본 body 배경색이 되는 것임을 의미함
- 예시
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="main.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZeroBase</title>
</head>
<body>
<h1>반응형 디자인 연습</h1>
</body>
</html>body {
background-color: blanchedalmond;
}
@media screen and (max-width: 300px) {
body {
background-color: tomato;
}
}Media Query @media - 2
- 여러가지 조건을 걸어서 미디어 쿼리를 통해서 반응형 디자인을 줄 수 있는데 아래 예시와 같이 하게 된다면 300이상 500이하의 값에만 배경색이 바뀜
- 예시
body {
background-color: blanchedalmond;
}
@media (min-width: 300px) and (max-width: 500px) {
body {
background-color: tomato;
}
}- 또는의 조건을 쓰고 싶다면
,을 써야함 - 실제로는 미디어쿼리에 여러가지 조건을 달아서 쓰진 않음
- 그리고 가로모드와 세로모드를 구분해서 쓰는 경우도 많음, orientation 속성을 통해서 구분함
- landscape의 경우 가로모드일 때 미디어 쿼리를 처리할 수 있음
- 예시
body {
background-color: blanchedalmond;
}
@media screen and (orientation: landscape) {
body {
background-color: tomato;
}
}- 만약 반응형 디자인이 다를 경우 즉, 기기마다 다르게 처리하게 될 경우 이 적용하는 것에 대한 분기처리를 아래와 같이 할 수 있음
- 하지만 성능에 있어서 좋은 방법은 아니기에 이런 방법이 있다고 생각하는게 좋음
- 예시
<link rel="stylesheet" media="screen and (max-width: 300px)" href="desktop.css">
<link rel="stylesheet" media="screen and (min-width: 300px)" href="mobile.css">Media Query breakpoint
- breakpoint를 통해 분기처리를 할 때, 각 기기별로 처리를 나누는 방법을 알아볼 것임
- 이는 대응하는 디바이스가 많아지는만큼 media query가 다양하게 된다는 것을 의미함
- 이 때 다양한 기기를 대응한다고 했을 때 max-width, min-width 둘 중 한 가지만 선택해서 쭉 작성하는 것을 권장함
- 기기마다 다르기에 예시가 기준점이 될 순 없음(하지만 태블릿, 모바일, PC마다 구분해서 처리하는 것에 대한 구도만 알면 됨)
- 이처럼 각각 다르게 breakpoint를 잡는데 먼저 모바일 퍼스트 즉, 가장 작은 레이아웃을 먼저 잡고 점점 커지는 것을 채우는 경우도 있음
- 하지만 반대로 큰 것부터 작은 순서대로 데스크탑 퍼스트로 할 수도 있음
- 예시
body {
background-color: blanchedalmond;
}
/* 모바일 퍼스트 */
.title {
font-size: 48px;
}
@media screen and (min-width: 480px) {
body {
background-color: tomato;
}
.title {
font-size: 36px;
}
}
@media screen and (min-width: 768px) {
body {
background-color: lightblue;
}
.title {
font-size: 24px;
}
}
@media screen and (min-width: 1024px) {
body {
background-color: lightgreen;
}
.title {
font-size: 12px;
}
}- 이처럼 레이아웃을 뷰포트에 따라서 다르게 할 수 있음, 필요한만큼 브레이크 포인트를 잡아서 하면 됨
- 참고자료
측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다