1 분 소요

미디어 쿼리(Media Query)

우리가 사용하는 디바이스는 컴퓨터, 노트북, 스마트폰, 태블릿 등 다양하다. 따라서 표출되는 화면의 크기(px 등)가 각각 다 다르기 마련인데, 이 때문에 웹이 화면의 크기에 맞추어 표출 방식을 바꾸는 기법이 고안되었다.

이를 반응형 웹(responsive web)이라고 하며, 이 웹 페이지의 각 요소들이 화면 크기에 따라 반응하여 동작하는 것을 반응형 디자인, 혹은 미디어 쿼리(media query)라 부른다.

@media (max-width: 800px) {
    #grid {
        display: block;
    }
    #grid ol {
        border-right: none;
    }
    h1 {
        border-bottom: none;
    }
}

다음과 같이 @media라고 작성하면 미디어 쿼리로서 동작하게 되는데, 괄호 안의 max-width: 800px은 가로 길이가 최대 800px일 때까지만 적용하라는 의미이다. 역으로 min-width와 같은 조건문도 가능하다.

해당 조건이 충족되면 grid class는 표출을 종전의 grid 방식에서 block 방식으로 바꾸고, 휘하의 ol태그나 제목의 h1 태그의 각 경계선은 사라지게(none) 되는 식이다.

해당 웹을 좌우로 막 흔들면 경계선들이 생겼다 사라지면서 grid 방식과 block 방식이 왔다갔다하는 모습을 볼 수 있다.

CSS 캐싱(CSS Caching)

이런 CSS 스타일의 style 태그를 각 문서에 저장하면, 각 문서 하나씩만을 실행할 때는 효과적이다. 그러나 여러 문서에 동일한 스타일의 CSS가 적용된다면, 아예 “style.css”와 같이 CSS 파일로 따로 빼는 것이 효과적이다. 왜일까?

당연히 중복이 줄면 코드를 작성하고 유지보수하기엔 매우 용이할 것이다. 그러나 그것 외에도 웹의 네트워크 트래픽이 줄어 처리속도가 빨라진다는 장점도 있다. 이는 캐싱 덕분이다.

HTML 파일에서 CSS 파일이 한 번 호출되면, 그 내용을 웹 브라우저가 기억(저장)하고 있다가 또 호출이 될 때 직접 경로로 찾아가는 것이 아닌, 기억(저장)한 CSS 파일을 바로 뽑아 쓸 수 있기 때문이다.

이를 캐싱(caching)이라 하는데, 본래는 “은닉하다, 저장하다”의 뜻이다.

<link rel="stylesheet" href="style.css" />

다음과 같이 본래 style 태그가 있던 head 파트에 곳에 새로이 link 태그를 삽입하여 사용하는데, rel은 문서와 참조 파일 간의 관계를, href는 경로를 지정하는 속성이다. 뒤에 ‘/’ 슬래시 하나가 붙어 있는 것은 종전의 XHTML에서 HTML로 넘어오면서 사라지지 않은 잔재인데, HTML5에선 안 써도 아무 문제도 안 되니 무시하자.

이렇듯 캐싱이 주는 이점이 있기 때문에, 가급적 CSS 파일을 별도로 만들어 중복을 제거하는 것이 좋다.

출처: [생활코딩!HTML+CSS+자바스크립트 CSS편 Chapter 12~14]

태그:

카테고리:

업데이트:

참고