(워드프레스 Twenty Fourteen테마) 웹반응형 미디어쿼리 인덱스 리스트 열기 - 스타일시트 (style.css) > 사이트 키우기

• 목록

• 페이스북 공유
• 트위터 공유

워드프레스 Twenty Fourteen테마 사용자라면 아마 일반 스마트폰에서 인덱스가 목록으로 열릴 것입니다. 

글이 있으면 글이 펼침으로 열리는게 아니라 목록으로 열리죠.

때문에 워드프레스로 만든 사이트(블로그)의 인덱스를 펼쳐 보여주고 싶으신 분들은 어디서 소스를 수정해야 하는지 난감하실 분도 계실텐데요.

미디어쿼리에대해서 공부할 필요도 없이 인지만 하고 계셔도 쉽게 접근하실수 있는 부분입니다.

저도 미디어쿼리에대해서만 알지 어떻게 뜯어 고치는지는 잘 모르거든요.

하지만, 살짝 고민해 본 끝에 제가 운영하는 워드프레스 사이트의 목록을 펼침으로 바꿀 수 있었습니다.

보시면 스마트폰에서의 모습입니다.

인덱스(첫페이지)가 이렇게 목록으로 출력됩니다.

그럼 제 사이트의 경우에서는 보기가 안좋죠.

펼침으로 바꿔 보도록 하겠습니다.

관리자페이지로 들어갑니다.

외모/편집기로 들어가시면 제일 하단쯤에 style.css라고 있을 것입니다.

클릭해서 열어보시면 편집화면이 나오고요.

스타일시트 (style.css) 편집화면 윗 부분에 보면 (Table of Contents:)라는 목록이 나옵니다.

소스가 양이 많기 때문에 뜯어고치고 싶은 분들은 해당 목록을 보고 어디쯤에 가서 고치면 되는지 알 수 있게 해 놨거든요.

제가 뜯어고치고 싶은 부분은 웹반응형 구동명령인 미디어쿼리를 뜯어고칠 껍니다.

엄연히 말하면 뜯어고치다기 보다는 숫자만 살짝 바꾸는 것입니다.

이것이 원본입니다.

첫번째 부분에 max-widty; 400px 라고 되어 있잖아요.

그러니까 화면의 최대 크기가 400px이면 해당되는 명령에 따라 보여주라는 것입니다.

이 부분 아래에 보시면 전부 리스트로 보여주라는 것을 알 수 있는데요.

뭔 소린지 몰라도 영어로 리스트라고 써 있는 것 보이시죠? 그게 쉽게 말하면 화면이 최대크기가 400px 까지는 모두 리스트로 보여주라는 것이고요. 그 아래 사이즈의 스마트폰이나 모니터 화면에서는 모두 리스트로 보여주라는 것입니다.

그래서 처음 Twenty Fourteen테마를 설치하신 분들은 영문도 모른체 모두 아마 리스트로 보여질 것입니다.

물론 테블릿이나 pc 화면에서는 정상적으로 펼침으로 보여집니다.

이제 무슨 말인지 아시겠죠?

자 보세요.

400 이라는 숫자를 300으로 바꿔 보겠습니다.

필요하시면 200이나 250 뭐 상관 없습니다.

현재 우리나라에서 대중화된 스마트폰 사이즈가 이단 300으로 맞춰 놓으시면 다 왠만하면 펼침으로 보여질테니까요.

그리고 자신의 스마트폰에서 확인해 보세요.

저는 아직도 베가레이서를 사용중이라 4.3인치입니다. 그래서 충분하게 300으로 맞춰놨습니다.

그랬더니 스마트폰 화면에서 어떻게 보여질까요?

제일 위에 사진과 비교해 보세요.

원하던데로 펼침으로 인덱스 첫화면이 바뀌게 되었습니다.

어때요? 미디어 쿼리는 pc 웹화면에서도 화면을 줄였다 늘였다 해 보시면 사이트가 어떻게 보여지는지 확인 하실 수 있으세요.

이게 바로 몇 년 전부터 각광받고 있는 웹반응형 사이트 만들기의 핵심기술인 미디어쿼리 기술입니다.

이 기술을 몰라도 응용만 하면 되는 것이랍니다. 

어때요?

멋지죠?

이렇게 자세하게 설명해 주는 사이트 없을껍니다.

멜랑넷이라 가능한 것입니다.