"정보" 티스토리 꾸미기(배경색 적용편)

 

티스토리 꾸미기 세번째는 배경색을 적용해 보는 거에요.

 

저 같은 경우는 쫌 밝고 여자여자한 색상을 좋아해요.

그러다 보니.. 티스토리 스킨 바꾸고 가장 처음 한게 배경색 바꾸는거 였어요 ㅎㅎ

 

버튼,배경,글자의 색상만 바꿔도 전체 분위기가 달라보이기 때문에

정말 간단하지만 핵심적인 부분이기도 하조.

 

 

 

 

페이징 컬러와 버튼컬러 사이드바 배경색을 한번 바꿔볼께요.

컬러는 각자 지정되어 있는 것이기 때문에 한번에 싹 바꿀수는 없어요.

한번에 바꿀수 있게 소스가 작성되어 있다면야 가능하지만...

대부분 따로따로 되어 있을 확률이 높조~

 

 

 

 

F12 버튼을 누르면 이미지처럼 DOM탐색기가 열리고,

화살표 아이콘을 누른 후 원하는 곳에 마우스를 찍고,

우측에 나온 소스를 확인~ 간단하조~~

 

해당 부분에 대한 자세한 설명은 http://nanakono.tistory.com/155  참고하시면 되요~

 

위와 같이 하면 숫자 1을 감싸고 있는 배경의 컬러값이 보여요.

맘에 안드는 초록색이네요.. 당장 바꿔야해!!!!!!

 

배경색은 background << 라는 속성이에요.

background 라고도 작성할 수 있고,

background-color, background-image 등 작성법이 많지만...

일단 background 가 들어가면 아~ 배경이구나 하시면 되요.

 

background-color 는 배경의 색만 말하는거고

background-image 는 배경의 이미지만 말하는 거에요.

하지만 background 는 배경색, 이미지 모두를 말하는거조.

쉽게 줄여쓰는거라고 생각하시면 되요.

 

소스를 확인해 보니 배경색의 위치가 style.css 파일 318번째 줄에 있네요~

 

 

 

 

소스 위치를 찾았다면

background-color << 라고 되어 있는 부분을 원하는 컬러값으로 바꿔주면 되요.

#숫자6자 << 가 색의 값이니까 그 부분만 고쳐주면 되겠조?

예 background-color:#000000; << 또는 background-color:yellow;

 줄여서 background:#000000; 이렇게 작성해도 되요~

만약 배경색을 바꿨는데 글자색이 잘 보이지 않는다면 color 값을 변경해주면 되구요.

 

요 컬러값 넣는 내용도 http://nanakono.tistory.com/155 참고하시면 자세히 나와있어요.

 

 

 

 

오홍~ 배경색이 잘 바뀌어 있네요.

 

 

 

 

이번엔 버튼색을 바꿀께요.

방법은 위와 동일해요.

버튼의 배경색이 있는 소스 위치를 확인한 후

 

 

 

 

배경색 컬러값을 수정해주면 되요!

진짜 간단하조~

 

 

 

 

버튼도 예쁘게 잘 바뀌어 있네요.

 

 

 

 

버튼과 페이징 부분의 배경색은 쉽게 바꿨지만...

이번엔 살짝 애매하면서 어려워요.

사이드바에 대한 배경색을 바꿀껀데...

 

사이드바 부분을 마우스로 찍어봤지만 스타일 부분에 배경색에 관한 소스가 없네요.

분명 배경은 background 라고 했는데 말이조.

 

 

 

 

html은 구조는 상당히 복잡한 편이에요.

c위에 b가 b위에 a가 겹쳐져 있는 경우도 있고 c위에 a가 붕 떠있는 경우도 있고...

여러 경우의 수가 있답니다.

 

쉽게 포토샵의 경우 딱 보기엔 완성된 그림 하나지만

그 안에는 많은 레이어들이 존재하조.

 

html로 그렇게 되어 있다 생각하면 되요.

저 경우도 분명 눈으로 보기엔 배경이 있는 영역이였지만...

소스를 확인하니 배경이 없는 레이어 였던거조. 

 

이런 경우

다른 레이어를 살펴보면 되요.

지금은 inner_sub라는걸 확인했는데 배경이 없었조,

그럼 그 위에 있는 레이어를 살펴 볼께요.

 

 

 

 

cont_sub 를 살펴 보니... 배경색이 있긴 하네요.

background 라는 속성이 보여요.

하지만 분명 이미지가 있어야 하는데 색상 코드가 있네요....

그럼 이번 레이어도 아닌거조.

 

 

 

 

wrap_sup 라는걸 살펴보니

배경 이미지가 보이네요.

정확히 background-image 라고 되어있고 jpg파일을 불러왔군요!

그럼 사이드바에 대한 배경이미지는

wrap_sup 라는 영역에 작성되어 있었던 거네요.

 

글로만 보면 어렵지만 포토샵이랑 함께 생각하면 좀더 이해하기 편할꺼에요.

 

눈에 보이는건 하나지만 그 안에는 레이어 위에 레이어 그 위에 또 레이어...

이렇게 겹쳐져 있다! 라고 생각하세요.

 

 

 

 

원래는

.wrap_sub {background-image:url("images/header_default.jpg") 0 0 no-repeat;}

위와 같이 소스를 작성하지만.. 

이 경우 스크립트와 함께 연동되어 있기 때문에  

.wrap_sub {background-image:/*@background-image*/url(images/header_default.jpg)/*@*/;}

소스가 쫌 다르게 작성되어 있다고 보시면 되요.

 

설명하자면 끝도 없으니 일단... 다른곳에 복사 + 저장 해두세요.

 

.wrap_sub {background-image:url("images/header_default.jpg") 0 0 no-repeat;} 이렇게만 작성이 되어있었다면

/*.wrap_sub {background-image:url("images/header_default.jpg") 0 0 no-repeat;}*/ << 이렇게 주석을 달수도 있었지만...

위 경우는 주석을 하려면 내용을 조금 지워주고 해야하기 때문에

그냥 복사해서 다른곳에 저장하는게 빠를 듯 싶어요.

 

우리는 초보니까요~

 

 

 

 

원하는 컬러를 입력하고 저장~

 

 

 

 

오호~ 사이드바 배경이 사라지고 입력한 컬러가 나오는 군요!

근대... 색이 쫌 어두운 느낌이 들어요.

제가 입력한 컬러는 좀더 밝은 느낌의 주황색인데...

 

 

 

 

제가 아까 설명 했었조.

눈에 보이는건 1개지만... 그 안에는 여러개의 레이어가 있다고.

 

포토샵에서도 반투명 레이어를 올릴 수 있듯

html에서도 가능해요.. 아마 반투명 레이어가 있는 모양이네요.

 

background:rgba(34,34,34,0.35) 컬러값이 반투명 컬러값이 였나봐요~

그럼 그걸 빼주면 되겠조?

해당 소스 위치로 가서 background 부분을 삭제해주세요.

 

음... 지웠는데 나중에 반투명 올리고 싶으면 어쩌조?

그렇다면 삭제하지 않고 /*background:rgba(34,34,34,0.35);*/ << 요렇게 작성해 주면 되요.

/*   */  << 이건 주석이라는 건데...

쉽게 내용은 입력되어 있지만 스타일에 적용은 되지 않게 하는 그런거에요.

 

 

 

 

반투명을 뺐더니 이제야 원하는 컬러가 나왔네요..ㅎㅎ

버튼처럼 간단하게 배경색을 바꿀 수 있는 경우도 있지만...

사이드바처럼 어렵게 바꿔야 하는 경우도 있답니다.

 

천천히 눌러보고 찾아 들어가다 보면 다 소스안에 있는 내용이니 찾을 수 있을꺼에요.

 

 

 

 

그리고 배경색이 아닌 이미지로 변경을 하고 싶다면..

일단 원하는 이미지를 티스토리에 업로드 해야 적용이 가능해요.

 

관리 - HTML/CSS편집으로 접속한 후

 

 

 

 

파일 업로드 클릭.

 

원하는 이미지를 추가 버튼 클릭하여 업로드 해주세요.

만약 기존에 등록이 되어 있는 이미지라면

이미지명만 동일하게 맞춰준 후 업로드 하시면 되요~

 

이미지를 업로드 했다면...

배경에 해당 이미지경로를 적어주면 되는데..

{background:url("images/header_default.jpg") 0 0 no-repeat;}

위와 같이 작성한 후 이미지 명만 바꿔주면 되요~

 

 

 

 

0 0 no-repeat; <<  이 부분은

배경 이미지의 위치를 어떻게 보이게 할 것이냐..

배경이미지를 반복적으로 나오게 할 것이냐 아니냐 이런걸 정해주는 거에요.

 

배경이미지의 크기가 100인데 200의 영역에 넣으면

나머지 100의 영역이 텅 비어보이지 않겠어요?

그럴때 이미지를 반복해서 보여줄꺼냐 아니냐 이런 뜻인거조.

 

만약 가로방향으로만 반복해서 보여줄래 라고 한다면 repeat-x

위에서 아래 방향으로 반복할래 repeat-y

모든 방향 반복할래 repeat

쉽게 X축, Y축, 모두, NO 이런 말인거조.

 

위 이미지의 경우는 no-repeat 라고 작성한 것이구요.

 

 

 

 

가로방향으로만 반복 repeat-x

 

 

 

 

위에서 아래 방향으로만 반복 repeat-y

 

 

 

 

모든 방향으로만 반복 repeat

 

 

 

 

그리고 숫자 0 0의 뜻은

배경이미지가 나오는 위치를 정해주는 거에요.

 

만약 10% 0 이라고 작성하면

위 이미지 처럼 왼쪽에서 10%의 간격을 두고 이미지가 나오는 것이고

 

 

 

 

0 10% 라고 작성하면 위에서 10% 간격을 두고 이미지가 나오는 거에요.

만약 이미지를 중앙에 나오게 하고 싶으면

50% 50% 이렇게 작성해주면 되겠조?

 

어렵지 않아요~~~

도전도전!!!!

 

 

 

티스토리 꾸미기,html,css,background,배경색바꾸기.백그라운드 변경