chrome 개발자 도구를 이용해 티스토리 블로그 스킨편집을 해보자!

 

 

 

 

 

 

 

 

(이번 포스팅은 html과 css에 대한 기본적인 지식이 있으신 분들에게 추천드립니다.)

 

 

 

 

오늘은 chrome의 개발자 도구를 이용해서 tistory 블로그 스킨 편집을 해보도록 하겠습니다.

tistory는 마음에 드는 스킨을 다운로드하고, 수정하는 것이 굉장히 편리합니다.

 

우선, 수정이 가능한 스킨을 적용해봅시다.

 

가끔 수정이 불가능한 스킨이 존재하기 때문에, 저는 수정이 가능한 티스토리가 제공하는 스킨을 이용해보도록 하겠습니다.

 

 

우선 자신의 블로그 관리 홈에 들어가서, 

 

 

 

 

 

 

 

 

 

 

스킨 변경을 클릭해줍니다.

poster, whatever와 같은 깔끔한 스킨이 많아요! 저는 그중에 'square'를 선택했습니다.

 

 

 

 

 

 

 

 

 

 

적용을 클릭해주면, 1차적인 적용이 됩니다.

굉장히 많은 사람들이 이 스킨을 사용하고 있기 때문에 "나는 조금 차별화를 두고 싶다!"

하시는 분들은 차근차근 따라해보시면 됩니다.

 

준비물은 크롬인데요! chrome 브라우저는 개발자를 위한 개발자 도구가

사용자들에게 굉장히 편리하게 발달되어있습니다.

 

f12버튼을 누르면, 바로 이 개발자 도구가 뜹니다.

 

 

간단하게 네이버를 가지고 실험해볼까요?

 

 

 

 

 

 

 

 

 

 

 

이렇게, 네이버의 html 정보를 알 수 있어요!

사실 프런트엔드 개발을 하는 사람은 이 도구를 잘 다뤄야 한다고 하는데, 전 아직 잘 모릅니다,,,ㅎㅎ,,,

그래도 이 도구를 이용해 아주 기본적인 것은 할 수 있으니까 계속 포스팅해볼게요!

 

 

 

다시 스킨이 적용된 우리의 블로그로 돌아와서, f12를 눌러 개발자 도구를 켜줄게요!

 

 

 

 

 

 

 

 

 

 

 

이렇게, 잘 보이게 창을 조절한 상태입니다!

 

이제, 자기가 꾸미고 싶은 부분을 꾸미면 되는데 제가 예시 몇 가지를 보여드릴게요!

 

 

 

 

 

 

 

 

 

저기 빨간색 네모 안에 있는 화살표를 누르고 바꾸고 싶은 부분을 선택합니다!

 

저는 슬라이드 바 부분의 색을 제가 좋아하는 보라색으로 바꾸고 싶어서 슬라이드 바를 선택할게요!

 

 

 

 

 

 

 

빨간색 부분 클릭 클릭!

 

 

 

 

 

 

 

 

선택하면, 해당하는 부분의 css 도 나타나게 되는데요,

이를 통해서 저 h1태그는 sidebar라는 id를 가지고 있는 것을 확인할 수 있습니다!

 

추가적으로 말씀드리자면,

 

 

 

 

 

 

 

 

 

sidebar라는 이름 앞에 #이 붙어있다면 id이고. class입니다!

 

 

자, 이제 적용을 해볼까요!

 

 

 

 

 

 

 

새 창을 열어 블로그 관리 홈을 들어가서, 스킨 편집을 눌러줄게요!

 

 

 

 

 

 

 

 

그다음 html 편집을 눌러 들어가 줍니다.

 

 

 

 

 

 

 

 

그럼 이렇게 html 정보가 나오는데, 저희가 손을 댈 것은 이 부분이 아닌

css 이기 때문에 css를 클릭합니다.

 

 

 

 

 

 

 

굉장히 많은 css 정보들이 있어요.

 

이 중에서 우리가 찾을 것은 #sidebar입니다!

 

텍스트를 클릭한 후 Ctrl + F 키를 눌러 sidebar를 찾아줍니다.

 

 

 

 

 

 

 

금방 찾았죠?

 

간단한 예시이기 때문에 저는 컬러만 바꿔줄게요!

 

컬러 색상을 하나하나 바꿔가면서 테스트를 해보는 건 너무 막일이기 때문에,

 

 

https://html-color-codes.info/Korean/

 

 

 

html 컬러 코드표가 있는 것을 첨부해봤어요!

 

 

 

 

https://www.webdesignrankings.com/resources/lolcolors/

 

 

 

 

 

 

 

 

여기는 제가 ppt 제작할 때도 가끔씩 쓰는 사이트인데, 색상 조화가 좋은 것들이 많고

사람들이 투표를 해서 인기도를 알 수 있기 때문에 트렌드를 파악하기 좋은 사이트예요!

 

 

 

마음에 드는 보라색 컬러를 선택해서 background-color를 수정해줄게요.

 

 

 

 

 

다 됐으면 적용을 눌러봅시다.

 

 

 

 

 

 

 

 

 

연한 보라색 예쁘네요!

이런 식으로 하나씩 바꿔가면 됩니다ㅎㅎㅎ

다른 것도 해볼까요?

 

 

 

 

이번에는 심심한 "전체 글" 부분을 바꿔볼게요!

 

 

 

 

 

 

바로 위에 감싸져 있는 div의 id가 head 네요! 찾아봅시다 head!

 

 

 

 

 

 

head의 h2 태그 부분의 color를 조금 다른 색의 보라로 바꿔봤습니다!

 

 

 

 

 

 

네 오늘 이렇게 크롬의 개발자 도구를 이용해서 간단하게 스킨 편집을 해봤습니다!

 

생각보다 간단하고 재밌죠?

 

 

시간 날 때마다 꾸며줘도 좋을 것 같네요.

 

 

오늘 포스팅은 여기서 마치도록 하겠습니다!