티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 2편 -

티스토리 블로그 스킨 꾸미기

- 사이드바(sidebar) 2편 -

무료로 제공되는 스퀘어(square) 스킨을 활용하여

코알못이 직접 수정해 보겠습니다.

스킨편집에서 CSS에 들어가 소스코드의 일부를 가져왔습니다.

코드를 보기 좋게 수정 후 진행하겠습니다.

(이 글은 모바일 보단 PC로 보시는 것을 추천드립니다.)

실습을 진행하면서 내용이 기니,

궁금하신 부분은 Ctrl+F 로 해당 단어를 검색하여 찾으시면

조금 더 수월 하실 것으로 생각됩니다.

자, 시작하겠습니다!

위의 코드를 위에서 부터 차례로 아래로 내려오며 공부해보겠습니다.

#sidebar a

{

color: #333;

text-decoration: none;

}

color: #333;

를 먼저 수정해보겠습니다.

"color" 를 #333에서 #ff1ef3 으로 수정해봤습니다.

위와 같이 사이드바 내부 글자의 색상이 변경되었습니다.

글자의 색상은 지난 시간에 찾는 방법은 알려드렸지요.

저는 아무거나 때려넣으니 위와 같은 색이 나타났습니다. 하핫..

다음은

text-decoration: none;

text-decoration는 텍스트를 장식하는 속성이겠죵?

텍스트에 줄을 만들거나 없앨때 쓴다고 합니다.

광고

none : 밑줄을 표시하지 않음.

underline : 밑줄을 표시함.

overline : 영역 위로 선을 그림.

line-through : 취소선을 그림.

현재 세팅은 none으로 되어 있습니다.

하나씩 실습해 보겠습니다.

text-decoration : underline;

text-decoration : overline;

text-decoration : line-through;

다음

#sidebar a:hover

{

color: #07a;

}

color: #07a;

이건 사이드바의 내부에 있는 글씨에 마우스 커서를 올려 놓으면

색상이 변하는데

이때 변하는 색상의 세팅이네요.

(#sidebar a:hover)

이건 캡쳐가 안되니, 직접 한번씩 실습해 봅시다.

다음

#sidebar .blank

{

clear: both;

width: 100%;

height: 100px;

}

#sidebar .blank

"."은 무엇인지, blank는 무엇인지...

이건 검색해도 안나오네요.

그냥 빈칸이라는 것인지;;

clear: both;

clear는 float 속성을 해제 할 때 사용한다고 합니다.

(float를 어디서 썼는지는 모르겠지만;;)

clear 속성에는 4가지 값을 줄 수 있답니다.

"none, left, right, both"

float의 세팅 값에 따라 clear는 설정해주면 된다고 하는데,

양쪽 모드를 해제할 때 both를 세팅해 주면 된다고 합니다.

세팅을 바꿔봤으나, 특별히 변화하는 모습이 없습니다.

넘어가겠습니다.

#sidebar h1

{

margin: 0;

padding: 0 10px;

text-align: center;

font-size: 20px;

font-weight: 400;

line-height: 200%;

color: #666;

}

이건 느낌상

사이드바의 타이틀이 아닐까..

margin: 0;

margin : 0;

margin : 20;

padding은 내부의 여백을 만들고

margin은 외부의 여백을 만든다고

하였습니다.

위의 사진은 요미토리의 외부에 여백이 0 에서 20으로 늘렸더니

위와 같이 외부 여백으로 인해 글씨가 밀려난 모습입니다.

padding: 0 10px;

지난 시간에 했으니 pass하겠습니다.

text-align: center;

글자정렬 속성을 센터로 하는 세팅입니다.

left로 바꿔보면

center

left

요리토리 타이틀이 중앙에서 왼쪽으로 이동한 모습입니다.

방향은 아래와 같이 기본적으로 4가지가 있습니다.

left : 왼쪽 정렬

right : 오른쪽 정렬

center : 가운데 정렬

justify : 양쪽 정렬

다음은

font-size: 20px;

요미토리 글씨 크기 입니다.

font-size : 20px;

font-size : 40px;

폰트 사이즈 20px 에서 40px 로 수정한 모습입니다.

다음

font-weight: 400;

폰트의 두께 입니다.

font-weight: 400;

font-weight: 100;

다음

line-height: 200%;

줄 간격 속성입니다.

단위는 px, %, em 3가지라고 합니다.

line-height: 200%;

line-height: 600%;

line-height: 200% -> 600% 로 수정해봤습니다.

한 줄이라 티가 안납니다. ㅎㅎ;

color: #666;

는 생략하겠습니다.

요미토리 글씨 색상 바꾸는 세팅입니다.

다음은

#sidebar .widget

{

margin-top: 30px;

padding: 0;

line-height: 200%;

}

margin-top: 30px;

요미토리 타이틀 밑에

카테고리들이 쪼르륵 펼쳐있습니다.

이 구역의 외부 여백을 세팅하는 값입니다.

margin-top: 30px;

margin-top: 50px;

30px 에서 50px 로 수정한 모습입니다.

padding: 0;

line-height: 200%;

이 두 코드는 

생략하겠습니다.

중복되는 코드는 생략해야 빨리 한바퀴 돌겠지용?ㅋㅋ;

마지막으로

#sidebar .widget li

{

list-style: none;

padding-right: 30px;

word-break: break-word;

}

.widget li

보다보니, "." 은 C언어 포인터 같은 느낌?

html에서 선언한 widget 라는 변수에 매칭해주는 기능 같습니다.

(html 코드가 기능이면 css코드는 옷을 입히는 것)

li 는 <ol>, <ul>, <dl> 들의 각 항목들을 나열할 때 <li> 태그를 사용한다 합니다.

<ol></ol> : 순차적인 목록 (ordered list)

<ul></ul> : 순서가 필요하지 않은 목록 (unordered list)

<dl></dl> : 제목과 설명을 쓸 때 사용 (definition list)

<li></li> : <ul>, <ol>, <menu> 사이에서 목록의 독립된 태그. (list item)

넘어가서,

list-style: none;

list-style은 ol, ul, li 등의 HMTL 요소에

스타일을 입힐 수 있는 CSS의 속성입니다.

none : 아무것도 없는 것

disc : 채워진 원형(ul의 기본값)

circle : 속이 빈 원형

square : 채워진 사각형

decimal : 숫자 형태(1. 2. 3. ...)

lower-alpha : 소문자 알파뱃 (a. b. c. ...)

upper-alpha : 대문자 알파뱃 (A. B. C. ...)

lower-roman : 로마자(소문자) 숫자 (i. ii. iii. ...)

upper-roman : 로바자(대문자) 숫자 (I. II. III. ...)

자동차나 하드웨어 등의 카테고리는 따로 수정이 있는지

다른 부분만 변경되네요.

이번 시간의 마지막인

word-break: break-word;

줄바꿈에 연관이 있는 속성이라고 합니다.

normal : CJK 문자는 글자 기준으로, 이외의 문자는 단어 기준으로 줄바꿈.

break-all(word) : 글자 기준으로 줄바꿈.

keep-all : 단어 기준으로 줄바꿈.

initial : 기본값으로 설정.

inherit : 부모 요소의 속성값을 상속.

* CJK는 중국,일본,한국어의 약자랍니다.

반응형 웹의 경우 가로 크기가 작을 경우를 대비하여

word-break의 속성값을 break-all로 하는게 좋다고 합니다.

이 속성은 각자의 블로그 상황에 따라 다르니,

한번씩 실습하여 어울리는 것을 찾아보시기 바랍니다.

광고

오늘 사이드바 꾸미기 첫 시간이였는데, 어떠셨나요?

저도 공부하고 꾸미고자 하여 진행하면서

일일이 기록을 하다 보니 엄청 오래 걸렸습니다. >_<

디지털 노마드가 꿈이고 이 블로그를 통해 노후 준비를 하고자 하는

저와 함께 하실분들은 차근차근 저와 함께 실습하며

블로그를 발전시키고 공유하는 시간을 갖으면 좋겠습니다.

공감과 구독은 블로그를 만들어 가는데 큰 힘이 됩니다.

함께 해요 >_<

☞ 티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 3편 -