주력이 코딩이 아니고 마케팅인데, 어쩌다 시간이 남아서 계속 티스토리 스킨을 만져보고 있네요. 기왕에 블로그를 운영하는 것 조금이라도 더 예쁘고 최적화된 모습으로 만들어 보려는 생각에서 공부 중입니다. 반응형 스킨을 수정하다 보니 반응형도 반응형이지만 모바일과 PC에서 다르게 보이도록 하는 근본적인 원리를 알아야 작업이 가능하다는 생각에 이것저것 시도해 보다가 원점으로 돌아와서 정리하게 되었어요. 여러분들에게도 도움이 되길 바라며 기록으로 남겨봅니다.
아마 CSS 작업을 하다 보면 PC 화면에서 뭔가 나타나도록 한 것을 모바일에서는 보이지 않도록 감추고 싶을 때 @media screen and (max-width: 767px) {} 안에 해당하는 class에 display: none;이라고 정의해 두면 간단하게 해결되는 것을 아실 거예요. 이 글을 검색해서 들어왔다면 아마 이 정도는 아는 상태에서 오지 않았을까 싶네요. 그런데, 반대로 모바일에서 사용하는 class를 PC에서는 안 보이게 하려고 할 때, 대부분 display: block;으로 해결이 됩니다.
하지만, 이상하게 해결이 안 되는 상황이 발생하기도 하는데 전문가들은 코드를 자세히 살펴보면서 잘 정리하시겠지만 저처럼 마이너스 margin을 넣어가면서 주먹구구로 맞추는 수준에서 이것을 해결하기는 정말 어려웠답니다.
근본적인 질문을 하면서 찾아보고 내린 결론은 해상도별 코딩을 하는 @media 쿼리였습니다. 실제로 보이는 화면 속성에만 적용하면 되니까 @media screen을 사용하고 모바일 화면 가로 기준이 767px이니까 @media screen and (max-width: 767px) {} 안에 가두면 해결이 되는 것에 착안하여, 반대로 PC에서만 보이게 하고 싶다면 @media screen and (min-width: 768px) {} 안에 가두면 해결이 되는 상황이었답니다. 물론 PC와 mobile만 반응형이 아닌 가로 픽셀의 크기가 어중간한 형태의 화면에도 맞추려면 폭(width)의 숫자를 추가하면 될 것 같습니다.
정말 소 뒷걸음치다가 쥐 잡는 격으로 해결한 반응형 스킨 작업인데, 여러분들에게도 도움이 되면 좋겠네요.
@media(min-width:768px){ /* PC에서는 안보이고 */
.class명 {
display:none;
}
}
@media(max-width:767px){ /* mobile에서만 보이게 */
.class명 {
display:flex;
}
}끝으로 이렇게 정리한 것이 맞는지 확인하기 위해 요즘 유행하는 인공지능에게도 질문해 봤더니 놀랍게도 너무나 비슷한 답변을 받았답니다. 신기하기도 하고 안심도 되었네요.
티스토리의 반응형 스킨에서 모바일과 PC에서 다르게 보이도록 하고 싶을 때는 미디어 쿼리(Media Query)를 사용하면 됩니다. 미디어 쿼리는 미디어 타입, 뷰포트 너비, 디바이스 방향 등의 조건에 따라 CSS를 적용하는 방법입니다. 예를 들어, PC에서는 넓은 화면으로 보여주고, 모바일에서는 좁은 화면으로 보여주는 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.
```
/* 모바일 화면 크기에 대한 스타일 */
@media screen and (max-width: 767px) {
/* 모바일 화면에서 보여줄 스타일 */
}
/* PC 화면 크기에 대한 스타일 */
@media screen and (min-width: 768px) {
/* PC 화면에서 보여줄 스타일 */
}
```
위 코드에서 `max-width: 767px`는 모바일 화면의 최대 너비를 의미하고, `min-width: 768px`는 PC 화면의 최소 너비를 의미합니다. 이를 이용하여 각각 모바일과 PC에서 보여줄 스타일을 적용할 수 있습니다. 예를 들어, PC에서는 넓은 화면으로 보여주고, 모바일에서는 좁은 화면으로 보여주고 싶은 경우, PC에서는 헤더 이미지를 넓게, 모바일에서는 좁게 보여주려면 다음과 같은 코드를 사용할 수 있습니다.
```
/* 모바일 화면 크기에 대한 스타일 */
@media screen and (max-width: 767px) {
.header-image {
width: 100%;
}
}
/* PC 화면 크기에 대한 스타일 */
@media screen and (min-width: 768px) {
.header-image {
width: 50%;
}
}
```
위 코드에서 `.header-image`는 헤더 이미지를 나타내는 클래스 이름입니다. 모바일에서는 `width: 100%;`을 적용하여 이미지를 꽉 차게 보여주고, PC에서는 `width: 50%;`을 적용하여 이미지를 반으로 줄여서 보여줍니다. 이처럼 미디어 쿼리를 사용하여 모바일과 PC에서 각각 다르게 보여줄 수 있습니다.
참고: 구글 애드센스 배너 권장 크기
댓글