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

(최근 업데이트 2020년 4월 9일)

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

반응형 웹을 만드는 방법

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

예제 html 파일을 보면 대략 감이 잡힐 것이라고 생각한다.
예제 html 파일의 화면에서 마우스 오른쪽을 클릭해서 페이지 소스 보기를 누르면 어떤식으로 만들어졌는지, 만들 수 있는지도 알 수 있을 것이다. (다시 말하지만 기본적인 html, css 코드에 대한 지식은 가지고 있어야 한다.)

코드 설명

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

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

body {-webkit-text-size-adjust: 100%;}

위의 코드는 아이폰에서 가로모드로 봤을 때 텍스트 크기가 자동으로 커지는 것을 방지해준다.

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

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

#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에서 보고 있다면 창을 가로로 많이 줄여서 새로고침해보면 다른 크기의 광고가 뜰 것이다.