쉽게 배우는 미디어쿼리 스타일시트(style.css)속성을 바꿔 화면사이즈에 맞게 웹반응형으로~

쉽게 배우는 미디어쿼리 스타일시트(style.css)속성을 바꿔 화면사이즈에 맞게 웹반응형으로 뚝딱!

원래 웹반응형인 워드프레스 사이트를 가지고 화면사이즈에 따른 미디어쿼리 수정하는 하나의 예를 보여드리겠습니다.

 

아래 그림을 보시면 인덱스 목록이 닫혀 있습니다.

이는 모바일화면에서 보여지는 것인데요.

pc 화면에서는 목록이 보인답니다.

.

 

내 스마트폰에서도 목록이 보이도록 스타일시트를 수정해보겠습니다.

 

 

 

 

※사용중인 스킨으로 들어가야 함.

 

관리자페이지의 외모/스타일시트(style.css)로 들어갑니다.

쭉 스크롤해서 내리다보면 미디어쿼리 부분이 있습니다.

@media screen and (max-width: XXXpx) 라고 되어 있는 부분보이시나요?

현재 이 사이즈가 너무 크기때문에 목록이 닫혀 있는 것입니다.

우리나라의 일반적인 스마트폰의 스크린사이즈로는 이 값이 커서 목록이 닫히는 것입니다.

 

 

 

 

값을 작게 잡아보겠습니다.

너무 작게 잡으면 또 모바일화면에서 안예쁘게 보이므로 적당히 조절합니다.

 

 

 

적용 시키고 빠져 나오면요.

이렇게 일반적인 스마트폰 화면에서 인덱스 목록이 열리는 것을 확인 할 수 있습니다.

 

어때요.

요즘은 모바일시대입니다.

미디어쿼리 어렵지 않죠?

.