이번 포스팅은 부트스트랩 서비스를 이용하는 방법에 대해 알아보기로 한다. 지난 포스팅에서 파워포인트로 필자가 원하는 스타일의 레이아웃을 구성하지 않았는가? 정말 그런 것들이 가능한건지, 블로그 상단바를 부트스트랩 서비스로 구현하는 방법을 알아보자.
부트스트랩으로 블로그 상단바 만들기
부트스트랩이란 뭘까? 스킨 배포하는 블로그들을 보면 쉽게 접할 수 있는 Bootstrap, 먼저 그 개념부터 알아보도록 하자. 공식 홈페이지에서 설명하는 정의는 아래와 같다.
보다시피, World's most popular Front-end component library 라고 언급되어 있다. 세계에서 가장 유명한 프론트엔드 컴포넌트 라이브러리. 필자를 포함한 비전문가들을 위해 쉽게 얘기하자면, 웹페이지를 꾸미는 데 가장 널리 쓰이는 오픈소스라고 보면 된다.
즉, 우리가 해야할 일은, bootstrap을 이용하겠다고 선언하고, bootstrap에서 제공하는 다양한 방식의 꾸밈 스타일을 가져와 써면 되는 것이다. 좀 더 쉽게 얘기하자면, 인스타그램을 떠올리면 된다. 인스타그램에 사진을 올릴 때 색조나 채도 등을 예쁘게 설정한 다양한 테마들을 선택할 수 있듯이, 우리는 티스토리 스킨에다가, 부트스트랩에서 제공하는 다양한 테마들을 적용시키면 되는 것이다. (물론, 인스타그램처럼 터치 한번으로 해결할 수는 없다.)
서론이 길었는데, 이제 여기서 제공하는 오픈소스 라이브러리들을 통해 티스토리 스킨을 제작해보도록 하자. 지난 포스팅에서 필자가 구상했던 레이아웃은 다음과 같다.
페이지의 구성은 HTML부터 시작된다. 위처럼 화면을 띄우기 위해서는 HTML 기본코드를 작성해야하고, 원하는 스타일을 적용시키기 위해 부트스트랩을 사용하면 된다.
먼저, 아래와 같은 기본코드를 작성한다. 아래 코드는 모든 웹사이트 공통이므로, 외워두는 것이 좋다.
<html> <!-- 페이지의 시작 -->
<head> </head> <!-- 헤더의 시작 -->
<body> <!-- 모든 꾸밈소스나 레이아웃 구성들이 들어가는 공간 -->
</body>
</html> <!-- 페이지의 끝 -->
그 후, 부트스트랩을 사용하기 위한 기본 설정을 하기 위해 아래 사이트에 접속해보면..
http://getbootstrap.com/docs/4.0/getting-started/introduction/
CSS와 JS 설정 부분이 나온다. 부트스트랩에 있는 오픈소스를 사용하기 위해서는, 부트스트랩을 사용하겠다는 일종의 선언이 필요하다. 컴퓨터는 아무것도 모른다. 우리가 부트스트랩을 사용하겠다라고 선언해주지 않으면, 거기서 제공하는 오픈소스들을 불러와도 인식하지 못한다. 위 페이지에 접속하여, Starter template를 찾아보자.
위와 같은 화면에서 보이는 코드를 그대로 복사하도록 하자. 이는, 부트스트랩을 사용하기 위한 기본 템플릿이다. 즉, 부트스트랩을 선언해놓은 기본 코드라고 보면 된다. 모든 스킨은 여기서부터 시작한다. ATOM 에디터로 작성한 후, 원하는 폴더에 skin.html 이라고 저장하고 실행시켜보면, HELLO, WORLD! 라는 문구만 뜬 것을 볼 수 있다.
이제, 위에서 필자가 설정한 레이아웃 구성을 위해 하나하나씩 코드를 추가해 넣기로 하자. 레이아웃을 다시 불러와보면...
페이지 최상단에 이미지로 만든 블로그 아이콘을 넣고자 한다. 이미지는 아직 완성하지 못했으므로, 텍스트라도 일단 입력해보도록 하자. 상단에 위치한 바는 Navbar 라는 부트스트랩 라이브러리를 이용해 구성할 수 있다.
Navbar는 말그대로 네비게이션 바를 만들어주는 구성요소이다. 위 주소에 들어가서 본인이 원하는 스타일을 찾아보자. 여러가지가 있는데, 설명이 영어로 되어있어서 해석이 다소 필요하다. 내가 원하는 방식은, 스크롤을 내려도 위에 상단바가 계속 남아있게하는 것이다. 그리고 글씨게 중앙에 위치하게 하는 것이다. 찾아보니, Sticky Top이라는 것이 있다 :
Sticky Top: scrolls with the page until it reaches the top, then stays there!
위 코드를 복사하여, <body> 안에 복붙한다. 이렇게하고 ATOM에디터에서 skin.html로 저장 후, 실행시켜보면, navbar가 생성되긴하는데, sticky top이라는 글씨가 좌측으로 정렬되어 나타난다. 그런데 필자는 중앙으로 정렬하여 나타나게 하고 싶다. 또한, 색상까지 지정하고 투명도를 주고 싶다.
아래 코드를 보자.
<nav class="navbar sticky-top navbar-light justify-content-center" style="background-color: rgba(50,120,20,0.5);">
<a class="navbar-brand" href="http://hyongdoc.tistory.com">두니의 티스토리 스킨 제작기</a>
</nav>
해당 코드를, <body>바로 뒤에 복붙하고 실행시켜보도록 하자. 이번에는 "두니의 티스토리 스킨 제작기" 라는 문구가, 화면 가운데 정렬되는 것을 볼 수 있다. 또한, 지정한 색상값이 배경색으로 나타나고, 투명도가 0.5로 조절되어 아래 그림과 같이 Hello World 글씨가 투과되어 보이는 것을 확인할 수 있다.
소스 코드에 대해 약간 설명을 하자면 다음과 같다.
sticky-top : 상단바가 스크롤에 상관없이 위에 고정되어 나타남
navbar-light : 커서를 가져다 댔을 때 글씨 색과 관계되어 있는 듯 하다. (light 를 dark나 blue로 바꿔보면서 실험해보길 바람)
justify-content-center : 배너에 들어갈 내용이 가운데 정렬되도록 해준다.
background-color: rgba(50, 120, 20, 0.5); : 배너의 배경색을 지정한다. 괄호안에 4개 항목이 있는데, 앞에 3개는 색상을 나타내고, 뒤에 0.5는 투명도를 나타낸다.
자, 드디어 제목 하나 만드는 일을 끝냈다. 나중에 "두니의 티스토리 스킨 제작기" 라는 텍스트 말고 이미지를 넣고 싶다면, 현재 텍스트가 있는 부분에 이미지 삽입 코드만 넣어주면 된다.
부트스트랩을 이용하는 방법은, 아마 위 예제만으로 바로 이해하기에는 다소 어려움이 있을 수 있다. 이제 시작하는 단계에서 얘기하고자 하는 것은, 부트스트랩은 마치 레고블럭과 같다는 것이다. 레고를 이렇게 쌓아보고 저렇게 쌓아보고 하는것처럼, 부트스트랩도 다양한 기능들을 이렇게 조립하고 저렇게 조립해보면서 익혀가는 과정이 중요하다. 이번 포스팅에서 다룬 예제에서는, 블로그 상단바를 만드는 기능과, 중앙에 정렬하는 기능을 짬뽕시키는 것을 해보았다. 그나마 다행인건, 부트스트랩에서 친절하게 설명을 다 해주고 있고, 자주 사용하는 기능들은 서로서로 링크를 걸어주고 있다는 점이다.
아무튼, 하나부터 열까지 다 설명하기에는 다소 한계가 있으니, 필자가 구상한 레이아웃을 만드는 과정을 통해 조금씩조금씩 더 배워가보도록 하자.
[IT & IT/티스토리 스킨 제작] - #4. 티스토리 스킨 제작을 위한 HTML/CSS의 기본
[IT & IT/티스토리 스킨 제작] - #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치
[IT & IT/티스토리 스킨 제작] - #2. 파워포인트로 티스토리 스킨을 만들어보자.
[IT & IT/티스토리 스킨 제작] - #1. 티스토리 스킨 제작기
'Developer > 티스토리 스킨 제작' 카테고리의 다른 글
| #7. 티스토리 스킨 업로드하는 방법 (598) | 2018.03.30 |
|---|---|
| #6. 티스토리 스킨만들기::: 글제목, 글내용을 배치해보자. (757) | 2018.03.29 |
| #4. 티스토리 스킨 제작을 위한 HTML/CSS의 기본 (1091) | 2018.03.16 |
| #3. 웹 코딩을 위한 ATOM 에디터 및 패키지 설치 (574) | 2018.03.16 |
| #2. 파워포인트로 티스토리 스킨을 만들어보자. (602) | 2018.03.13 |
댓글