[HTML] 모바일과 PC의 카테고리 위치 다르게 설정하기

이 글은 모바일 화면과 PC 화면에서 카테고리가 노출되는 위치를 다르게 설정하는 방법에 대하여 다룬 글이며, CSS 를 통한 별도의 '꾸밈'에 대한 내용은 다루지 않았습니다.

# inner 영역 카테고리 삽입시 문제점

아래 사진은 Header의 inner 영역에 카테고리를 삽입한 블로그의 PC 화면 사진입니다. 아래 사진을 보시면 확인이 가능하시겠지만, 사이드바 영역에는 공지사항과 광고를 제외한 그 어떠한 것도 출력하고 있지 않습니다.

이와 같은 방법에는 여러가지 장점들이 있습니다. 우선, 사이드바 영역에 광고와 공지사항만을 노출하기 때문에, 광고에 대한 집중도가 올라갑니다.

물론, 사이드바의 postion을 고정하며 앵커 형식으로 광고를 노출시킬 때에 한정합니다.

하지만, 문제점 또한 여러가지가 생깁니다. 아래 사진은 위 블로그를 모바일에서 접속하였을 때에 마주하는 화면입니다.

우선, 왼쪽 사진을 보시면, inner 영역에 카테고리가 삽입되었으나, 모바일 화면에서 출력되면서, display가 깨지는 현상이 보입니다. 이러한 깨짐현상은 모바일 내부에서 media 속성을 통하여 수정함으로서 간단히 수정할 수 있지만, 문제는 아직 남아있습니다.

모바일 화면은 pc 화면에서처럼 스크롤의 이동이 자유롭지 않기 때문에, 카테고리를 이용하기 위해서는 스크롤을 다시 위로 쭉 올려야 합니다. 만약 컨텐츠의 내용이 긴 글이 아니라면 상관이 없겠지만 컨텐츠의 내용이 길다면 카테고리를 이용하기 위해서 다시한번 위로 스크롤을 쭈욱 올려야 합니다. 이러한 불편함을 덜고, 블로그의 가시성을 올리기 위해서는 사이드바 내부에 카테고리가 위치해야 합니다.

# 모바일과 pc 카테고리 위치 다르게 설정하기

(1) HTML변경방법

이제부터, 카테고리의 위치를 모바일과 pc 화면에서 상이하게 설정하는 방법에 대하여 다루겠습니다. 먼저, HTML 파일의 설정 방법부터 보시겠습니다.

왼쪽 사진은 카테고리의 기초 설정입니다. header 내부 inner 영역에 카테고리가 삽입되어 있습니다. 여기서, 카테고리 부분만을 복사하여, sidebar 영역에 똑같이 붙여 넣어줍니다. 대신 붙여넣을 때에, 위 사진처럼 category의 class 명을 다르게항여 붙여넣어주셔야 합니다.

이후에, CSS를 설정할 때에, pc화면의 카테고리와 모바일 화면의 카테고리를 상이하게 설정하기 위함이니 반드시 class 명을 다르게 설정하셔야 합니다.

(2) HTML 변경시 발생하는 문제점

HTML을 위와 같이 변경한 경우에는 문제점이 발생합니다. 아래 사진을 보시면, 카테고리의 위치가 inner와 sidebar 두 곳에 출력되는 것을 보실수 있습니다. 이와 같은 경우에는 방문자로 하여금 혼란을 느끼게 할뿐더러, 번잡해 보이며 전문성을 의심하도록 합니다. 따라서, 모바일과 pc 화면 모두 하나의 카테고리만을 출력하도록 바꾸어야 합니다.

(3) CSS 변경방법

먼저, 우리가 모바일과 PC 화면의 출력을 다르게 설정하는 CSS 속성은 @media 입니다. 우리는 이 @ media의 max-width와 min-width를 설정하여, 모바일 화면에서는 inner의 카테고리를 pc 화면에서는 siedbar의 카테고리를 보이지 않도록 설정할 것이며 사용되는 코드는 아래 사진과 코드 블럭에 나온것과 같습니다.

@media screen and(max-width:757px){
 .category{
  display : none;
  }
 }
 
@media screen and(min-width:1000px){
 .scategory{
  display:none;
  }
 }

코드 블럭을 보면서 다시한번 설명드리겠습니다.

.category는 inner 영역 카테고리의 class 명이기 때문에 757px 이하의 화면 출력에서는 display를 none으로 설정하여 출력되지 않도록 설정하였습니다.
.scategory는 sidebar 영역 카테고리의 class 명이기 때문에 1000px 이상의 화면 출력에서는 display 를 none으로 설정하여 출력되지 않도록 설정하였습니다.

아래 사진은 위 CSS 속성이 설정되어 모바일 화면에서는 사이드바 영역에 카테고리가 출력되는 웹페이지 사진입니다.