친효스킨 : 본문 폰트 스마트폰(모바일) 및 PC 해상도에 따른 반응형 크기 설정

친효스킨 커스터마이징 관련 글 입니다. 디스플레이 해상도에 따라서 본문 크기를 다르게 변경하고 싶은 경우에는 간단하게 미디어쿼리에 의해 동작하게 만들 수 있습니다. 친효스킨의 메인 해상도는 스마트폰을 기준으로 설계가 되어 있습니다. 따라서 미디어쿼리를 통해서 특정 해상도 이상일 때를 설계하고 해당 영역에 CSS 매소드를 만들어서 반응형으로 처리할 수 있습니다. 모바일(스마트폰)에서의 친효스킨의 본문 폰트 크기는 기본적으로 아래의 CSS에 마크업 되어 있습니다. 이 부분을 검색합니다.

 

#contents .article {
    word-break: break-all;
    -webkit-word-break: break-all;
    padding: 20px;
    border: 1px solid #E5E5E5;
    border: 1px solid var(--subColor);
    font-family: "RIDIBatang", "Nanum Gothic", serif;
    font-size: 17px;
    line-height: 1.6em;
}

여기에서 font-size 부분이 바로 모바일 해상도의 기본 본문 폰트 크기에 해당됩니다. 현재 친효스킨은 17px로 모바일이든, PC에서든 모두 동일한 사이즈로 출력되도록 설정되어 있습니다. 하지만 PC 해상도에서 좀 더 크기를 키우기를 원한다면 미디어쿼리를 이렇게 구성할 수 있습니다.

 

@media (min-width: 1000px) {
    #contents .article {
        font-size: 20px;
    }
}

미디어쿼리에서의 min-width의 의미는 최소(min)-가로(width) 사이즈가 1000픽셀(px) 의 뜻을 가지고 있으므로, 디스플레이의 가로 사이즈가 최소 1000px 해상도 이상부터 안에 마크업된 내용이 적용된다는 뜻 입니다. 미디어쿼리에 대해 더 자세하게 알아보시려면 아래의 글을 읽어보시기 바랍니다.

홈페이지를 반응형으로 만드는 미디어쿼리 (@media) 간단한 개념 및 사용 방법

참고로 기준이 되는 해상도에서 이미 사용되어지는 CSS 매소드들 중 변화가 필요한 스타일만 미디어쿼리로 지정을 하고, 나머지 변하지 않는 부분들은 중복해서 마크업을 할 필요가 없습니다. 그래서 가로 1000px 이상의 해상도에서 폰트 변화만을 주고 싶기 때문에 font-size에 대한 매소드만 마크업을 한 것 입니다. 이렇게 미디어쿼리를 이용해서 사용자가 원하는 해상도에서 CSS의 변화를 쉽게 조작 할 수 있습니다. 끝.