* 기존의 스킨을 편집하는 것이어서 스킨이 다를 경우 HTML, CSS 파일이 다르게 구성되어 있을 수 있다. 내가 편집하는 스킨은 티스토리에서 제공하는 Poster 스킨이다.
스크롤을 내리면 상단바가 보이지 않는데, 유튜브 웹사이트처럼 스크롤에 상관없이 항상 보이는 고정된 상단바를 만들어보자.
우선 HTML 파일에서 상단바에 해당하는 태그를 찾아야 한다.
이때 크롬에서 지원하는 개발자 도구를 사용하면 편리하다.
구조를 보고 싶은 페이지(여기선 티스토리 블로그)에서 F12를 누르면 개발자 도구를 사용할 수 있다.
Elements 메뉴에 들어간 뒤 아래 사진에 표시한 동그라미 부분을 누르거나 ctrl + shift + c 키를 누르고, 원하는 영역에 마우스를 대면 해당하는 태그를 알 수 있다.
여기선 header 태그가 상단바에 해당하는 것을 알 수 있다.
--- HTML 파일에서 <header> 코드 ---
<header id="header">
<h1><a href="https://junhee-hee.tistory.com/">개발자로 살아남기</a></h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<div class="menu">
<nav id="gnb">
</nav>
<div class="social-link">
<s_if_var_sns-pinterest><a href="" class="pinterest">Pinterest</a>
</s_if_var_sns-pinterest>
<s_if_var_sns-facebook><a href="" class="facebook">Facebook</a>
</s_if_var_sns-facebook>
<s_if_var_sns-twitter><a href="" class="twitter">Twitter</a></s_if_var_sns-twitter>
<s_if_var_sns-instagram><a href="" class="instagram">Instagram</a>
</s_if_var_sns-instagram>
</div>
<p>POWERED BY TISTORY</p>
</div>
<div class="search">
<s_search>
<input type="text" name="" value="" placeholder="검색내용을 입력하세요."
onkeypress="if (event.keyCode == 13) { }">
<button type="submit" onclick="">검색</button>
</s_search>
</div>
</header><header>(= header 태그) 안을 보면 <button> 등 여러 태그가 있는데, 이 중 <div class="menu"> 는 메뉴 버튼을 눌렀을 때 활성화 되는 메뉴바에 해당하는 코드이다. 티스토리의 skin.html(우리가 편집하는 HTML 파일)에는 <s_t3>가 <body> 바로 안쪽에 위치해서 모든 내용을 감싸고 있는데, 이 태그는 티스토리의 JavaScript를 적용시켜주고 필수다. 이건 내 추측인데, 이때 적용되는 JavaScript가 메뉴 버튼을 눌렀을 때 <div class="menu">를 활성화 시키는 것 같다.
아무튼 우리가 상단바를 고정시키기 위해선 이 <header>의 CSS를 수정해야한다. <header>의 id는 "header"이므로 해당하는 CSS는 #header이다.
ID 선택자 - CSS: Cascading Style Sheets | MDN
CSS ID 선택자는 요소의 id 특성 값을 비교하여, 완전히 동일한 id를 가진 요소를 선택합니다.
developer.mozilla.org
--- <header>와 <header>안의 <h1>에 관한 CSS ---
#header {
position: relative;
width: 100%;
}
#header h1 {
padding: 28px 0;
text-align: center;
font-size: 1.5em;
line-height: 1;
color: #1a1a1a;
}#header에서 따로 높이(height)가 지정되지 않은 이유는 <h1>의 padding과 font-size로 높이를 지정했기 때문이다.
우리의 목적인 <header>를 스크롤에 상관 없이 고정시켜 두려면 position 속성을 이용해야 한다.
position - CSS: Cascading Style Sheets | MDN
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.
developer.mozilla.org
--- position 속성 변경, top, background-color 속성 추가 ---
#header {
position: fixed;
top: 0px;
width: 100%;
background-color: #F8DAE2;
}background-color를 통해 색상도 변경했다.
그런데 무언가 이상하다. 상단 바와 아래의 페이지가 조금 겹쳐보인다. 겹치는지 확인하기 위해 <header>의 높이를 잠깐 길게 설정해봤다.
#header {
position: fixed;
top: 0px;
width: 100%;
background-color: #F8DAE2;
height: 500px;
}
position: fixed는 해당 태그의 위치를 우리가 보는 화면을 기준으로 배정해주고 기존 배치 순서에서 벗어나게 한다. 즉 position: relative일 때는 <header> 밑의 태그가 자연스럽게 상단바 밑에 위치하는데, <header>의 position을 fixed로 바꾸면서 <header>가 기존 배치 순서에서 벗어났으니 밑의 태그는 <header>와 관계없이 배치된다. 따라서 <header>와 밑의 태그가 겹치게 된다. 이렇게 레이아웃처럼 상대적인 기준으로 설정되어 있는 경우, 우리가 조작한 태그 뿐만 아니라 얽혀 있는 다른 태그들에게 영향을 주기도 한다.
결국 겹치지 않게 하기 위해선. <header> 밑의 태그도 편집해야 한다. 관리자 도구에서 우리가 <header>를 찾았던 것처럼 밑의 영역에 해당하는 태그를 찾거나 HTML 파일을 통해서 찾을 수 있고. <section class="container">가 밑의 모든 태그를 감싸고 있다는 것을 알 수 있다. (앞으로 태그들을 <container>처럼 편하게 id나 class만으로 지칭하겠다.) 기존 CSS 파일에는 위 태그에 해당하는 내용이 없기 때문에 class 선택자로 새로운 코드를 삽입하자. 위치는 상관없다. 고정시키는 방법은 크게 두가지가 있다.
클래스 선택자 - CSS: Cascading Style Sheets | MDN
CSS 클래스 선택자는 요소의 class 특성에 기반해 요소를 선택합니다.
developer.mozilla.org
--- 첫번째 방법 position: fixed ---
.container {
position: fixed;
top: 80px;
overflow: auto;
height: 100%;
width: 100%;
}
첫번째 방법은 <container>도 <header>처럼 position을 fixed로 설정하는 것이다. 그렇다면 이 경우 우리가 <header>의 position을 변경해 다른 영역과 겹치게 된 것처럼 비슷한 일이 일어나지 않을까? 사진을 보면 상단바에 겹쳐진 글자가 보인다. 따라서 이 방법은 <container> 밑의 태그의 속성도 변경해줘야 한다.
--- 두번째 방법 pading-top ---
.container {
position: relative;
padding-top: 80px;
width: 100%;
}
두번째 방법은 padding-top 속성을 이용해, <container>의 위부분에 <header>높이 만큼 여백을 주어 겹치기는 하나 콘텐츠가 겹치지 않도록 하는 것이다. 두번째 사진처럼 관리자 도구에서 원하는 태그를 클릭한 뒤 오른쪽 메뉴에서 Computed에 들어가면 해당 영역의 높이뿐만 아니라 margin, padding 등을 볼 수 있다. (이 경우에 <header>의 높이는 80px인 것을 알 수 있다.) 두 방법 모두 각각 세부 설정을 더 하면 겹치지 않게 할 수 있고, 차이는 단지 스크롤 바가 어디에 위치하냐 이다. 난 두번째 방법을 이용하겠다.
두번째 방법도 해결해야할 것이 남아있다.
우리는 <container>와 <header>가 안겹치게 한 것이 아니라 <container>에 겹쳐도 되는 여백을 만들어 둔 것이어서, 상단바가 클릭이 안되고,(겹친 <container>가 클릭된다.) 스크롤을 내리면 내용이 위로 올라와 <header>와 겹쳐진다. 이를 해결하기 위해 z-index 속성을 이용한다.
z-index - CSS: Cascading Style Sheets | MDN
CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다.
developer.mozilla.org
--- z-index 추가 ---
#header {
position: fixed;
z-index: 1;
top: 0px;
width: 100%;
background-color: #F8DAE2;
}
잘 적용됐다!
또 <container>와 <div id="dimmed">의 z-index도 수정해주었다.
왜냐하면<container>의 z-index를 <header>의 z-index보다 낮게 명시해야 <container>의 모든 내용이 <header> 밑에 위치하게 된다.
<div id="dimmed">는 HTML 파일에는 없지만, 메뉴버튼을 눌렀을 때 아래의 사진처럼 화면전체에 회색으로 활성화 되는 태그이다. <dimmend>는 우리가 편집하는 태그 밖에 있어서, <dimmed>의 z-index를 <header>보다 낮게 설정하여 <header> 전체를 <dimmed> 위로 올리는 식으로 해결해야 한다.(메뉴바는 <header>안에 있다.) 따라서 기존의 300으로 설정되어 있던 #dimmed의 z-index를 1로 설정하고, 설정했던 <header>의 z-index를 그것보다 높은 2로 설정했다.
--- container, header, dimmed의 z-index 수정 ---
.container {
position: relative;
z-index: 0;
padding-top: 80px;
width: 100%;
}
#header {
position: fixed;
z-index: 2;
top: 0px;
width: 100%;
background-color: #F8DAE2;
}
#dimmed {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.43);
}
마지막으로 밑의 사진과 같이 <container>의 내용이 없을 경우 <container> 밑의 태그 <footer>가 위로 올라오는데, <footer>를 화면 하단에 고정 시킬 것이다. 이때 상단바처럼 항상 화면에 고정시키는 것이 아니라, 페이지 최하단에 위치시키는데 만약 페이지의 내용이 없을 경우에만 화면 맨 밑에 위치시킬 것이다.
이때는 <header>와 <container>, <footer>를 감싸고 있는 <wrap>의 최소 높이를 100%로 설정하고 <footer>의 position을 absoulte로 설정해 <footer>가 항상 <wrap>의 최하단에 위치시키면 된다. 그리고 <container>의 padding-bottom을 설정해, <container>의 여백에 <footer>가 겹치도록 하겠다. #wrap도 기존 CSS 파일에는 존재하지 않아 새로 삽입해야 한다.
--- #wrap 추가, container의 padding-bottom 변경, footer의 position, botttom 변경 ---
#wrap {
position: relative;
min-height: 100%;
}
.container {
position: relative;
z-index: 0;
padding-top: 80px;
padding-bottom: 75px;
width: 100%;
}
#footer {
position: absolute;
bottom: 0;
padding: 29px 0;
border-top: 1px solid #ebebeb;
}
간단하게 끝날 줄 알았는데 하나를 바꾸면 바꿀게 또 생기고 또 생겨, 생각보다 오래걸렸다. 간단하게 보이는 웹페이지라도 굉장히 복잡하게 구성된 것을 알 수 있었다. 다음에는 상단바에 깃허브 링크를 연결한 아이콘을 추가하고, 다크모드 버튼을 추가해야 겠다!
'프로젝트 > 티스토리 꾸미기' 카테고리의 다른 글
| [티스토리 꾸미기] 프로젝트 중단 (0) | 2022.04.23 |
|---|---|
| [티스토리 꾸미기 4편] 다크모드 버튼 만들기 (2) | 2022.04.23 |
| [티스토리 꾸미기 3편] 이미지 테두리 만들기 (0) | 2022.02.21 |
| [티스토리 꾸미기 1편] HTML, CSS 분석 (0) | 2022.02.18 |
| [티스토리 꾸미기 0편] 시작하며 (2) | 2022.02.18 |