티스토리 스킨 기본 레이아웃 알아보기

티스토리 반응형 스킨 제작을 위한 레이아웃 구성하기&디자인

요즘 아주 간단한 스킨을 먼저 제작을 하고 싶어서 HTML+CSS에 관한 공부를 하고 있는데요. 물론 전에도 HTML+CSS에 관한 프로젝트를 친구들과 함께 진행을 했지만 정말로 몇 년전에 해봤기 때문에 거의 초보자라고 생각하고 다시 기본부터 공부하고 있습니다.

일단은 이 글은 "강좌"라는 개념보다는 제가 공부하면서 조금이나마 정리를 해서 올리는 글이라고 생각하시면 됩니다. 물론 웹 개발을 처음하시는 분들에게는 좋은 정보가 되면 좋겠네요. 시작할까요?

반응형 웹 디자인이란?

웹 디자인의 기법 중 하나이며 웹에 접속하는 디바이스에 반응하는 디자인을 말합니다. 위에 그림과 같이 접속하는 기계에 따라서 웹 사이트가 스스로 디자인을 바꿔준다고 생각하는게 가장 쉽게 이해할 수 있겠네요. 제가 HTML5 + CSS3를 공부할 때만 해도 반응형 웹 사이트는 그렇게 많지가 않았는데요. 최근에는 정말로 다양한 디바이스가 나오면서 필수가 아닌 필수가 되버린 현실이죠. 

티스토리에서는 반응형 스킨을 적용하면 모바일 스킨은 사용하지 않습니다. 반응형 스킨을 적용 후에는 첫 번째로 모바일 스킨을 OFF 하셔야 합니다. 즉, 그 이유는 위에서 언급했듯이 PC 와 모바일에 대응하는 레이아웃을 구성해야 된다는 소리겠죠?

PC 버전 레이아웃 구성하기

일차적으로 PC 버전 레이아웃 구성에 관해서 이야기 하겠습니다. 위에 있는 레이아웃이 가장 기본적인 구성인데요. 정말로 티스토리에서 제공하는 스킨 목록을 보면 이 구성이랑 전반적으로 많이 비슷하다는 느낌을 받을 수가 있습니다. 또한 제가 생각하기에는 이 구성이 가장 광고를 효율적으로 적용할 수 있다고 말할 수 있겠네요. 물론 개인 생각에 따라서 다르겠죠? 저는 일단은 가장 기본적인 구성으로 반응형 스킨을 제작할려고 생각하고 있습니다.

웹 레이아웃의 가장 기본적인 코드인데요. 위에 그림과 같이 "Container" 안에 "header","content","sidebar" 그리고 "footer"를 넣는다고 생각하시면 됩니다.

추가 정보. 응용프로그램도 똑같지만 HTML에서 "주석"이라는 기능을 하용할 수 있습니다. 정말로 잘하는 프로그래머는 주석 처리를 잘한다고 하는데요. 프로그램 개발을 하면서 동료 혹은 다른 사람들이 알기 쉽게 주석을 작성하면 그만큼 업무의 질도 올라겠죠? HTML 주석 명령어는 <!--로 시작해서 -->로 닫으시면 됩니다.

해석을 일단 넘어가겠습니다. HTML을 구성하면 다음으로는 CSS를 작성해야 되는데요. 여기서 저의 개념을 살짝 이야기하면 HTML 같은 경우는 뼈이고 CSS 같은 경우는 살이라고 생각하면 될거 같네요. 뼈를 구성했으니 살을 붙이면 되겠죠?

일단 위에 예제는 가장 기본적인 부분이고요. HTML에서 조금 더 추가해서 실행한 모습을 보여드릴게요.

HTML에 추가적으로 몇가지 더 넣어주고 CSS를 넣어주니 위에 그림처럼 화면이 뜨네요. HTML에서 작성한 내용은 별거 없으니 따로 이야기는 하지 않았습니다.

레이아웃 구성 쉽죠? 한번 도전하세요!! 감사합니다.