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

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

사이드바

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

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

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

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

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

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

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

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

자, 시작하겠습니다!

* sidebar

#sidebar

{

position: fixed;

top: 0;

left: 0;

bottom: 0;

padding: 0;

width: 300px;

height: 100%;

background-color: #ffa;

border-right: 1px solid #ddd;

cursor: default;

}

맨 위에서 부터 하나씩 차근차근 알아보겠습니다.

#sidebar_position

"position"은 자리, 위츠를 뜻하죠.

position의 속성은 "relative", "absolute", "static", "fixed", "sticky" 의 5가지가 있다고 합니다.

그런데

sticky는 익스플로러에서는 지원을 하지 않는다고 하니 잊어버리겠습니다.^^

(4가지만 알아보겠습니다.)

#sidebar_position_fixed

fixed 일때(스킨 기본상태)

fixed 일때(스킨 기본상태)

fixed는 페이지의 가장 끝자리에서 고정(fix)되어 있으며,

포스팅 글과 별도의 스크롤을 운영 할 수 있습니다.

포스팅을 내려도 사이드바는 고정된 상태로 유지하고 있지요.

fixed 일때(스킨 기본상태) 스크롤 동작

가운데 포스팅만 아래로 움직였습니다.

relative 일때

relative 일때1

가운데 포스팅 내용이 없어졌습니다.!!!

어디로 간 것일까요?

relative 일때2

아래로 내려가 있군요!

사이드바가 위로 올라간 건가??

이해가 안되고 있습니다.

인터넷을 찾아보니 relative 는 static 상태를 기준으로 top, left, rightg, bottom 속송을 이용하여 원하는 위치로 대상을 이동 시킬 수 있다고 합니다.

(fixed 일때는 고정되어 있으니 의미 없는 속성들 이겠네요!!)

relative 위치 수정 예제1

하나씩 바꿔보면서 보시겠습니다.

"top"의 값을 0에서 1000으로 수정해봤습니다.

relative 일때3

제 눈에는 달라진게 없어 보입니다. ' ' ;;;

이번에는 "left"의 값을 0 에서 1000으로 수정해봤습니다.

relative 일때4

ㅋㅋㅋㅋ;;;;;

그대로 입니다.

마지막으로 "bottom"의 값을 0 에서 1000으로 수정해보겠습니다.

relative 일때5

역시 안바뀝니다.

다른 부분에서 안바뀌하는 것이 있는지 언젠간 알 수 있겠지요. ㅎㅎ;;;;

그럼 넘어가서

static 일때

static 일때

static이 기준이 되는 고정된 위치라고 합니다. 위치를 수정해도 안바뀌겠죠?

static 일때2

right를 추가하여 값을 100을 주고 bottom에 값을

100을 준 결과는 위와 같이 변화를 못 느끼겠습니다.

static은 이게 맞을 겁니다.

relative는 바뀌야 하는데.... 이상합니다...;;

다음으로

absolute 일때

absolute 일때

fixed 일때랑 동일하죠?

그래서 설명을 찾아보니,

absolute는 static 속성을 가지고 있지 않아서 부모를

기준으로 위치를 이동한다고 합니다. (갑자기 왠 부모??)

부모 태그 중에 포지션 속성이 relative, absolute, fixed가 없으면

<body>를 기준으로 위치가 변경된다고 합니다.

(<body>는 html 코드에 있는 것을 말하는가??)

무슨 말인지 전혀 모르겠습니다.;;

그래서 bottom에 값을 100을 줘봤습니다.

absolute 일때2

변화가 없습니다.

자세히 알고 계신분이 계시면 덧글로 알려주시면.. 감사하겠습니다.ㅠㅠ

!!!!!!!!!!!

!!!!!

px를 안써줘서 그랬습니다!!!!!!!!!!!!!!!!!!

이런....

relative로 다시 속성을 변경하고 top에 100px를 입력하고 left에 100px를 입력한 결과 아래와 같습니다.

relative 일때6

사이드바가 이동함을 볼 수 있지요.

후훗..

다음은 padding을 알아보겠습니다.

여백을 주는 속성으로 "padding"과 "margin"이 있다고 합니다.

padding은 내부에 여백을 만들어주는 속성이고,

margin은 외부에 여백을 만들어주는 속성이라고 합니다.

padding에 값을 줘서 상, 하, 좌, 우를 원하는 만큼 여백을 만들어 줄 수 있다고 합니다.

padding1

상,하,좌,우로 50px 만큼의 여백으로 인하여 위와 같이 나타났습니다.

padding : 0px 70px; 를 줘봤습니다.

padding1

상하로 0px, 좌우로 70px 만큼 여백이 생겼습니다.

padding : 0px 50px 50px; 를 주면

위로 0px, 좌우로 50px, 아래로 50px 만큼 여백이 생긴다고 합니다.

이렇게 속성에 값을 추가해주여 유연성 있게

내부 여백을 만들어 갈 수 있습니다.

padding : 0px 50px 50px 50px; 를 주면

위, 오른쪽, 아래, 왼쪽 순으로 여백이 적용된다고 합니다.

화면에 다 표현되지 않아 사진은 스킵하도록 하겠습니다.

(함께 실습해 보아요~)

margin은 다음에 코드안에 있으니

별도로 진행하도록 하겠습니다.

다음은 "width" 입니다. 이건 바로 적용해 보면 알 수 있겠죠?

width

500px를 적용하니, 바로 티가 나서 좋습니다.^_^

다음은 "height" 입니다.

100%에서 50%로 값을 줘봤씁니다.

height1

노란 부분이 반으로 줄어들었습니다.

사이드바의 스크롤을 움직여보겠습니다.

height2

위와 같이 사이드바가 50%만 보임을 알 수 있습니다.

#sidebar 같은 것을 하나 더 만들어서 아래에 배치 할 수도 있겠습니다.

다음은 "background-color" 입니다.

background 속성이 찾아보면 다양한 종류가 많은 것 같은데,

초보인 제가 덤비기엔 무서우니 일단 있는거 먼저 보도록 하겠습니다.

background-color: #ffa; 에 보면 배경 색을 지정해 주는 것임을 눈치오 알 수 있습니다.

#fff 값에서 ffa 로 수정하니 연노란색으로 변함을 이미 보고 있지요.

원래 기본 설정인 #fff일때는

사이드바 배경색

이렇게 사이드바의 배경색이 흰색임을 볼 수 있습니다.

fff 나 ffa 같은 것도 숫자와 유사한 개념인데,

컴퓨터가 알아 볼 수 있게 변환된 값이라고 생각하시면 되겠습니다.

컴퓨터는 비트 단위로 인식하다 보니

음.. 설명을 잘못하다보니 괜히 말을 꺼낸게 아닌가..

아무튼 16진수로 f 가 10진수로 15 입니다.

f를 비트 단위로 표현하면 1111 1111 1111 1111 이지요...

하하;; 컴퓨터는 0과 1만 알아듣는 다고 합니다.

음.. 컴퓨터도 결국 CPU라는 프로세서 칩이 들어있고..

전기적인 신호를 0V를 주면 0 신호이고, 3.3V나 5V를 주면

1 신호인.. 아무튼 몰라도 됩니다.

#fff 를 하나씩 바꿔보면서 색상을 찾아갈 수 도 있지만,

우리가 원하는 색상의 코드는 네이버님께서 알려주고 계십니다.

네이버 검색 노란색

색채용어 노랑

위에 보시면 "색채용어사전"에서 "K값" 에 보면 "#ffdf3e" 를 볼 수 있습니다.

이 값을 CSS 코드에 대입해 보겠습니다.

ffdf3e를 적용한 사이드바 배경색

아까 위에서 사용했던 노란색과 다른 네이버에서 찾은

노랑색이 사이드바의 배경색으로 적용됨을 볼 수 있습니다.

캬~!

색상을 일일이 찾기 힘드니,

다음에 시간내서 별도로 색상별 코드를 기록하도록 하겠습니다.

자, 다음은 "border-right" 입니다.

border도 여백류의 일종 같습니다.

현재 border-right에 50px 값을 주면

border-right에 50px

위와 같이 사이드바의 노란색 부분이 좁아지고

빈틈에 회색이 채워집니다.

이건 solid를 써서 그런것 같습니다.

solid는 속이 빈 데가 없는 이란 뜻이 있습니다.

그래서 solid 옆에 #ddd 값을 #fff 로 바꿔 보겠습니다.

border-right solid #fff

보이시나요?

#ddd는 회색이라고 생각되며, #fff는 흰색이니

빈 공간이 흰색으로 바뀜을 볼 수 있습니다.

그러면 border-right 말고 border-top을 적용해 보겠습니다.

solid 값은 마구잡이로 #333을 넣어봤습니다.

border-top solid #333

사이드바의 윗쪽에 100px 값을 주었더니,

넓은 공간이 생겼으며 solid 에 #333을 넣었더니 검은색이 나타났습니다.

그리고 top 면과 right 면에 맞닿는 면이

대각선으로 만나는 것을 볼 수 있습니다.

신기방기합니다.

그러면 이제, 이번 시간의 마지막인 "cursor" 를 보시겠습니다.

마우스가 움직일 때 보이는 이미지인 cursor를

해당 속성 값을 수정하면 커스텀이 될 수 있다고 합니다.

cursor 표

이 외에도 더 다양한 커서들이 있고,

웹 브라우저 마다 지원하는 항목이 다르고 다양한 것 같습니다.

일단 간단한 예제로 사진 하나 퍼왔습니다.

현재 "default" 세팅이라 왼쪽 젤 위에 있는 모양이 나오고 있지요.

제 글을 보시는 분들도 함께 실습해 보시기 바랍니다. >_<

저는 no-drop을 해보겠습니다.

핸드폰으로 찍다보니 >_<;;

커서가 변한 것을 볼 수 있습니다.

하나,하나 바꾸면서 바로 적용되니 신기하고 재밌습니다.

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

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

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

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

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

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

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

함께 해요 >_<

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

☞ 책보고 무작정 따라하는 웹 사이트 설계 - 1편 -

저작자표시 비영리 변경금지

'강화도라이프 > 블로그 & 웹 사이트' 카테고리의 다른 글

티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 3편 - (2)	2019.08.19
티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 2편 - (0)	2019.08.18
티스토리 블로그 스킨 꾸미기 - 스퀘어(Square) 스킨 - (3)	2019.08.10
[티스토리] 쿠팡 파트너스 배너 추가하기 -1편- (5)	2019.08.08
파비콘(Favicon) 및 아이콘(icon) 만들기 (0)	2019.08.05

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

- 사이드바(sidebar) 1편 -

'강화도라이프 > 블로그 & 웹 사이트' 카테고리의 다른 글

티스토리툴바

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