반응형 웹 레이아웃 원리 (반응형 블로그, 이미지, 티스토리, 워드프레스)

반응형 웹은 블로그나 사이트가 화면의 크기에 따라 유동적으로 변화하는 웹페이지를 뜻한다.
간단히 말해서 홈페이지를 pc버전과 모바일 버전으로 따로 만들 필요 없이. 하나의 페이지를 유동적으로 변화하게 만든다는 것이다.

반응형 웹을 만드는 방법

반응형 웹을 만들려면 html과 css에 대한 어느정도의 지식이 필요하다.
내가 아는 부분, 아주 간단하고 단편적인 부분만 설명해보려 한다.

코드

<meta name="viewport" content="width=device-width, initial-scale=1">

위의 코드는 모바일에서 화면이 자동으로 축소되지 않게 하는 기능을 한다. (적용되지 않은 사이트는 pc의 화면이 그대로 모바일 가로 길이에 맞춰지기 때문에 글씨나 링크가 너무 작아서 보기 불편하다.)
위의 코드를 head 사이에 넣어주면 페이지가 자동으로 축소되지 않고 1대1 비율로 보이게 된다. (물론 이것만 적용하면 축소되어 보이지만 않을 뿐. 더욱 불편하게 보일 것이다.)

화면의 크기에 따라 유동적인 변화를 주는 기능의 예

이제 블로그 자체가 모바일의 가로길이에 맞게 변하게 만들어야 한다.

#container {
width:1000px;
}
@media screen and (max-width:1000px) {
#container {
width:800px;
}
}

위의 코드는 “container”라는 객체의 가로 길이를 1000px로 설정했고, 창의 가로 길이가 1000px이하가 되면 “container”의 가로 길이가 800px로 줄어들게 설정했다.
이 기능을 활용하면 창(화면) 크기의 변화에 따라 옆의 메뉴를 밑으로 내리거나, 숨기거나, 배경색을 바꾸는 등의 다양한 변화가 가능해진다.

이미지를 화면의 크기에 맞게 유동적으로 변화시키는 기능

#container img {
max-width:100%; height:auto;
}

위의 코드는 “container” 안에 있는 모든 이미지의 가로 크기를 최대 100%, 즉 container의 크기에 맞춰서 늘어나거나 줄어들게 한다는 뜻이다.

잡다한 추가 정보

티스토리 이미지 유동적으로 변화시키기
.article img {max-width:100%; height:auto;}
.article span { width:100% !important;}

(개인적으로 기억해두려고 적어놓았다.)
위의 코드를 티스토리 style.css 하단에 넣으면 된다. (아마도 기존에 반응형 스킨에는 적용되어 있을 것이다. 위의 코드는 혼자 반응형 블로그를 만들어보고자 하는 분들께 도움이 될듯.)

워드프레스에서는 설치하면 기본으로 깔려있는 반응형 테마가 있다.
난 Twenty Eleven 테마를 사용 중이다.
(2015.04.12) 반응형 테마가 아닌 Twenty ten 테마를 혼자 반응형으로 뜯어 고쳐서 사용중이다.

티스토리는 티스토리 반응형 스킨을 검색하면 반응형 스킨들을 찾을 수 있다. (직접 사용해보진 않았다.)

애드센스도 반응형을 지원하기 시작했는데 이 블로그를 pc에서 보고 있다면 창을 가로로 많이 줄여서 새로고침해보면 다른 크기의 광고가 뜰 것이다.

추천 링크

CSS 강좌 | 반응형 레이아웃 만들기
http://www.cmsfactory.net/node/10362
내가 쓴 글은 자세한 설명이 없어서 초보자라면 이해하기 어려울지도 모르겠다. 여기 링크의 블로그는 좀 더 자세하게 설명하고 있고 예제도 있어서 초보자에게도 도움이 될 것 같다.

This entry was posted in 워드프레스, 블로그 and tagged , , , . Bookmark the permalink.

2 Responses to 반응형 웹 레이아웃 원리 (반응형 블로그, 이미지, 티스토리, 워드프레스)

  1. zymnopedie says:

    혹시 조금만 도와주실 수 있나요?? 반응형을 추가해서 만드려는데 잘 안 되네요…

댓글 남기기