9) 간단한 반응형 웹 디자인: 미디어 쿼리

반응형 웹 디자인?

반응형 디자인이란 말을 들어본 적이 있나 모르겠다. 개념은 간단하다. 사람들이 어떤 대상에 조작을 가할 때마다 그것의 모습이 변화하는 디자인이다. 웹페이지를 디자인하는 사람이라면 이러한 반응형 디자인을 염두에 두어야 한다. 특히 웹브라우저의 크기가 변화함에 따라서 웹페이지의 크기가 달라지는데 그럼 웹페이지가 전달하고자 하는 정보를 사람들에게 제대로 전달하지 못하는 경우가 생길 수 있다.

 

웹 브라우저의 크기를 변화시키면 그에 따라 웹페이지의 구성이 달라진다.

우리가 이용하는 대부분의 웹페이지는 반응형 디자인을 적용하고 있다. 예를 들어 쿠팡을 들어가보면 화면의 크기에 따라 나타내는 컨텐츠를 달리 적용하고 있는 것을 알 수 있다. 우리가 만든 웹페이지도 반응형 디자인을 간단한 수준으로 나타내볼까 한다.

 

그래서 활용하는 것이 미디어 쿼리(media query)라는 것이다. 미디어 쿼리는 특정 상황(특정한 해상도, 모바일 기기 등)에 따라 쉽게 화면의 디자인을 변화시킬 수 있는 CSS내의 모듈을 말한다. 즉 CSS가 제공하는 일종의 템플릿이다. 우리는 우리가 기존에 배운 CSS문법을 활용해서 이 명령을 쉽게 만들어 낼 수 있다. 먼저 <style> 태그안에 다음과 같이 써보자.

 

@media(max-width:800px){}은 이렇게 해석하면 된다. 너비가 800px이 될 때까지 {}안의 내용대로 스타일을 처리해주세요. 그럼 중괄호안에는 무엇이 들어가면 될까? 간단하게 기존에 배운대로 선택자를 이용해서 속성을 정의해주면 된다. 나는 웹페이지의 너비가 800px이하가 되면 그리드로 내용을 나타내는 것을 취소하고 블록으로 나타내려고 한다. 그리고 list와 article블록의 경계선은 없애려고 한다. 그래서 다음과 같이 썼다.

 

웹브라우저의 너비를 800px이하로 줄이면 배치가 달라진다.

새로고침 한 다음에 웹페이지의 너비를 800px이하로 조절하면 목표한 대로 나온다. 미디어 쿼리를 이용하여 반응형 웹 디자인을 하는 방법은 꽤 다양하다. 이에 대해서 알고 싶다면 직접 검색을 해보고 적용해보길 바란다.

 

 

간단한 수준의 반응형 웹 페이지를 만들어보았다. 마지막으로 다룰 것이 하나 더 있다. 지금 우리는 모든 CSS코드를 HTML파일 안에 때려넣었다. 근데 CSS코드를 나누어서 따로 파일을 저장해놓고 불러와서 쓸 수는 없을까? 만약 가능하다면, 웹페이지 마다 코드를 일일이 치지 않고, 저장한 코드만 필요한 것만 불러와서 재사용 할 수 있을 것이다. 다행히 이러한 기능은 구현되어 있다. 그리고 이것이 CSS만의 중요한 장점 중의 하나이다. 코드를 따로 저장하고 재사용할 수 있다는 것이다.

 

미디어쿼리 부분과 나머지 부분을 'css_mediaquery.css'와 'css_source.css' 으로 나누어 저장했다.

예를 들어 나는 <style>태그 안에 작성한 CSS코드를 미디어쿼리 부분과 나머지 부분으로 나눠 2개의 파일로 저장하고 싶다. 그리고 이것을 단순하게 불러와서 쓰고 싶다고 하자. 먼저 파일을 두 개 만들고, 저장하고 싶은 CSS코드를 넣는다. 그 후에 각각의 파일을 .css파일 형식으로 저장한다.

 

<link> 태그로 파일을 불러와 사용한다.

html파일에서는 기존에 썼던 CSS코드를 지우고 그 자리에 다음과 같이 <link>태그를 사용한다. <link>태그를 이용해서 파일을 직접적으로 불러오는 것이다. 여기서 rel속성은 이 html파일과 어떤 관계인지를 나타내는 속성이다. css는 html의 스타일 시트 문서이기 때문에 속성값으로 stylesheet라고 작성한다. 그리고 href에는 파일의 경로를 작성한다. 만약에 html파일이 있는 곳에 css파일도 있다면 파일의 이름만 작성해주면 된다. 이렇게 해도 이전과 동일한 웹페이지를 보여준다. 덤으로 HTML코드가 읽기가 한결 편해지는 효과도 있다.

---

이렇게 해서 생활코딩 학습일기 CSS편이 끝이 났다. 몰론 더 자세히 배우고 다양한 곳에 적용해봐야 겠지만, 일단 HTML과 CSS의 맛을 보았다. 마지막은 javascript라는 언어가 남았다. 이 언어는 지금까지와 달리 프로그래밍 언어에 속한다.

 

프론트엔드 ‘엔지니어’라는 말을 하기 위해서는 이 언어를 필수적으로 다룰 줄 알아야 한다. 만약 다른 프로그래밍 언어를 배워본 적이 없다면 새로운 문법에 당황할 수도 있을 것 같다. 그래도 꿈을 잃지 말자. 끝까지 배우고 나면 분명 뭔가 남을 것이다.

 

*생활코딩 학습일기 카테고리의 글들은 모두 2021년, 제 이전 블로그에서 작성한 글입니다.

*정확한 정보를 전달하기 위해서 일부 내용은 수정하였습니다.