블로그 스타일을 저장하지 않고 쉽게 미리보고 싶을 때 - 크롬 개발자도구

안녕하세요. 행복을 노래하는 초매입니다.

오늘은 블로그에 관련된 포스팅을 올리고 있는데요. 솔직히 계획해서 올리는 것 보다 블로그를 수정할 때 많은 어려움이 있더라구요. 그래서 혹시 블로그를 수정하시는 분들에게 조금이나마 도움이 되려는 마음에서 글을 한번 올려봅니다.

제 블로그는 사이드바 너비가 마음이 들지 않아 수정을 하려고 하는데요. 그러면 CSS의 너비 및 색상들을 수정할 때마다 관리자 모드 - HTML/CSS 들어가서 저장하고, 테스트하는 연속적인 과정이 필요합니다. 소스 코드를 잘못 작성했을 경우는 블로그 위치가 얽혀서, 블로그 정보를 얻으로 오시는 방문객들의 불편을 야기시키기도 하는데요. 글쓰기는 미리보기가 있는데, 이러한 블로그 스타일을 변경시키는 경우에는 왜 미리보기 기능이 없는 걸까요? 그 불편을 해결해주는 것이 바로 "크롬 개발자도구" 입니다.

▶ 크롬 개발자 도구란?

개발자들이 웹페이지를 쉽게 디버깅할 수 있게 크롬에서 기본적으로 지원해주는 플러그인입니다. 요즘 모바일 웹페이지를 개발하면서 많이 사용했던 기능인데요. HTML 구조부터 CSS, Javascript, Web Database 등 디버깅에 필요한 여러가지 기능이 포함되어 있습니다. 정말 구글은 개발자에게는 정말 사랑스러운 회사인 듯 합니다.

단축키 : Ctrl + Shif + I (영문자 아이)

▶ 개발자 도구를 이용한 사이드바 수정

크롬이 제공하는 개발자 도구를 이용해서 사이드바 수정시 어떻게 변하는지 살펴보도록 하겠습니다. 개발자 도구는 디버깅을 목적으로 개발된 것이지, 이것으로 사이드바를 수정했다고 해서 티스토리 블로그 페이지가 수정되는 것이 아닙니다. 

( 저장 안된다고 저에게 뭐라 하시면 안되요...^^ㆀ )

자~! 그럼 이제 사이드바 수정시 변하는 모습을 살펴볼텐데요. 백마디 말보다 하나의 이미지가 이해가 빠른 법이죠... ^^ 이미지와 함께 설명해드리도록 할께요~! 그럼... 히비고~! ㅎㅎㅎ

지금 보시는 이미지는 제 블로그의 모습인데요. 사이드바가 조금 작아서 불만이었고, 이제 그 불만을 해결하기 위해 수정하려 하는 것이죠...^^ 우측 블로그 설명을 유심히 봐주세요. 

( 나중에 사이드바 너비 수정 했니,,, 안했니,,, 하시는 분이 계실 것 같아서요...ㅎㅎㅎ )

사이드바는 배경색이 엷은 회색인데요.... 좌측 가장자리쪽에 마우스 오른쪽 클릭을 하시면, 팝업 메뉴가 뜨게 되구요. 그 때 마지막에 요소검사를 선택하시면 되요. 이게 바로 개발자 도구입니다... ^^

요소검사를 선택하시면, 위와 같은 디버깅 환경이 표시되는데요. 넘 당황해하시지 마세요. 우측 중간 쯔음... 종료 표시 보이시죠?! 그거 누르면 없어지니까, 안심하세요...ㅎㅎㅎ 좌측 하단에 <div id="sidebar"> 보이시죠?! 그리고, 우측에 보면 선택한 항목에 대한 CSS 정보를 표시해줍니다. 빨간색 박스를 보시면 #sidebar 라고 표시되어 있는데요... 이것은 "id 가 sidebar 라는 태그의 스타일을 이런식으로 표현했다." 라는 CSS 정보를 표시해줍니다.

자.. 그럼 스타일을 변경시켜보도록 하죠. sidebar CSS에서 배경색을 수정해보도록 하겠습니다. sidebar 는 기본적으로 회색으로 설정되어 있는데요. 이것이 왜 회색으로 표시되는지에 대한 정답은 찾지 못했어요.

( 혹시 아시는 분 있으시면 알려주세요...ㅜ.ㅜ )

아마 추가로 다운 받는 티스토리 CSS 파일에 정의되어 있지 않을까? 라는 추측만 해봅니다... ^^ㆀ 그럼 padding을 선택하고, 엔터, 엔터를 치시면 새로운 CSS 를 입력하실 수 있게 되구요. 거기에 background-co 까지만 치셔도 크롬의 센스(?)에 의해서 일치할 만한 단어를 추천해줍니다. 이 때... Tab 을 누르셔도 되구요. 아니면 다 치셔도 되요...^^

그럼... background-color 배경색을 빨간색으로 입력해볼께요... 그러니,,, 위와 같이 배경색이 빨간색으로 수정되었죠? 이렇게 수정했다고 해서 바로 반영되는 건 아니니까,,, 안심하세요...^^

그럼... 이번에는 기존 정보도 수정해볼께요. float 라는 속성 옆에 체크박스가 있는데요. 이것을 체크해제할 경우는 float 속성을 삭제하는 것과 같은 역할을 합니다. float 를 삭제해버리면, 사이드바가 오른쪽에 위치할 이유가 없어지기 때문에 이미지처럼 좌측으로 이동되게 되는 것입니다.

자... 이제 제가 하고자 했던 사이드바 너비를 조정해보겠습니다. 너비에 대한 속성은 width 죠?

( 설마 모르시는 건 아니죠?! ^^? 모르신다면 공부하세요...ㅎㅎㅎ )

width 값을 250px 로 수정하도록 하겠습니다. 어?!?! 근데,,, 왜 사이드바가 밑으로 내려왔죠? 그 이유는 아래 이미지에서...ㅎㅎㅎ

블로그는 전체적으로 content 너비와 sidebar 너비로 구성되어 있고, 이를 감싸고 있는 container가 총 너비를 지정합니다. 그래서 content 너비 + sidebar 너비 + 기타너비 > container 너비 였기 때문에 본문 아래쪽으로 내려오게 된 것이죠... 

( sidebar 도 숨막혀서 자기 살 곳을 찾는 거예요...ㅎㅎㅎ )

그래서 저는 container 너비를 확 늘이지 않고, 최적의 너비인 1050px로 수정했고, 사이드바가 정상적으로 표시됨을 볼 수 있었습니다. container 너비는 각 사용자마다 다르니까 많은 테스트 후 수정하세요...^^

어휴... 이제 개발자 도구를 종료시키고 나서의 모습입니다. 참... 힘들게 돌아 돌아왔네요... 

( 그럼,,, 이제 어떡하지? 어떡하지? 다음은 어떻게 해야 해요? )

지금까지 말한 것처럼 개발자 도구를 수정했다고 해서 블로그에 반영되는 것은 아니니까요. 관리자 모드에서 HTML/CSS 로 가셔서, CSS 부분을 수정하시면 될 것 같아요.

( HTML/CSS 수정하는 것까지 작성하라 하시면... 전 밥은 언제 먹어요... ㅜ.ㅜ )

이상, 점심 먹으로 나가야하는 초매였습니다. ^^