이미 우리가 만든 사이트는 브라우저 크기에 따라서 반응하는 반응형 웹이다.
웹은 거의 모든 운영체제에서 동작하는 정보 시스템이다. 그래서 모든 화면에 대응되는 웹 페이지를 만들어야 했다. 하지만 그 과정을 극복하기는 어려웠고 긴 시간동안 웹의 단점으로 작용했다. 하지만 사람들은 다양한 환경에서 적응할 수 있는 기술을 만들어 반응형 디자인을 만들어냈다.
반응형 디자인은 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하게 되는 것이다.
반응형 디자인은 순수한 CSS를 통해서 구현해내는 방법인 미디어쿼리를 알아보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
border:10px solid green;
font-size:60px;
}
</style>
</head>
<body>
<div>
Respnsive
</div>
</body>
</html>이와 같이 코드를 작성했다. 그런데 나는 화면의 크기에 따라서 구성을 다르게 하고 싶다. 이것이 미디어 쿼리이다.
화면의 크기가 800px보다 크냐 작냐에 따라서 구분을 하고 싶다. 일단 화면의 크기를 알아야 한다.
개발자 도구를 이용해서 화면의 크기를 볼 수 있다.
개발자도구를 키고 화면의 크기를 조정하면
우측상단에 나타난다.
/* screen width > 800px */
@media(min-width:800px){
div{
display:none;
}
}화면의 크기가 최소 800px이면, 800px보다 화면이 작다면 display는 사라진다.
min은 최소값이고, max는 최대값이다. 역으로 max로 똑같이 적용을 할 수 있다.
이러한 미디어 쿼리를 활용하면 화면의 특성들에 따라서 조건을 만족할 때, css의 내용이 동작하도록 만들 수 있다. 이것이 미디어 쿼리이다.
이 미디어 쿼리는 여러가지 모양의 화면이 존재하는 세상에서 굉장히 좋은 기능이다.
> 미디어 쿼리 활용
이전의 예제로 가보자. 크기가 줄어들었을 때, grid 타입이었던 #grid의 display를 block으로 바꾸게 해보자.
/* scree width < 800px */
@media(max-width:800px){
#grid {
display : block;
}
#grid ol {
border-right:none;
}
h1 {
border-bottom:none;
}
}'HTML & CSS > 생활코딩 - CSS' 카테고리의 다른 글
| CSS 기초 개념 - CSS 코드의 재사용 #07 (0) | 2020.09.28 |
|---|---|
| CSS 기초 개념 - 그리드 #05 (0) | 2020.09.26 |
| CSS 기초 개념 - 박스 모델 활용 #04 (0) | 2020.09.25 |
| CSS 기초 개념 - 박스 모델 #03 (0) | 2020.09.24 |
| CSS 기초 개념 - 구글링 요령 #02 (0) | 2020.09.23 |
