CSS 기초 실습하기 (3)

반응형 웹(responsive web) 개념과 미디어 쿼리 사용법

* 본 포스팅은 이전 글에서 이어집니다.

CSS 마지막 실습은, '반응형 웹과 미디어쿼리'에 관한 내용이다. 본 포스팅 역시 생활코딩의 강좌를 공부한 내용을 바탕으로 했다.

---

반응형 웹(responsive web)

반응형 웹(responsive web)이란?

화면의 크기, 해상도에 따라 웹 페이지의 각 요소들이 반응하여 최적화된 형태로 바뀌게 되는 것을 의미한다.

웹은 거의 모든 시스템에서 동작하는 정보시스템이며, 수많은 형태의 화면에서 동작하므로 여러 화면에 대응할 수 있도록 개발되어 왔다.

오랜 시간 웹을 위해 헌신한 사람들이 다양한 환경에서 적응할 수 있는 기술들을 발전시킨 덕분에 반응형 웹이 등장하게 되었다.

미디어쿼리 소개

반응형 디자인을 순수한 웹을 통해서, CSS를 통해 구현하는 핵심적인 개념인 미디어 쿼리에 대해 알아보자.

출처 : 생활코딩, WEB2 CSS - 12. Introduction to Media Queries

우선 <div> Responsive </div>의 부분이 화면의 크기에 따라서, 즉 800px 보다 크냐 작냐에 따라 보이게 안보이게 설정해보자.

이를 위해서는 현재 화면에 대한 크기를 알아야 한다. 

출처 : 생활코딩, WEB2 CSS - 12. Introduction to Media Queries

inspect 도구를 사용하여 화면의 크기를 드래그하여 조정해보면, 체크한 부분을 통해 페이지의 크기를 즉각적으로 확인할 수 있다.

미디어쿼리 사용법: @media(______) {____}

출처 : 생활코딩, WEB2 CSS - 12. Introduction to Media Queries

화면의 크기가 800px보다 크다 를 직역해서 임의의 코드로 작성하면 screen width > 800px로 적을 수 있다.

이를 다시 말하면 화면이 최소 800px이라는 의미가 된다. 이것을 미디어쿼리로 적으면, @media(min-width:800px) 이 된다.

즉 화면이 최소한 800px 이상이 되면 화면에서 사라지는 (display:none;) 것이다.

출처 : 생활코딩, WEB2 CSS - 12. Introduction to Media Queries

반대로 화면이 800px보다 작아지면, 즉 화면이 최대 800px일 때 사라지도록 하는 것은 @media(max-width:800px)로 적을 수 있다.

미디어쿼리 사용해보기

출처 : 생활코딩, WEB2 CSS - 13. Using Media Query

화면이 위와 같이 작아질 경우, 컨텐츠가 저렇게 표시되는 것은 보기에 좋지도 않고 낭비적이다.

이럴 경우에는 글이 많은 컨텐츠가 아래로 가면 더 좋을 것이다.

출처 : 생활코딩, WEB2 CSS - 13. Using Media Query

그렇다면 화면의 사이즈에 따라 보기좋게 레이아웃을 구성해보자.

화면이 800px보다 작아질 경우, 즉 화면이 최대 800px일 경우 레이아웃을 블럭화하고, 세로줄, 가로줄을 없애기 위해서는 어떻게 해야할까?

출처 : 생활코딩, WEB2 CSS - 13. Using Media Query

먼저, @media(max-width:800px) 입력 후 각 선택자에 대한 효과를 선언해주면 된다.

1. 컨텐츠를 블럭화하기 위해서는, #grid 선택자의 디스플레이를 grid 에서 block으로 선언

2. ol에서 오른쪽 테두리에 선이 있었던 것을 border-right:none으로 선언

3. 제목(h1)의 아래쪽 테두리에 선을 border-bottom:none으로 선언 하면 된다.