오늘은 레이아웃에 사이드 카테고리를 만들어 보겠습니다.
만드는 김에 간단한 관리자 메뉴와 글쓰기도 같이 만들어볼게요.
연습용으로 개설된 티스토리 블로그 (https://hijingjingpractice.tistory.com/)
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<!--
<!DOCTYPE html> --HTML5 사용선언--
<html lang="ko"> --한글로 된 문서--
<head>
<meta charset="utf-8"> -인코딩--
<title>[ ##_title_## ]</title> -- 웹브라우저 창에 표시되는 이름 --
</head>
<body>
<s_t3>
<div id="container">
--웹문서 상자--
<div id="header">
--제목 상자--
<h1><a href="[##_blog_link">[ ##_title_## ]</a></h1>
</div>
<div id="wrap">
--메인 상자--
<div id="aside">
--사이드바 상자--
<s_sidebar>
<s_sidebar_element>
<div id="manage">
--관리 상자--
<a href="/manage/">관리</a>
<a href="/manage/post">글쓰기</a>
</div>
</s_sidebar_element>
</s_sidebar>
<s_sidebar>
<s_sidebar_element>
<div id="category">
--카테고리 상자--
<h2>카테고리</h2>
<div class="box">
--카테고리 리스트 상자--
[ ##_category_list ##]
</div>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<div id="content"> --내용 상자--
<h3>content</h3>
</div>
</div>
<div id="footer"> --정보 상자--
<h4>footer</h4>
</div>
</div>
</s_t3>
</body>
</html>
-->
|
HTML
제목 상자 Title을 [ ##_title_## ] 치환자 변경 - 제목변경시 자동 적용
aside에 s_sidebar, s_sidebar_delment 치환자 이용 - 티스토리 사이드바 치환자
manage, category 상자 2개 추가 - CSS 수정을 쉽게 하기 위해서 추가
manage - 관리 및 글쓰기 메뉴를 만들어서 링크
category - [ ##_category_list_## ] 치환자 삽입
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
/*
#manage { 관리 레이아웃
padding-top: 10px;
padding-bottom: 10px;
word-spacing: 20px;
border-bottom: thin solid;
text-align:center;
}
#manage a { 관리 레이아웃 링크
text-decoration: none;
color: #000000;
font-weight: 900;
}
#manage a:hover { 관리 레이아웃 링크 마우스 오버
color: #01e5fb;
}
#category h2 { 카테고리 이름
text-align:center;
}
#category .box { 카테고리 리스트 상자
margin-left: 10px;
margin-right: 10px;
}
#category li a { 카테고리 리스트 링크
color: #000000;
text-decoration: none;
}
#category li a:hover { 카테고리 리스트 링크 마우스 오버
color: #01e5fb;
}
1단계 분류 전체보기
#category ul {
list-style: none;
margin: 0;
padding: 0;
}
#category ul li {
}
2단계 카테고리 1, 2
#category ul li ul {
margin-top:10px;
padding-top:10px;
border-top: 1px solid;
}
#caterory ul li ul li {
}
3단계 서브 카테고리 1, 2
#category ul li ul li ul {
padding-top: 0;
padding-bottom: 10px;
margin-bottom: 10px;
border-top: none;
border-bottom: 1px solid;
}
#category ul li ul li ul li {
padding-left: 10px;
}
*/
|
CSS
레이아웃을 만들면서 마진, 패딩, 정렬, 테두리는 사용해봤으니깐 넘어가겠습니다.
카테고리 치환자를 적용하면 카테고리 관리에서 적용한 대로 나옵니다.
하위 카테고리가 없다면 최상위 1단계만 나올 건데 보통 하위를 만드니깐 저는 3단계까지 적용해봤습니다.
자신이 적용하고 싶은 대로 리스트 태그를 만들어 놓고 수정하시면 편합니다.
리스트 태그만 익숙해지면 금방 카테고리를 만들 수 있을 건데 리스트 스타일을 none으로 해놓은 건 하위 리스트를 수정하기 쉽게 해 놓은 거라서 삭제하면 티스토리에서 제공하는 펼쳐진 리스트가 나오게 되니깐 참고하시면 되겠습니다.
저는 테두리를 입히는 게 헷갈려서 조금 어려웠는데 여기저기 테두리를 만들다 보니 익숙해지더라고요.
나중에 수정하면 되니깐 저희가 처음 시작할 때처럼 일단 테두리를 만들어 보는 걸 추천합니다.
이렇게 카테고리까지 만들었으니 다음에는 내용 부분만 만들면 되겠네요.
눈치채셨겠지만 치환자를 이용해서 기본적인 부분만 만들면 완성이 될 것 같습니다.
이제 완성이 얼마 남지 않았으니 힘내 봅시다.
2019. 09. 10
html, css 전체 주석처리 - 현 블로그 스킨 코드로 인한 수정 방지
각 치환자 [ # ] 띄어쓰기 삽입
'(구) 티스토리 스킨' 카테고리의 다른 글
| 8. 티스토리 스킨만들기 (Html 초보) - 메인페이지 (3) (0) | 2019.09.20 |
|---|---|
| 7. 티스토리 스킨만들기 (Html 초보) - 메인페이지 (2) (3) | 2019.09.14 |
| 6. 티스토리 스킨만들기 (Html 초보) - 오류 (0) | 2019.09.10 |
| 5. 티스토리 스킨만들기 (Html 초보) - 메인페이지 (1) (0) | 2019.09.05 |
| 3. 티스토리 스킨만들기 (Html 초보) - Layout (0) | 2019.08.30 |
| 2. 티스토리 스킨만들기 (Html 초보) - Html 구조 (0) | 2019.08.28 |
| 1. 티스토리 스킨만들기 (Html 초보) - 기본준비 (Atom) (0) | 2019.08.28 |
| 0. 티스토리 스킨만들기 (Html 초보) (0) | 2019.08.26 |