RSS 구독
이웃추가
이웃추가
Prologue
안녕하세요. 오늘은 "티스토리 반응형스킨 제작기" 연재물의 3편 입니다. 지난 시간에 우리는 레이아웃의 기본이 되는 <div> 구조를 네모난 상자모양으로 만들어놨었죠?
오늘은 지난시간에 만든 구조를 좀더 레이아웃답게 만드는 과정을 진행할 꺼예요. 혹시 지난시간에 보여드린 기본 레이아웃 디자인 기억하시나요?
기본적인 2단 구성의 레이아웃이예요. 이번 포스팅에선, 우선 위와같은 레이아웃을 만드는 과정을 진행할꺼구요. 글이 너무 길어지지만 않으면, 사이드바의 폭을 고정폭으로 설정하고 본문폭에 가변폭을 적용하는 과정까지 진행해 볼께요.
레이아웃 배치하기
이전 시간에 4개의 <div>를 포함하여 container <div>까지, 총5개의 <div>를 만들어 놨었죠? 이제 이들의 배치를 아까보여드린 레이아웃처럼 배치시켜야 하는데, 이는 CSS파일을 수정해서 적용시키면 됩니다. style.css 파일을 다음과 같이 수정해 주세요.
@charset "UTF-8";
body { margin:auto; }
h1 { text-align: center; color: white; }
#header {
position: relative;
float: left;
width: 100%;
height: 100px;
background-color: green;
}
#content {
position: relative;
float: left;
width: 80%;
height:500px;
background-color: red;
}
#sidebar {
position: relative;
float: left;
width: 20%;
height: 500px;
background-color: blue;
}
#footer {
position: relative;
float: left;
width: 100%;
background-color: black;
}
그럼 Live Preview 화면엔 다음과 같이 표현됩니다.
일단 CSS3 코드에 대한 주요 설명부터 드리자면,
- line 1 웹페이지에 꽉채워서 배치하기 위해 <body>의 margin을 없애는 효과를 준다.
- line 5, 12, 19, 26 각 <div> 의 배치를 이전 요소와 자연스럽게 연결한다.
- line 6, 13, 20, 27 왼쪽 정렬한다.
- line 14 content의 가로폭을 화면폭의 80%로 지정한다.
- line 21 sidebar의 가로폭을 화면폭의 20%로 지정한다.
CSS속성중 position 속성에 대해서는 다른 블로그에도 잘 소개되어있습니다. 일단 제가 참고한 글을 링크해드릴게요.
자~ 일단 화면에 보여지는 모습은, 처음에 저희가 디자인한 레이아웃과 얼추 비슷하게 구현했습니다. 하지만, 여기서 문제점(제 기준에 맞지않는...)이 하나 있어요.
본문폭과 사이드바의 폭이 퍼센트(%)비율로 되어있다는 겁니다.
기본적으로 사이드바는 고정된 폭을 가지는 플러그인들을 집어넣어 사용하는데요. 이렇게 사이드바 마져도 가변폭이면 화면 사이즈에 따라 플러그인이 찌그러지던지 레이아웃 밖으로 삐져나오게 되겠죠.
그래서 우린 이렇게 바꿔볼꺼예요. 사이드바의 가로폭은 320px로 고정시키고, 본문(content)의 폭만 가변폭으로 설정하는거죠.
가로폭 수정하기 (본문 가변폭 적용)
다시 Brackets 로 돌아가서 style.css 파일의 #sidebar와 #content를 다음과 같이 수정해주세요.
#sidebar {
position: relative;
float: left;
width: 320px;
height: 500px;
background-color: blue;
}
#content {
position: relative;
float: left;
width: calc(100% - 320px);
height:500px;
background-color: red;
}
위 코드를 보시면 수정된 줄만 따로 강조를 해놓았습니다. 수정된 내용을 보면, sidebar의 가로폭(너비)를 320px로 수정하였습니다. 그리고 content(본문)의 너비를 calc() 함수를 이용해서 계산된 값을 넣어주었죠. calc(100% - 320px) 는 "화면전체 너비에서 320px를 뺀부분만큼의 값" 이라는 뜻입니다. calc() 함수에 대해서는 이전에 포스팅한 내용을 참고하시죠.
이렇게 수정을 하면, 사실상 눈에띄는 변화는 없습니다. 그러나, 미리보기창의 가로폭을 줄여보시면 다음과 같이 sidebar의 폭이 고정되고 있다는걸 확인하실 수 있을꺼예요.
보이시나요? 사이드바의 너비를 %로 주어줬을때는 브라우저의 가로폭을 줄이면 설정된 %비율에따라 사이드바의 너비가 함께 줄어들었지만, 고정값을 주면 브라우저의 가로폭에 상관업이 항상 일정한 너비를 가지게 됩니다. 반면, content의 너비는 브라우저의 가로폭에 따라 그 너비가 함께 변하게 되죠.
Epilogue
이번 시간엔 초기 레이아웃 디자인과같이 레이아웃을 배치하고, 사이드바와 본문의 너비를 조정하는 과정까지 설명드렸어요. 다음시간엔 음..... 음.......... 에........ 음.........
레이아웃을 좀더 가다듬는 과정을 진행해 볼까요? 현재 레이아웃은 지나치게 너비가 가변적이라서, 아래 그림과 같이 container에게 "최대폭"을 설정해 주려고 해요.
이렇게 하면, 브라우저의 가로폭을 아무리 넓혀도, 전체적인 레이아웃은 일정폭 이상으로 넓어지지 않게 할 수 있죠.
그럼 오늘은 여기까지, 다음시간에 만나요~ 안녕~
'작은설탕 IT > Blog' 카테고리의 다른 글
| 티스토리 스킨제작기 (5) - 헤더(HEADER) 구조 구체화시키기 (11) | 2016.08.03 |
|---|---|
| 티스토리 스킨제작기 (4) - 티스토리 스킨 레이아웃 구성하기 (12) | 2016.08.02 |
| 티스토리 스킨제작기 (2) - 레이아웃 잡기 (1) | 2016.07.27 |
| 티스토리 스킨제작기 (1) - 개발환경 구축하기 (웹개발도구 Brackets 이용) (3) | 2016.07.24 |
| [티스토리 반응형스킨#2 - 시리즈1] 반응형스킨#2로 스킨 바꾸기 (16) | 2016.07.22 |