과거엔 블로그라는 형태도 각자 직잡 웹코딩을 하여 운영해야하는 시절이 있었지만. 지금은 대표적인 블로그 작성 사이트들이 있죠. 네이버, 구글, 티스토리, 이글루스 등, 아직 주목할만한 다른 업체는 나오지 않는듯 보이고, 업체 이용하지 않고 호스팅 서버를 구한후 직접 블로그를 제작하는 경우도 생겨나고 있습니다. 편한 프레임워크들 덕분이죠. 저는 환경을 직접 만드는것은 너무 오래 걸릴 것 같아서 티스토리의 힘을 빌리고 있습니다. 하지만 스킨이 너무 마음에 안들어서, 티스토리를 공부하면서 만들어 보려고 합니다.
그리고 새 스킨을 제작하고 싶으시면 꼭, 테마 시험용 블로그를 하나 만드신 후, 테스트용 글과 태그, 댓글등을 미리 작성 해 둡시다.
적어도 초보적인 HTML과 CSS에 대한 지식이 필요합니다.
티스토리 만들만한 수준의 HTML, CSS 공부글은 다음에 따로 올리도록 하겠습니다.
프로그램없이도 텍스트 파일을 생성하신후 복붙 하셔서 skin.html / style.css로 저장하셔서 실행하시면 됩니다.
제가 가지고 싶은 테마는 이런겁니다. 티스토리 설정을 하는데 너무 설정페이지가 이쁜것... 레이아웃은 좀 정석적인것을 하고 싶지만 색상 테마는 이것으로 가지고 싶더군요. 저 느낌을 살려서 시작해볼까 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./style.css" /> <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet"> <title>title</title> </head> <body> <div class="main"> <div class="header"> <div class="wrapHeader"> header </div> </div> <div class="wrapContent clearfix"> <div class="content"> content<br/> content<br/> content<br/> content<br/> content<br/> content<br/> content<br/> content<br/> content </div> <div class="sidebar"> sidebar<br/> sidebar<br/> sidebar<br/> sidebar </div> </div> <div class="footer"> <div class="wrapFooter"> footer </div> </div> </div> </body> </html> | cs |
우선 레이아웃 잡은 skin.html 파일입니다.
아직은 티스토리에 사용하는 치환자를 하나도 사용하지 않았습니다. 여기에 사용된 태그들은 전부 티스토리와 상관없이 순수하게 레이아웃만 짠것입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | body{ font-family: 'Nanum Gothic', sans-serif; color: #333; padding: 0px; margin: 0px; } .main{ background: #F3F5F7; } .header{ background: #fff; padding: 20px 0px; } .wrapHeader, .wrapContent, .wrapFooter{ width: 1080px; margin: 0 auto; } .content{ float: left; width: 744px; /* 720 + 12x2 */ margin: 8px 0px; background: #fff; } .sidebar{ float: left; width: 324px;/*300 + 12x2 */ margin: 8px 0px 8px 8px; background: #fff; } .footer { background: #fff; padding: 20px 0px; } /* float 버그 수정 */ .clearfix{ *zoom: 1; } .clearfix:after{ content: ""; display: block; clear: both } | cs |
그리고 그 파일에 적용된 style.css 파일입니다.입니다.
정말 순수하게 정석적인 header, footer로 위아래를 정리하고, 반응성 있게 이동 조정되게끔 내용과 사이드바를 가운데 끼워 넣었습니다. 이대로 작업해도 될 것 같습니다. 마음에 듭니다.
특이점은 세가지 웹폰트, auto margin, clearfix. 웹폰트는 아래 링크를 확인해보시면 알 수 있지만. 웹 사이트를 누구나 같은 폰트로 보이게 하고 싶지만. 서버에 그대로 올려두자니 용량과 트래픽이 부담이 생깁니다. 그걸 서버에서 끌어와서 사용하는 방법입니다.
css 스타일 중 margin는 2개의 값을 입력한다면, 앞 숫자는 위아래 간격이고, 뒷숫자는 좌우 간격입니다. 그러므로 "0 auto" 로 지정한다면. 위아래 간격은 없고 좌우는 자동으로 가운데 맞춤 되는 효과가 있습니다.
최대한 HTML과 CSS는 어렵지 않게 썻지만. 여기서 이해 안되는것이 하나 있을 수 있다면 ".clearfix" 라는 스타일 클래스일겁니다만. 이건 그냥.. 외우시거나 복붙해서 쓰는게 정답입니다. 서로 다른 크기의 사각 영역의 태그를 한 라인에 쌓을때, float을 이용해서 한 라인을 점유하지 않게끔 해줘야하는데. 그렇게 해버리면, float 의 부모 객채가 내부의 크기를 제대로 인지 못해서, 반응성 있게 조정이 안됩니다. 그래서 내부의 자식들이 float 으로 사각 영역들이 쌓아지게 된다면 부모는 버그를 수정해야 하기때문에 저 css 내용이 필요합니다. 각 브라우저마다 버그를 수정하는법이 다르기 때문에 저 두가지를 사용합니다. 이에 관한 글도 언젠가 쓰도록 하겠습니다.
'프로그래밍 > 티스토리 스킨 제작' 카테고리의 다른 글
| 티스토리 스킨 만들기 #4 글 치환자 (1) | 2019.01.25 |
|---|---|
| 티스토리 스킨 만들기 #3 공통 치환자 (0) | 2019.01.25 |
| 티스토리 스킨 만들기 #2 스킨 구조 (1) | 2019.01.24 |