미디어 쿼리 반응형 웹 css 블로그 테마 스킨 수정 필수!!

사실 정확하게 해당 코드를 잘몰랐지만 글을 쓰면서 해당 코드가 미디어 쿼리라는 것을 알게됐다.

미디어 쿼리는 '@media screen' 로 시작하는 코드를 말하는 듯 하다.

근데 이 '@media' 쿼리는 반응형 웹을 만뜰때 사용하는 CSS 코드로 엄청 중요한 역할을 하는 코드인걸 이제 알았다.

해당 코드는 모든 웹 페이지에서 두루두루 사용되니 한번 알고 있으면 워드프레스, 블로그스팟, 티스토리 등 블로그의 테마나 스킨을 꾸밀때 유용하게 사용될 수 있다.

필자도 해당 코드를 현재 직접 운영중인 워드프레스 블로그에 적용해 봤다. 이런 신세계가 있는 줄 몰랐다. 해당 코드를 적용하고 나서 진짜 신기했던 감정이 아직도 남아있다.

1. 미디어 쿼리가 중요한 이유

요즘에는 노트북, 테블릿, 스마트본 등 각기 다른 기기로 검색을 하고 찾아 보는데 웹페이지가 반응형이 아니라면 어느 특정 기기에만 페이지가 표시된다

이 때문에 노트북, 테블릿, 스마트폰 어떤 기기에서도 볼 수 있는 반응형 웹 페이지로 만드는 것이 중요하다.

2. 미디어 쿼리 설명

min-width

1
2
3
4
5
/* desktop 규격 */
            @media screen and (min-width: 1024px){
                body{ background-color: lightblue; }
            }
 
Colored by Color Scripter
cs

위와 같이 'min-width'가 들어간 것을 확인할 수 있다.

'min-width' 이말인즉 최소 좌우 넓이를 1024px 이라고 정했을 경우

좌우 넓이가 1024px 이상 화면에서 보여줄 코드르 짜는 것 이다.

max-width

     /* tablet 규격 */
            @media screen and (max-width: 1023px){
                body{ background-color: pink; }
            }
            /* mobile 규격 */
            @media screen and (max-width: 540px){
                body{ background-color: navy; }
            }

Colored by Color Scripter

'max-width'는 최대 좌우 넓이를 1023px이라고 정했경우 좌우 넓이가 1023px 이하 화면에서 보여줄 코드를 짜는 것 이다.

여기서 확인할 점은 위 코드와 같이 이전 코드에 이어서 'max-width: 540px'를 정했을 경우 좌우 넓이가 540px 이하에서만 적용될 코드를 넣어줄 수 있다.

미디어 쿼리 응용

1
2
3
@media screen and (min-width: 375px) and (max-width: 1439px) {
    /*코드 작성*/
}
Colored by Color Scripter
cs

375px 이상 그리고 1439 이하 에서만 적용될 코드를 짜줄 수 도 있다.

코드 예시 (워드프레스 블로그 적용 예시)

PC 웹페이지 화면

일반 PC웹페이지 에서는 위 사진과 같이 홈페이지 게시글의 사진이 오른쪽에 표시 되길 원했다.

위 사진은 현재 미디어 쿼리 코드를 사용해서 적용해준 결과이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@media screen and (min-width: 1020px) {
    
    /*게시글목록테두리*/
.section-news .list-article, .archive .list-article, .blog .list-article {
    border: 1px solid #e9e9e9 !important;
    padding:  20px 15px !important;
        margin: 10px 100px 10px !important;
}
    
.section-news .list-article-thumb, .archive .list-article-thumb, .blog .list-article-thumb {
    float: right;
    margin-right: 0px;
    margin-left:30px;
}
    
}
Colored by Color Scripter
cs

위와 같은 코드를 적용해서 1020px 이상에서는 게시글 목록의 이미지가 오른쪽으로 설정되게 했다.

(해당 게시글 구조를 만드려면 더 많은 코드가 적용되어야 하나 원래 만들어지 워드프레스 블로그에 위와 같이 미디어 쿼리를 적용해 볼 수 있어서 예시로 들었다.)

태블릿 화면

태블릿 화면에서는 다시 사진이 오른쪽으로 가게 되는 것을 확인할 수 있다.

이 또한 미디어 쿼리가 적용되어 자동으로 페이지가 적용되는 모습이다.

모바일 화면

다음 모바일일때 보여지는 페이지 화면이다. 역시 좌우 넓이에 따라서 반응해서 모바일 형식으로 표시된 페이지 화면을 볼 수 있다.