Category
Date
2009/09/25 15:51
티스토리 스킨 만들기 (초보) - 5강. 레이아웃
이번 강에서는 스킨의 레이아웃을 나누어보겠습니다.
중급자를 위한 티스토리 스킨 수정 팁 보러가기
사이드바를 다룰 것이라 예고했는데, 레이아웃 부터 먼저 잡아야 하는 것을 깜빡했습니다. ㅈㅅ
다음부터는 실현 가능한 약속만 할게요. ^^;

이처럼 '<!-- 내용 -->' 으로 각주를 달 수 있습니다. 나중에 스킨 수정이 편리해져요.
지금껏 스킨 강의 따라하시면서 저장해두셨던 파일들 (a.html, a.css, skin.html)은 몽땅 삭제하셔도 좋아요.
새로운 마음가짐으로 스킨을 만들어봅시다!
일단 원하는 위치에 폴더를 하나 만듭시다.
저도 '오리' 폴더는 버리고 새로 하나 만들어야겠군요.
'simple' 이라는 이름으로 폴더를 생성해주세요.
이제 크림슨에디터를 실행합니다.
새 파일을 만듭니다. (Ctrl+N)
아래처럼 Document > Syntax Type > Html 을 선택합니다.
먼저 저장부터 해 놓읍시다.
아까 만든 'simple'폴더 안에 파일명 'skin.html'로 저장합니다. (Ctrl+S)
지금부터 소스 한 줄 입력할 때 마다 Ctrl+S를 눌러 저장하는 습관을 들이세요.
그리고 실수했을 때의 실행취소 단축키는 Ctrl+Z입니다. 다시실행은 Ctrl+Y.
열심히 작성한 소스 날아가면 어디 하소연 할 데도 없고 울고 싶어집니다. ㅠ_ㅠ
skin.html에 기본적으로 들어가야 하는 아래 '더보기' 안의 내용들을 복사(Ctrl+C)해서 붙여넣기(Ctrl+V) 하세요. ^^
아무리 뛰어난 코더라 해도 이 소스들의 스펠링을 하나하나 다 외우진 못 할 거예요. 앞으로도 스킨을 만들 때 이런 기본적인 내용들은 언제나 복사해서 붙여넣으면 됩니다.
skin.html에 붙여넣으세요 - 더보기
그리고 Search > Replace (Ctrl+R) 을 클릭하여
아래처럼 찾을 말에 '샵샵' 바뀔 말에 '##' 을 입력하고 'Replace All' 해줍니다.
'샵샵'이 '##'으로 모두 바뀌었죠?
print.css를 사용하지 않으실 거면, 7번째 라인은 불필요하니 삭제하셔도 좋습니다.
이 스타일시트가 필요한 이유는 인쇄할 때 불필요한 것을 지우고, 깔끔하게 제목과 본문만 나오도록 하기 위함입니다.
그러나 저는 삭제할거예요...ㅋㅋㅋㅋ 사용하실 분들을 위해 나중에 print.css 파일 만드는 법을 알려드리도록 하지요.
<head>는 뇌, <body>는 몸체 역할이라고 했습니다.
티스토리 스킨은 <body>와 </body> 사이에 있는 <s_t3>와 </s_t3>사이에 내용을 입력하면 됩니다.
1강에서 구상했던 스킨 레이아웃을 볼까요?
큰 분류로 몇 개의 레이어가 필요한지 한 눈에 보이는군요.
상단레이어, 좌측레이어, 우측레이어가 그 것입니다.
그리고 이 세 개의 레이어를 감싸주는 레이어가 필요합니다.
왜냐구요? 내용 전체를 가운데, 혹은 우측으로 정렬시키는 기능도 하고, 레이아웃을 다양하게 변경할 수 있기 때문입니다. 아무튼 없으면 나중에 몹시 불편해지니까 믿어보세요. ㅋㅋ
아래처럼 작성하고 각각의 스타일은 style.css에서 지정하면 되겠네요.
<div id="container">
<div id="header">상단레이어</div>
<div id="content">좌측레이어</div>
<div id="sidebar">우측레이어</div>
</div>
정리해보았습니다.
이처럼 '<!-- 내용 -->' 으로 각주를 달 수 있습니다. 나중에 스킨 수정이 편리해져요.
여러분이 사용하고 있는 블로그에서는 테스트해 볼 수 없으니, 제가 테스트한 스크린샷으로 대신 보세요.
지금까지의 작업을 브라우저에서 보면 이렇습니다.
style.css를 전혀 손보지 않았으니 별로 놀랍지도 않군요. ㅋㅋ
마법의 css로 레이아웃을 제대로 잡아봅시다.
크림슨 에디터에서 새 파일을 만들고 (Ctrl+N)
메뉴의 Document > Syntax Type > CSS 를 선택합니다.
이번에도 먼저 저장부터 해 놓겠습니다. skin.html이 들어있는 'simple' 폴더에 style.css로 저장합니다.
소스 한 줄 입력할 때 마다 Ctrl+S 잊지 마세요.
먼저 아래의 소스를 복사해서 style.css에 입력하세요.
@charset "utf-8";
body {background-color:#CCCCCC}
a,input {selector-dummy :expression(this.hideFocus=true); text-decoration:none}
img {-ms-interpolation-mode:bicubic; border:none;}
첫 번째 줄은 최상단에 필수적으로 들어가야 하는 내용으로, 유니코드를 utf-8로 불러들이는 것입니다.
두 번째 줄의 body에 배경색을 설정해 보았습니다. body에 배경색을 설정하면 온 화면에 색이 채워지는 것입니다.
세 번째 줄은 링크된 곳에 클릭하면 생기는 점선테두리를 없애기 위해 넣어보았는데, 몇몇 브라우저에서는 먹지 않습니다.
점선테두리가 그다지 거슬리지 않으시면 세 번째 줄을 삭제하셔도 됩니다.
마지막 줄은 이미지파일을 원본보다 크거나 작게 출력할 때 이미지가 깨져 보이는 익스플로러의 '이미지 계단현상' 을 방지하기 위해서 넣었습니다.
이제 container, header, content, sidebar 레이어의 속성을 설정해 봅시다.
먼저 감싸는 레이어인 container부터 설정해 보겠습니다.
가로 크기를 소박하게 800px로 하고
width:800px;
넷북 등 작은 모니터를 사용하는 사람들을 위해서 전체 가로크기는 1000px을 넘기지 않는 것이 좋습니다.가운데 정렬이 되게 합니다.
width:800px; margin:20px auto
큰 모니터를 사용하는 사람들을 위해서 블로그를 가운데로 정렬하는 것이 좋습니다. 한 쪽으로 치우쳐 있으면 고개가 아파요. (경험담 ㅋㅋ)
'margin'은 바깥 여백을 뜻합니다. 안쪽 여백은 'padding'입니다.
margin과 padding 값을 주는 방법은 여러가지가 있습니다.
먼저 위에 쓴 '20px auto' 는 위 아래에 각각 20px 여백을 주고, 좌 우에는 자동으로 동일하게 주라는 말입니다. 고로 가운데 정렬이 되겠지요.
위쪽부터 시계방향으로 각각 다른 값을 줄 수도 있습니다.
'20px 50px 10px 80px' 를 입력하면 위 여백 20px, 오른쪽 여백 50px, 아래 여백 10px, 왼쪽여백 80px가 됩니다.
알려드린 두 가지 방법은 약식표기입니다.
정식표기는 아래의 페이지를 참고하세요.
http://ilmol.com/wp/css/css_dictionary/margin-padding/
http://ilmol.com/wp/css/css_dictionary/margin-padding/
container의 완성된 속성을 style.css에 아래와 같이 입력합니다.
#container {width:800px; margin:20px auto}
이런 짧고(?) 많이 쓰이는 소스는 복사하지 않고 직접 입력하는 버릇을 들이셔도 좋습니다. ^^;
두 번째로 상단 레이어인 header의 속성을 설정해 봅시다.
세로 크기를 200px로 하고, 배경색을 넣습니다.
height:200px; background-color:#555555;
글씨색을 하얗게 해줍시다.
height:200px; background-color:#555555; color:#FFFFFF
배경을 짙은 색으로 주었기 때문이지요.header의 완성된 속성을 style.css에 아래와 같이 입력합니다.
#header {height:200px; background-color:#555555; color:#FFFFFF}
중간점검 해봅시다. 조금씩 흐뭇한 모양새를 갖추어가는군요. ^^
이제 본문 출력 부분인 content 레이어의 속성을 설정합시다.
가로 크기를 580px로 하고, 배경색을 흰색으로 지정합니다.
width:580px; background-color:#FFFFFF;
가독성을 위해서 본문의 배경은 흰색을 추천합니다.좌측으로 오게 하기 위해 float 속성을 줍니다.
width:580px; background-color:#FFFFFF; float:left
좌측으로 위치시키기 위해서 'float:left'를 입력하였습니다. 우측에 오게 할 때는 'float:right'를 입력하면 됩니다.content의 완성된 속성을 style.css에 아래와 같이 입력합니다.
#content {width:580px; background-color:#FFFFFF; float:left}
마지막으로 sidebar 레이어의 속성을 설정합시다.
가로 크기를 220px로 하고, 배경색을 채워줍니다.
width:220px; background-color:#AAAAAA;
container레이어의 가로크기를 800px, content 레이어의 가로 크기를 580px로 지정했으므로
sidebar레이어의 가로크기는 800px에서 580px를 뺀 220px로 정확히 지정해줍니다.^^
우측으로 오게 하기 위해 float 속성을 줍니다.
width:220px; background-color:#AAAAAA; float:right
sidebar의 완성된 속성을 style.css에 아래와 같이 입력합니다.
#sidebar {width:220px; background-color:#AAAAAA; float:right}
지금까지 작성한 style.css소스입니다.
클릭해서 보세요.
브라우저에서 점검해 보겠습니다.
와우, 이제 스킨의 대략적인 레이아웃이 갖춰졌습니다. ^^
다음 강에서는 상단 레이어에 블로그타이틀과 메뉴(블로그,태그로그,미디어로그,지역로그,방명록)를 표시하고,
시간과 스크롤바의 여유(?)가 되면 사이드바도 작성해보도록 하겠습니다.
다음뷰 버튼은 이제 빼려고 합니다. 추천을 많이 받으려면 활동을 해야 하고 복잡하더군요.. ㅎㄷㄷ
비록 강의를 보러 오는 사람들의 수는 적지만
이 강의를 보고 스킨을 자유자재로 직접 만들 수 있게 되면 바랄 게 없겠습니다. ^^
만약 한글깨짐 현상이 있으면 아래와 같이 수정하세요.
skin.html 에서
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 대신
<meta http-equiv="Content-Type" content="text/html;charset=euc-kr"> 을 입력
style.css 에서
@charset "utf-8"; 대신
@charset "euc-kr"; 을 입력
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 1강. 스킨의 기본, 스킨 구상
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 4강. skin.html의 구조
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 8강. 사이드바 Ⅱ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 9강. 사이드바 Ⅲ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 11강. 방명록
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 13강. 포스트 내용
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 14강. 트랙백과 댓글
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 2강. Html,CSS 란?
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 3강. Html,CSS의 실습
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 4강. skin.html의 구조
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 6강. 블로그타이틀,메뉴
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 7강. 사이드바 Ⅰ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 8강. 사이드바 Ⅱ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 9강. 사이드바 Ⅲ
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 10강. 미디어로그, 지역로그, 태그로그
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 11강. 방명록
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 12강. 검색결과, 페이지 표시
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 13강. 포스트 내용
[웹디자인+블로그팁] - 티스토리 스킨 만들기 (초보) - 14강. 트랙백과 댓글
-
-
yureka01
Edit/DelReply
오오..봐도 모르겟던데...하나하나 알아가는제미가 아주 솔솔한데요 ^^머진 패딩..이거 이런뜻이있었군요 ㅋㅋ감사감사~~2009/09/25 16:54
일단 RSS링크 필 ^^ -
cdmanii
Edit/DelReply
천천히 따라하면 누구나 가능하게 완벽하게 설명하셨어요. 근데 저도 궁금한거 하나 있어요 질문좀 드릴께요2009/09/25 17:21
머리속에 생각난 2가지 방법 다 상관없다고 생각은 하지만 뭔가 원칙이 있는건지 의견이 궁금해서요
만약 container 를 800px 로 잡고 content 는 600px , sidebar 는 200px 로 잡고 float 를 본문 사이드바를 각각 left , right 로 잡으면 딱 맞아서 붙게 되겠죠. 근데 사이드바랑 본문이랑 여백을 좀 줘야할테니까요.
그래서 첫번째로는 container 를 800px 를 주고 , content 는 580px , sidebar는 200px 주고 left , right 로
붙여주면 가운데 20px 만큼 공간이 생기겠죠. 이렇게 하는것과,
두번째로는 맨위의 방법대로 한뒤 (600px,200px) 사이드바가 200px 인상태에서 padding: 5px; 이런식으로
줘서 공간을 만드는 방법이랑 이렇게 2가지 일거라고 생각이 드는데요
당연 본문에다가도 padding 을 줘서 띄울 수 도 있을것같구요.
둘다 상관없는거죠 ? 이부분 의견이 좀 궁금해서 묻고싶어서 질문 올려봅니다 ^^ -
지우개닷컴
Edit/DelReply
이제 본격적으로 들어가네요.2009/09/25 18:14
맞아요~~ 넷북이나 해상도 작은 모니터에선 스크롤바가 생겨서 보기 싫어요~ 1024x768 황금비율 무시 못하죠. 유익한 강의 감사합니다^^* -
White Rain
Edit/DelReply
재미있고 쉽군요. 저도 저만의 스킨 제작을 조금씩 하고 있는데 도움이 많이 됩니다.2009/09/25 19:29
이 글을 다음뷰로 송고하시면 좋을 텐데요?
한꺼번에 하지 마시고 1강부터...하루 하나씩...^^ 아마 큰 인기를 끄실 듯. -
-
-
-
-
-
행복박스
Edit/DelReply
처음에는 마냥 어려웠는데 이제 하나 하나 보다보니깐 눈에 들어오는것도 있고2009/09/28 01:32
벌써부터 다음 강의가 기다려집니다...
어쩜 이렇게 정리를 잘하세요
게다가 설명을 너무 잘해주셔서
저같은 사람에게는 진짜 최고예요..^^ -
popeye
Edit/DelReply
햐`~ 그토록 찾고 있던 스킨 강의를 해 주셔서 대단히 감사합니다. 용의자님 강의와 함께 두 곳에서 공부를 하니 예습과 복습이 되니까 더 좋네요. 정말 감사합니다. 두 분 모두요^^2009/09/28 02:22 -
decoder
Edit/DelReply
와.. 강의 내용이 좋네요. ^^2009/09/28 12:56
제 블로그 스킨을 바꾸고 싶긴 한데, 마땅히 마음에 드는게 없어서
그냥 첨에 만들때 쓰던걸 근 3년째 쓰고 있는데, 강좌 보고 공부해서 나중에 제 손으로 직접 바꿔봐야겠습니다. ^^
다음 강의도 기대되네요~~~ -
-
라뷰라뷰 Edit/DelReply오늘 처음 보고 완전 빠져들어서 배우고 있습니다^o^2009/10/08 02:13
한가지 안되는 점이 있어서 글 남기는데요..ㅋㅋ
상단레이어 좌측레이어 우측레이어..
이게 창에 표시가 안되고 네모로 되네요..
혹시나 해서 영어로 바꿔보니까 영어는 잘 표시되네요..ㅠㅜ
이게 무슨 문제인가요..!!!!
참고로 전 생 초보 입니다..쿄쿄
라뷰라뷰
-
2009/10/08 13:51
저도 잘 모르지만 아래 검색결과로 들어가 한글깨짐방지 메타 태그를 참고해보세요.
http://search.naver.com/search.naver?ie=UTF-8&query=html+한글+깨짐
-
-
-
그소년 Edit/DelReply하다보니 저도 한글 글씨가 깨졌었는데요2009/11/05 18:52
<head> 위에 다음과 같은 소스를 입력해줘야 하더군요.
한글을 사용한다라고 알려주는 거라더군요.
<meta http-equiv="content-Type" content="text/html;charset=euc-kr">
그소년
-
하나크린
Edit/DelReply
저도 한글이 네모네모로 나와서 보기에서 인코딩을 한글로 바꿔더랫죠.2009/11/12 12:30
넘넘 신기하고 재미있는 세계로 인도해(?)주셔서 감사합니다. 그레이스님 러브러브! -
치고
Edit/DelReply
이제 막 시작했는데 너무 잼있네요 밤새게 생겼어요.2009/12/15 00:01
빨리 블로그 스킨 잘 만들고싶네요
강의 너무 감사하구요 감기조심하세요 -
바닐라민트 Edit/DelReply기존의 스킨들에 지루함을 느껴서 직접 스킨을 제작하려고 들리게되었습니다.2009/12/17 17:15
HTML 기초부터 차근차근 배워가고있는데요..
3단형 스킨의 경우 사이드바를 어떻게 처리하는지 궁금해서요.
말씀하신대로 상단/하단 사이드바를 나누면 좌/우가 아닌 말그대로 상/하단으로 붙어버려서요..
제가 추구하는건 사이드바 요소들이 가로정렬되는거라..답변 부탁드려요^^
바닐라민트
-
2009/12/18 01:04
위 강의의 우측 레이어 부분에 사이드바를 가로정렬하려면
<div id="sidebar">
<div id="sidebar1"></div>
<div id="sidebar2"></div>
</div>
이런 식으로 해서 sidebar1, sidebar2 에 float값을 주세요.
가로로 3개 나열시려면 sidebar3 까지 생성하면 되구요..
이 강의를 1강부터 5강까지 자세하고 정확하게 공부하시면
3단 사이드바든 4단 사이드바든 어떤 레이아웃이건 간에 스스로 만드실 수 있을거예요.
화이팅.
-
-
-
르디유 Edit/DelReply재밌게 잘 읽고 있습니다. ㅋㅋ2010/01/10 22:03
오늘 저녁에만 벌써 5강까지 읽고 따라하고... 너무너무 재밌어요 >.<
저도 Grace님처럼 멋진 블로그, 갖고 싶네요 ㅋㅋㅋㅋㅋㅋㅋ
좋은 강좌 감사합니다. 앞으로도 여기서 공부할게요!
르디유
-
-
아룸파
-
하네바라 Edit/DelReply블러그 너무 알차요~그림도 너무귀엽구요~~ -ㅅ- 처음하는거라서 css는요..2010/01/18 15:36
html도 완전 초보지만요..그래도 하다보면 잘할꺼햐!! 햇지만..
역시 알아갈수록 힘드네용.ㅠ
하네바라
-
THK
Edit/DelReply
이제 조금씩 보이기 시작하네요 ㅠㅠ2010/02/09 20:27
근데 Grace님. 죄송스럽지만 글 수정좀 해주시면 안되겠습니까??
저도 "그소년"님의 댓글을 보고 한글깨짐현상을 해결하였지만, 저처럼 안되는 분들이 계실거라고 생각합니다.
뒷사람의 수고를 덜기 위하여
<meta http-equiv="content-Type" content="text/html;charset=euc-kr">
본문에 추가해주셧으면합니다. -
퓌그렛 Edit/DelReply1강부터 차근차근 보고 있어요~2010/02/19 10:54
태그에 대해 하나도 몰랐는데 지금은 조금은 알 것 같아요.
덕분에 너무 좋은것 유익한 것 알게 됩니다.
나중에 강의 다 듣고 제 스킨을 만들게 되면 꼭 초대할게요!
퓌그렛
-
단향 Edit/DelReply와. 저도 나모를 써볼까했는데 그레이스님 강의가 초보자가 배우기에 알맞아 보여서 따라했을 뿐인데2010/04/15 02:36
너무 좋습니다!!! ♡
단향
-
nana
-
와이케이
-
-
강냉이 Edit/DelReply그레이스님 유익한 강좌 재미있게 따라하고있어요^^2010/07/31 00:40
저도 한글 깨짐 현상이 있었는데 이것저것 건드려보다가
document의 encoding type설정을 utf-8 encoding (with bom)로 바꿨더니 문제없이 잘 나옵니다
제가 설정한게 맞는건지 모르겠네요
이렇게 했을 때 다른 컴퓨터에서도 이상없이 나오는 건지 궁금합니다
강냉이









