PC에만 특정 CSS 적용하기
모바일 웹 사이트를 만들어줄 때 모든 페이지를 반응형으로 제작하기에는 어려움이 따른다. 그렇기 때문에 PC에만 특정 CSS 스타일을 적용하여 PC 환경에서 특정 값(ex- 375px)의 화면 크기를 가지고 배경에는 색을 넣어주는 작업을 종종 해준다.
그럼 이때 PC와 모바일 환경을 어떻게 구분해서 특정 CSS 값을 적용해주는 걸까?
CSS의 미디어쿼리
CSS의 미디어쿼리를 통해서 PC와 모바일 환경을 구분할 수 있다. 그 중에서도 중요한 속성은 @media 중 hover와 pointer이다.
- hover
- 사용자의 주 입력 장치(마우스 등)이 요소 위에 호버할 수 있는지 구분하는 속성이다.
- none → 호버 X → 모바일 환경
- hover → 호버 O → PC 환경
호버의 여부에 따라 가능하다면 PC 환경, 가능하지 않다면 모바일 환경이라고 생각할 수 있다. 그것을 바탕으로 아래와 같이 코드를 작성한다면 어딘가에선 문제가 발생한다,,
@media (hover: hover) {
/* PC에 적용할 CSS */
}“나는 잘 되는데?”라고 생각할 수 있지만 갤럭시 유저라면 “왜 PC에만 적용되는 것이 아니라 모바일에도 이 CSS가 적용이 되었지?”라는 문제에 직면할 수 있다 🤧
(실제로 배포를 위한 프로젝트를 진행하면서 이 문제를 해결하기 위해 며칠을 서치하여 해결했다,,)
그러나 일부 Android 버전에는 길게 누를 때 호버링을 에뮬레이트하는 기능이 있어 hover를 지원하는 것으로 판단한다. 따라서 같은 코드라도 아이폰과 갤럭시 유저가 다른 화면을 가지게 되는 결과가 나타난다. 모든 사용자에게 동일한 UX를 제공하려면 두 번째 조건을 추가해야한다.
- pointer
- 사용자가 포인팅 장치(마우스 등)를 가지는지 구분하는 속성이다.
- none → 포인팅 장치 X → 모바일 환경
- coarse → 부정확한 포인팅 장치(ex- 터치 스크린의 손가락) → 모바일 환경
- fine → 정확한 포인팅 장치 (ex- 마우스) → PC 환경
마우스처럼 정확한 포인팅 장치가 있다는 것을 확인한다면, 정확히 PC에만 CSS 적용이 가능해진다.
@media (hover: hover) and (pointer: fine) {
/* PC에 적용할 CSS */
}@media (hover: hover) and (pointer: fine) 안에 들어가는 CSS 내용들은 이제 정확히 PC에만 적용이 된다! 드디어 갤럭시 유저에게도 PC 버전 스타일이 아닌 모바일 스타일이 적용된다.
PC에만 CSS가 적용된 최종 화면
이번 프로젝트에서는 PC 화면 뒤에 다른 디자인 없이 페이지의 크기(375px)만 지정해주었다. (각 페이지에 배경색이 주어진 경우가 대부분이었어서 구분선이 필요하지 않았다)
- 해당 부분 관련 코드
@media (hover: hover) and (pointer: fine) {
.page-space {
width: 375px;
}
}- PC 화면
- 모바일 화면
결론
갤럭시 에러를 만나지 않고 정확히 PC에만 CSS를 적용해주고 싶다면 아래의 코드를 사용하면 된다 😎
@media (hover: hover) and (pointer: fine) { /* PC에 적용할 CSS */ }
