2018년 10월 22일 티스토리가 새 단장을 하면서 세 가지 스킨이 추가됐죠.
아카이브와 블로그로 활용하고 싶었던 저는 용도대로 자유롭게 변경할 수 있다는 'Whatever'가 끌리더군요.
이름을 넣고, 메뉴를 대충 정한 다음에 홈 화면을 눌러 봤습니다.
역시 티스토리는 손을 좀 봐 줘야 한다는 것을 느끼고, HTML/CSS를 만져보기로 했습니다.
(블로그관리 > 스킨편집(새 탭) > HTML 편집)
동시에 다른 창으로 홈 화면에 접속합니다. 구글 크롬에서 상단 메뉴바 오른쪽 버튼을 눌러 '검사'를 누릅니다.
오른쪽에 코드가 나옵니다. 이게 이 홈페이지의 '설계도' 역할을 해 주는 HTML 코드입니다.
HTML 코드 하단에는 스타일을 알려주는 CSS 정보가 나옵니다.
메뉴바에 마우스를 갖다 대면, 다음과 같이 영어 문자가 나옵니다.
이 부분을 구성하는 HTML 코드가 <header>라 적힌 부분에 입력돼 있다는 의미입니다.
작업을 위해 한 쪽에는 코드가 나열된 구글 크롬 창을 띄워두고,
다른 한 쪽에는 티스토리 html/css 편집창을 띄워줍니다.
(티스토리 블로그관리(하단 '관리자' 클릭) > 왼쪽 메뉴바 '스킨편집'(새 탭) > 오른쪽 맨 위 'html 편집' 버튼 클릭)
그리고 키보드에서 ctrl+f(검색)를 눌러줍니다. header 를 입력하고 엔터를 누르면, 위치가 나타납니다.
기존 스킨의 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 | <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="-- 생략 --"> <title>티스토리 Whatever 스킨 위에 메뉴바 추가하기</title> <link rel="stylesheet" href="./style.css"> <script src="-- 생략 --"></script> </head> <body id="--생략--" class="--길어서 생략--"> <s_t3> <div id="acc-nav"> <a href="#content">본문 바로가기</a> </div> <div id="wrap"> <header id="header"> <div class="inner"> <h1> <a href="https://ddobagi.me/"> <s_if_var_logo-image> <img src="" alt="JEONG-HYEON KIM"> </s_if_var_logo-image> <s_not_var_logo-image> JEONG-HYEON KIM </s_not_var_logo-image> </a> </h1> <button type="button" class="mobile-menu"><span>메뉴</span></button> <nav id="gnb"> </nav> </div> </header> (후략) | cs |
저는 기존 메뉴 위에 새로운 메뉴를 추가하고, 거기 sns 링크를 넣으려 합니다.
<header> 속에 무언가를 끄적거리면, 기존 메뉴에 sns 아이콘이 합쳐지는 형태가 되겠죠.
그래서 <header> 전에 새로운 <~~>를 만들어주기로 했습니다.
위 코드에서 메뉴 구조는 <header id="header">로 시작합니다.
왜 id를 표시해주는지 정확히는 모르지만, 찾아보니 스타일시트(css)와 관련이 있더군요.
css에서는 html에서 지정한 id 이름으로 코드를 써서 정의합니다.
header 안에는 또 다른 id 'gnb'가 있습니다.
<header>~</header> 전체가 메뉴바 전체의 설계도라면,
<nav id="gnb">~~</nav>까지의 부분이 메뉴 오른쪽의 메뉴 버튼 세 개를 만든 설계도입니다.
html 설계도에 스타일에 대한 기준과 설명을 전부 써 넣어도 작동은 됩니다.
그런데 그렇게 다 써넣으면 너무 지저분하고, 나중에 고칠 때도 찾기가 어렵더만요.
듣자하니 코드를 깔끔하게 쓰는 게 곧 잘 짜는 '능력'과도 직결된다고...
'모로가도 도착만 하면 된다'는 건 이 업계에서 통용되지 않는 모양입니다...
각설하고, html 편집창 위를 보면 'css'라 적힌 부분이 있습니다. 클릭 후 들어가 id인 'header'를 검색해 줍니다.
바로 아래 달려있는 gnb도 옮겨와 줍니다.
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 | #header { position: relative; border-bottom: 1px solid #e6e6e6; } #header .inner { max-width: 1200px; margin: 0 auto; } #header .inner:after { content: ""; clear: both; display: block; height: 0; visibility: hidden; } #header h1 { float: left; max-width: 500px; overflow: hidden; padding: 26px 0; font-size:1.25em; line-height: 28px; letter-spacing: 0.5px; text-overflow:ellipsis; white-space:nowrap; } #header h1 a { display: inline-block; vertical-align: top; text-decoration: none; color: #7a583a; } #header h1 img { width: auto; height: 28px; } #header .mobile-menu {display: none;} #gnb { position: relative; float: right; } #gnb ul li { float: left; padding:26px 16px; font-size: 0.875em; } #gnb ul li a { display: block; position: relative; padding:0 4px; text-decoration: none; line-height: 28px; color: #000; } #gnb ul li a:hover { color: #7a583a; } #gnb ul li a:hover:after { content: ""; display: block; position: absolute; top: 100%; left: 0; width: 100%; height: 4px; margin-top: 22px; background-color: #7a583a; } |
깁니다.
html 코드 <div class="inner">는 #header .inner로 정의돼 있고,
<header id=header>는 #header로 정의돼 있다~ 정도만 이해하시고 넘어갑시다.
솔직히 제가 전문가가 아니니, 나머지는 뭔 소리인지 잘 모르겠습니다.
시간도 없습니다.
html, css 모두 그대로 복붙합니다.
기존의 메뉴바와 구분해야 하니까, 이름표만 바꾸는 겁니다.
윈도우 유저는 메모장, 맥 유저는 텍스트 편집기를 켜서 복사해 둡니다.
원래 창조의 아버지는 모방이라 했습니다
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <header id="top"> <div class="inner"> <nav id="x_navbar"> <ul> <li><a href="페북주소" target="_blank"><img src="아이콘코드"></li> <li><a href="트위터주소" target="_blank"><img src="아이콘코드"></li> <li><a href="링크드인주소" target="_blank"><img src="아이콘코드"></li> <li><a href="인스타주소" target="_blank"><img src="아이콘코드"></a></li> </ul> </nav> </div> </header> | cs |
제가 만든 새 메뉴바 html 코드입니다.
먼저 띄워 놓은 크롬창을 통해 구조도를 분석합니다.
1.
<div class="inner"> 안에 들어있는 <h1>~</h1>은 제 이름이 들어간 블로그 제목입니다.
<button>은 뭔지 모르겠는데, 모바일이 들어있는 것을 보니 모바일 가로줄 세 개 버튼인 모양입니다.
여기서는 필요 없으니, 복사한 코드에서 과감히 지워 줍니다.
2.
<ul>, <li>은 리스트 형태의 메뉴를 정의하는 html 코드입니다.
기존 [## blog_menu ##] 자리에 넣었습니다.
(순서를 바꾸고 싶으시면, html 코드의 순서를 바꿔서 입력하시면 됩니다.)
<li> 사이의 코드를 간단히 설명드리자면,
<a href="웹페이지주소"> : 하이퍼링크입니다. 누르면 그 페이지로 이동합니다.
target="_blank"를 넣어주시면, 새탭으로 열리게 합니다. 안 넣으면 현재 창이 그 페이지로 바뀝니다.
블로그에 최대한 눈을 묶어두시려면 이 코드를 반드시 넣어주시는 게 좋겠습니다.
다음 <img src=>는 아이콘 이미지를 불러오는 코드입니다.
티스토리 서버에 업로드해서 사용하는 방법도 있습니다만, 저는 무료 아이콘 웹사이트에서 코드를 받아다 씁니다.
그게 훨씬 안정적이라 생각하고요.
다른 글에서 설명해 드리겠습니다.
3.
이제 css를 바꾸기 위해 이름표를 바꿔줍니다.
<header> id 'header'는 'top'
<nav> id 'gnb'는 'x-navbar'
<div> class 'inner'는 그대로 했습니다. css에서 #header .inner처럼 써 있기에 구분이 된다고 봤습니다.
이름표는 뭐든 다 되는 모양입니다. 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 | #top { position: relative; border-bottom: 1px solid #e6e6e6; } #top .inner { max-width: 1200px; margin: 0 auto; } #top .inner:after { content: ""; clear: both; display: block; height: 0; visibility: hidden; } } #top .mobile-menu {display: none;} #x_navbar { position: relative; float: right; } #x_navbar ul li { float: left; padding: 15px 1px 5px 0; font-size: 0.875em; } #x_navbar ul li a { display: block; position: relative; padding:0 5px; text-decoration: none; line-height: 28px; color: #000; } #x_navbar ul li a:hover { color: #7a583a; } #x_navbar ul li a:hover:after { content: ""; display: block; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; margin-top: 5px; background-color: #7a583a; } |
이렇게 만든 CSS코드입니다.
이름표가 바뀌었지 세부내용은 거의 같습니다.
하지만 악마는 디테일에 있지
검은 음영 부분은 기존 코드와 다른 부분입니다.
세밀한 내용이 스타일을 만들게 됩니다.
1.
css 선택자를 간단히 설명드리겠습니다.
#x_navbar ul li {~} : 각 버튼의 여백, 속성 등 서식을 지정해줍니다.
#x_navbar ul li a {~} : 각 버튼에 속한 링크(<a href~>)의 속성입니다.
#x_navbar ul li a:hover:after {~} : 각 버튼에 마우스를 올리면 생기는 밑줄의 속성입니다.
'hover'는 마우스가 올라간 다음의 속성을 정의합니다.
'after'는 버튼들의 끝에 생성된 요소를 선택합니다.
더 자세한 설명은 : http://www.nextree.co.kr/p8468/ 여기를 참조했습니다
2.
이제 메뉴바의 높이를 바꿔줍시다.
#x_navbar ul li {~} padding
padding은 어떤 요소 주변의 여백입니다.
본래 css에서는 #gnb ul li {~}에 padding : 26px 16px 이렇게 써 있습니다.
실질적으로 다른 css에서 여백이나 높이를 적어둔 부분이 없습니다.
여백을 정의해 메뉴바의 높이를 정한 것입니다.
새로 추가할 메뉴바에서도 이 여백을 조정해서 높이를 바꿔주면 됩니다.
물론 본래 기능인 버튼간의 간격도 여기서 조정할 수 있습니다.
저는 15px 1px 5px 0 으로 적어뒀습니다.
3.
밑줄도 함께 바꿔줍니다.
#x_navbar ul li a:hover:after {~}
저는 밑줄이 너무 굵다고 생각해 값을 1px로 낮췄습니다.
동시에 앞선 2번에서 하단 padding 값을 5px로 낮췄으니,
여기서는 margin-top도 똑같이 5px로 바꿔줍니다.
그래야 밑줄이 붕 뜨지 않고 예쁘게 나옵니다.
밑줄이 싫으신 분들은 height (높이) 값을 0으로 해 버리면 됩니다.
색을 바꾸시려면 background-color 값을 바꿔주시면 되겠죠?
html 색상표를 검색해보시면 됩니다.
4.
#x_navbar ul li a {~}
세밀한 조정입니다.
나중에 css를 홈페이지에 입력한 뒤, 여기 padding 값을 미세하게 바꿔주고 새로고침을 눌러보시면,
보이지 않는 링크도 자리를 차지한다는 것을 알 수 있습니다. 지금은 바꿔주지 않아도 무방합니다.
지금까지 만든 html, css 코드를 삽입해야 합니다.
html은 기존 <header> 바로 위에 (wrap 안에),
css는 기존 코드 바로 위에 (나중에 수정하기 쉽게) 그대로 붙여넣어 줍니다.
아직 끝난 게 아닙니다.
5. 반응형 웹
1 2 3 4 5 6 7 8 9 10 11 12 | @media screen and (max-width:1199px) { #header, #aside, #content .inner, .cover-thumbnail-list-1, .cover-special-contents, .cover-thumbnail-list-2, .pagination { padding-left: 34px; padding-right: 34px; } | cs |
반응형 스킨은 디바이스에 따라, 인터넷 창의 크기에 따라 홈페이지의 모습도 따라서 작아졌다 커졌다 하죠.
4번까지만 바꾸면, 새로 넣은 메뉴바가 혼자서 따로 노는 진풍경이 벌어집니다.
css에서 @media 를 검색하면 위 코드가 나오는데,
# header 아래에 엔터를 치고, #top (아까 새로 정의한 상단 메뉴바 id)를 적어 넣어 줍니다.
'Whatever' 스킨에 상단 메뉴바가 추가됐습니다.