티스토리 스킨 제작기 - Navbar 수정

2018/06/20 - [티스토리/스킨제작] - 티스토리 스킨 제작기에서 이어서 진행합니다.

부트스트랩 버전 업 & 소스 교체 (CDN 적용)

기초 템플릿은 부트스트랩 4의 베타 버전을 사용하고 있었습니다. 이를 현재 최신 부트스트랩 버전으로 교체하였습니다. 또한 부트스트랩을 다운로드한 후 이를 다시 티스토리에 업로드하는 과정이 귀찮다는 생각에 CDN에서 받아오도록 하였습니다. (실제 개발자가 아닌관계로 성능이나 효과의 차이는 모릅니다. )

앞선 과정에서 부트스트렙이 적용된 기본 템플릿을 티스토리의 스킨으로 적용하였습니다.

다시 스킨편집 화면으로 들어가도록 하겠습니다. html 편집 버튼을 누릅니다.

HTML을 선택한 상태에서 소스코드의 아무 곳이나 누른 후 Ctrl+F 를 눌러 노란색 바탕의 찾기 화면을 띄웁니다. theme.css라고 검색어를 입력합니다. 이 부분을 수정하도록 합니다.

Introduction - Bootstrap페이지의 CSS 항목에 있는 소스코드로 교체합니다.

다음과 같이 기존에 작성되어 있는 내용은 주석(비활성화) 처리 (<!-- -->)를 하고, 부트스트랩의 Introduction 페이지에서 복사한 소스코드를 붙여 넣었습니다.

 

 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- <link rel="stylesheet" media="screen" type="text/css" href="./images/theme.css" /> -->

 

앞으로의 작업도 이런 식으로 가이드가 되는 사이트에서 얻은 소스코드를 스킨의 소스코드에 복사하여 적용할 것입니다.

다음으로 JavaScript 항목도 교체합니다.

Introduction - Bootstrap 페이지의 JS 항목에 있는 3줄의 내용 중 첫 줄을 복사합니다.

<script  src="https://code.jquery.com/jquery-3.3.1.slim.min.js"  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"  crossorigin="anonymous"></script>

이번에도 역시 스킨편집 창에서 Ctrl+F를 이용하여 jquery를 검색합니다. 이번에는 여러 개의 결과가 나옵니다. 이중의 하단의 것을 선택하여 교체합니다.

 

다음으로는 나머지 2번째 줄과 3번째 줄의 내용도 복사하여 교체합니다.

 

앞선 과정과 동일한 요령으로 html창에서 popper.min.js과 bootstrap.min.js로 검색하여 각각을 최신 버전으로 교체합니다.

여기까지 작업을 하고, 저장 및 새로고침 버튼을 눌러 결과를 확인합니다. 크게 변경된 부분이 눈에 안 띌 수 있지만 연한 파란색에서 좀 더 밝고 선명한 파란색으로 Navbar의 색상이 변경되었습니다.

 

 

옵션
여기까지 작업을 하면 앞서 업로드한 theme.css파일은 더 이상 스킨 표시에 사용되지 않습니다. 따라서 삭제할 수 있습니다.

파일업로드 메뉴를 눌러 해당 파일을 선택한 후, 하단의 -삭제 버튼을 누릅니다.

상단 메뉴 색상 변경

상단 Navbar의 색상을 기본색에서 어두운 색상으로 교체하였습니다. 그리고 메뉴는 우측으로 정렬시켰습니다.

해당 내용은 Bootstrap Documentation의 Navbar - Bootstrap에 기술되어 있습니다.

현재는 앞서 본 것과 같이 Primary Color 가 적용되어 있습니다.

이를 다음과 같이 회색조로 변경하려고 합니다. bg-primary 항목을 안내와 같이 bg-dark로 교체하였습니다.

 

 

상단 메뉴 Icon 넣기

메뉴의 앞부분에 Icon을 추가하였습니다. Icon 은 font awesome이라는 Icon 라이브러리를 사용하였습니다.

Get Started | Font Awesome페이지에 접속합니다. Use Font Awesome Free CDN 하단의 소스코드를 복사합니다.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

이 코드를 스킨 편집 창의 html의 상단에 붙여 넣습니다.

 

다시,

Icons | Font Awesome페이지에 접속합니다. home이라고 검색합니다. 가장 첫 번째 Icon을 선택합니다. 페이지가 전환된 후, 표시된 소스코드를 복사합니다.

<i class="fas fa-home"></i>

이것을 이제 html의 원하는 곳에 붙여 넣으면 해당 icon 이 표시됩니다. NavBar의 Home 앞에 붙여 넣습니다.

 

나머지도 같은 요령으로 채워줍니다.

상단 메뉴(Navbar)에 대한 수정을 마무리 하겠습니다.