반응형
쉽게 배우는 미디어쿼리 스타일시트(style.css)속성을 바꿔 화면사이즈에 맞게 웹반응형으로 뚝딱!
원래 웹반응형인 워드프레스 사이트를 가지고 화면사이즈에 따른 미디어쿼리 수정하는 하나의 예를 보여드리겠습니다.
아래 그림을 보시면 인덱스 목록이 닫혀 있습니다.
이는 모바일화면에서 보여지는 것인데요.
pc 화면에서는 목록이 보인답니다.
.
|
내 스마트폰에서도 목록이 보이도록 스타일시트를 수정해보겠습니다.
※사용중인 스킨으로 들어가야 함.
관리자페이지의 외모/스타일시트(style.css)로 들어갑니다.
쭉 스크롤해서 내리다보면 미디어쿼리 부분이 있습니다.
@media screen and (max-width: XXXpx) 라고 되어 있는 부분보이시나요?
현재 이 사이즈가 너무 크기때문에 목록이 닫혀 있는 것입니다.
우리나라의 일반적인 스마트폰의 스크린사이즈로는 이 값이 커서 목록이 닫히는 것입니다.
값을 작게 잡아보겠습니다.
너무 작게 잡으면 또 모바일화면에서 안예쁘게 보이므로 적당히 조절합니다.
적용 시키고 빠져 나오면요.
이렇게 일반적인 스마트폰 화면에서 인덱스 목록이 열리는 것을 확인 할 수 있습니다.
어때요.
요즘은 모바일시대입니다.
미디어쿼리 어렵지 않죠?
.
반응형
'웹' 카테고리의 다른 글
네이버 지식인 설문조사 _ 재미난 결과 물건 구매시 가장 먼저 보는 것은 가격 뒤를 이어 디자인 (0) | 2016.08.18 |
---|---|
트위터 '뮤지엄위크' 전세계 3000개 박물관 전시품 한 눈에 소통 (0) | 2016.07.21 |
네이버 VIP메일 설정해 보기 (0) | 2014.10.01 |
티스토리 믹시 플러그인 종료되네요. (0) | 2014.09.02 |
카카오스토리 pc 버전 등장이 SNS의 불편함을 해소 해 줄지 점쳐봅니다. (0) | 2014.06.02 |