RSS 구독
이웃추가
이웃추가
안녕하세요. 오늘은 티스토리 반응형 스킨제작기 2탄이예요.
지난시간에 웹프로그래밍 도구인 Brackets 를 이용하여 티스토리 스킨제작을 위한 환경설정을 했었죠. 오늘은 우리가 만들 스킨의 레이아웃을 구상해볼꺼예요.
※ 알림 저는 HTML/CSS/JavaScript 등과 관련한 전문지식은 없습니다. 따라서 본 시리즈는 "강좌"가 아니라는 점을 미리 알려드립니다. (좌충우돌하면서 함께 배워나가는 시리즈랍니다. ^^)
티스토리 반응형 스킨제작기 - 지난 포스팅
[작은설탕 IT/Blog] - 티스토리 스킨제작기 (1) - 개발환경 구축하기 (웹개발도구 Brackets 이용)
레이아웃 디자인
웹페이지를 만들 때, 제일 먼저 고려해줘야 하는 것이 "홈페이지 디자인을 어떻게 만들까?" 하는 부분입니다. 즉, 웹페이지의 레이아웃을 구상하고 디자인해줘야 한다는 거죠. 첫 시간에 말씀드렸다시피, 저는 이 시리즈를 통해 "반응형 스킨"을 만들 계획입니다. 반응형 스킨을 제대로 이해하고 계시다면 이미 아시겠지만, 티스토리 반응형 스킨은 티스토리가 자체적으로 제공하는 모바일 스킨은 사용하지 않습니다. 스킨적용 후, 첫번째로 해주는 설정이 바로 모바일 스킨을 OFF시키는 것이죠. 그렇단 얘기는, 반응형 스킨을 만들기 위해서는 PC버전뿐만 아니라, 기본적으로 모바일에 대응하는 레이아웃 디자인도 해줘야 한다는 겁니다.
하아~ 벌써부터 막막해지네요 ㅋ 일단 시작도 하기 전부터 걱정하지 말고, 우선은 PC버전부터 차근차근 디자인 해보도록 해요. 레이아웃을 여러개 디자인 한다고는 하지만, 주로 메인인 PC버전을 디자인 한 후, 미디어쿼리 를 이용해서 화면 가로폭에 맞추어 재배치하는 수준이라 (물론 재배치 후 몇몇 디자인들은 수정을 해주어야죠 ^^;;) 메인 페이지 레이아웃을 구상하고, 이를 구현해 놓으면 절반 이상은 완성이라고 봐도 되죠.
레이아웃을 디자인할 땐, 본인이 편한 도구로 그려주면 됩니다. 종이에 펜으로 그려도 좋고, 저처럼 파워포인트로 그려줘도 되고, 레이아웃 디자인을 위한 프로그램을 이용해줘도 좋습니다. (혹시, 알고계시는 레이아웃 디자인 프로그램 좋은거 있으면 소개해주세요 ㅠㅠ)
우선 기본적인 PC버전의 레이아웃부터 잡아볼까요?
PC버전 레이아웃
자, 위에 보시는 레이아웃이 제일 무난하게 많이 사용되는 2단 구성이예요. 예전엔 전체 구조를 감싸는 container 없이 디자인을 하기도 했다는데요. 요즘과 같이 반응형 웹디자인이 트렌드로 자리잡은 이후로는 전체 레이아웃을 container 로 감싸는 구조로 디자인하는 것 같더라구요.
제가 기본 레이아웃을 2단으로 잡은 이유는, "티스토리 반응형 스킨 #1"을 사용하다 보니, 사이드바가 없는 것이 못내 아쉽더라구요. 사이드바가 있으면, 최근글/카테고리 다른글 등의 사이드바 기능을 이용해 방문자들의 이탈률을 낮출 수도 있고, 무엇보다 애드센스 세로 대형 광고도 넣을 수 있을테니 말이죠.
메인 레이아웃을 정했으니, 무작정 코딩을 해볼까요? ㅋㅋㅋ (참 막무가내인 작은설탕이예요)
메인 레이아웃 디자인하기
우선 지난시간에 설정해놓은 Brackets를 실행해서, index.html 파일의 <body> 와 </body> 태그 사이에 다음과 같이 코드를 넣어주세요.
<div id="container">
<div id="header">header</div> <!-- header close -->
<div id="content">content</div> <!-- content close -->
<div id="sidebar">sidebar</div> <!-- sidebar close -->
<div id="footer">footer</div> <!-- footer close -->
</div> <!-- container close -->
코드의 내용은 별거 없습니다. 일단 id 를 "container" 라고 명명한 DIV 태그 안에 header / content / sidebar / footer 로 구성된 DIV들을 포함시킨 거예요. 그리고 각 DIV 영역 안에 해당 DIV가 뭔지 바로 알아볼 수 있게 각 DIV의 ID를 text로 써 넣어줬죠.
Tip ! HTML 코딩을 하실때, 태그가 닫히는 곳 뒤엔 위와같이 <-- 주석내용 --> 로 닫는 태그를 표시를 해주셔야 나중에 코드를 관리하실 때 편리해요.
이번엔 앞서 작성한 HTML에 스타일을 입혀볼꺼예요. style.css 파일로 가서 다음의 코드를 입력해주세요.
@charset "UTF-8";
div {text-align: center; color: white;}
#header {background-color: antiquewhite; width:100px;height: 100px;}
#content {background-color: aqua; width:100px;height: 100px;}
#sidebar {background-color: blue; width:100px;height: 100px;}
#footer {background-color: black; width:100px;height: 100px;}
첫번째 줄의 해석은 넘어가구요. 두번째 줄 코드에서 우리는 모든 DIV에서 글자는 가운데 정렬을 시키고, 글자색을 하얀색으로 정해주었어요. 그리고 세번째 줄부터 마지막 줄까지는, header / content / sidebar / footer 들의 스타일을 지정해주었는데요.
Tip ! CSS에서 #은 HTML 태그 중 id항목을 선택할 때 사용하고, 마침표( . )는 class항목을 선택할 때 사용해 줍니다. 즉, #header 는 id가 "header"라고 명명된 객체를 가리키구요. .header 는 class가 "header"인 객체를 가리킵니다.
위와같이 html파일과 css파일의 내용을 수정해주었으면, 파일을 모두 저장해주신 다음에, Brackets 프로그램의 우측 상단에 번개모양 아이콘을 클릭해주세요. (사실, 이 번개표시의 기능은 "실시간 미리보기"기능이기 때문에 저장을 안해주셔도, 최신 내용으로 미리보기 해줍니다.)
그럼 웹브라우저가 실행되면서, 우리가 디자인한 페이지가 다음과 같이 나타날꺼예요.
짜잔~ 화면에 header부터 footer까지 사각형들이 보이시죠? container는 별도로 텍스트나 스타일을 지정해주지 않아서 보이진 않지만, container가 저 4개의 상자를 이미 감싸고 있습니다. 각각 너비와 높이 모두 100px 크기로 지정했구요. 각 DIV의 색은 CSS에서 지정해준 색으로 표현이 되어있네요. ^^
Epilogue
이번 시간은 여기까지 진행할까합니다. 이 시리즈가, 저도 공부를 해나가면서 진행하는거라 아무래도 진도를 쭉쭉빼기가 어렵네요. ^^;; 그리고, 한 포스팅 당 많은 내용을 담으려고 하면, 시리즈 관련 포스팅들의 발행주기가 너무 늦어질것 같기도 하구요.
다음 포스팅이 발행되기 전까지, 저도 물론이구요 여러분도 이참에 HTML과 CSS에 대해서 조금은 공부를 하는 시간으로 삼으면 좋지 않을까요? ㅎㅎ (고급정보가 있으면 꼭 저에게도 알려주세요~ ^^)
다음 시간엔 앞서 코딩해놓은 DIV 상자(?)들을 레이아웃에 맞게 배치하는 과정을 진행해 볼게요. 무더운 삼복더위에 건강관리 잘 하시구요. 다음 시간에 뵈요~ ^^
'작은설탕 IT > Blog' 카테고리의 다른 글
| 티스토리 스킨제작기 (4) - 티스토리 스킨 레이아웃 구성하기 (12) | 2016.08.02 |
|---|---|
| 티스토리 스킨제작기 (3) - 레이아웃 만들기 (1) | 2016.07.28 |
| 티스토리 스킨제작기 (1) - 개발환경 구축하기 (웹개발도구 Brackets 이용) (3) | 2016.07.24 |
| [티스토리 반응형스킨#2 - 시리즈1] 반응형스킨#2로 스킨 바꾸기 (16) | 2016.07.22 |
| 티스토리 반응형스킨에 구글 애드센스 광고 삽입하기 (22) | 2016.07.19 |