Silver Library (Archived)
블로그 리모델링 - 6. 설계하고 시작해보기 본문
아무리 머리 속으로는 훤해도 그걸 매번 한게 아닌 이상, 점검대(checklist board) 가 필요한 법 입니다.
정말 계획대로 밀고 나가고 싶다면 더더욱 그렇습니다.
그래서 이리저리 알아보던 중, 공통된 사항을 발견했습니다.
바로 티스토리 블로그의 '스킨 파일 구조'.
SKIN ─┬─ index.xml
├─ skin.html
├─ style.css
├─ preview.gif
├─ preview256.jpg
├─ preview560.jpg
├─ preview1600.jpg
└─ images ─┬─ script.js
├─ background.jpg
├─ background.jpg
└─ background.jpg이것이 티스토리 스킨 적용을 위해 요구되는 '파일 구조' 이다.
index.xml 은 위 '파일 구조' 링크에서 제공하는 양식이 있으니 우선 해당 내용을 가져다 쓰기로 합니다. 그러면 실질적으로 작성해서 업로드 하는게 가능한 파일은 skin.html (파일명이 당연히 같아야 함) 과 style.css 정도로 보여집니다.
페이지는 더는 복잡하게 구상 하면 안 됩니다. 사실 처음 시작할 때 이 점을 간과 못한 게 실수였습니다.
너무하다 싶을 정도로 무성의해 보일지라도, 사실 모든 건물도 건설 할 때는 바닥과 기둥, 그리고 지붕은 마지막이죠.
<header>
<!-- add some element here -->
</header>
<section>
<article>
</article>
<article>
</article>
</section>
<footer>
<!-- some deco, or footnote-->
</footer>
이를 skin.html 본문에 넣고 시작하기에 앞서 html5 로 템플릿을 적용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>은빛 도서관</title>
</head>
<body>
</body>
</html>정말 시작만 한 모습. 이제 위에 구상한 저 뼈대를 이 코드 어딘가에 넣어야 한다.
상식적으로 떠오르는건 <body> 태그 지만, 잊지 말아야 합니다.
(1)header 는 맨 상단 위 간판.
(2)section 은 높은 확률로 정 가운데의 컨텐츠 글을 표시할 공간
(3) article 은 글 그 자체를 표기. 즉, 가운데 공간 안에 들어가야 할 추가 사각형 공간입니다.
(4) footer 는 마지막 단계. 바닥을 만들고 나면 아래에 기타 내용을 적어둡니다.
휴우, 처음 시작 보다는 덜 막막해 보이네요. 하나씩 적용해보며 적어 나가 보겠습니다.
프론트엔드 개발자가 되려면 최소한 퍼블리셔 수준은 당연히 갖춰야 할 테니까요.
'Personal DB > Unclassified record' 카테고리의 다른 글
| Open 과 Paid knowledge 의 경계? (0) | 2021.03.11 |
|---|---|
| 블로그 리모델링 - 7. 치환자는 두렵지않다 (0) | 2021.03.10 |
| 블로그 리모델링 - 5. 일시 중단, 중간 점검 (0) | 2021.03.10 |
| 블로그 리모델링 4. 현재 작업중 (0) | 2021.03.09 |
| 블로그 리모델링 3. - bootstrap, 치환자, 진행 목록 (0) | 2021.03.09 |
