티스토리 스킨 CSS편집, 개발자도구를 활용하면 편해져요!

브라우저의 기본기능 개발자도구를 이용해서 CSS를 쉽게 편집하는 방법을 올려봅니다.

 

일반적으로 소스보기 후 해당 소스를 하나하나 찾아가며 수정하는 분들이 혹 있으실까바 조금은 편한 방법을 소개해드립니다. 이미 어느정도 HTML을 만질 수 있는 분들은 해당사항이 안될지도 모르겠네요.

 

 

 

 

 

위의 사진처럼 익스플로러11 기준, 오른쪽 상단을 보시면 톱니바퀴가 보이실겁니다. 클릭하시고 보시면 메뉴에 개발자도구가 있습니다. (타 브라우저도 비슷한기능들이 있습니다.) 그리고 익스 버전별로 메뉴 모양이 조금씩 다른데 기능은 거의 동일하게 들어가 있습니다.

 

클릭하시면 아래처럼 브라우저의 하단에 창이 열립니다. 새창으로도 열리기도 하지요~ 옵션에서 변경가능합니다만 설명은 생략할게요~

 

 

 

 

 

 

개발자도구 창을 보시면 맨앞에 DOM탐색기라고 있어요~ 그리고 서브메뉴중에 맨앞에 박스모양을 선택합니다.

 

 

 

 

 

툴이 무엇을 하는거냐면? 툴을 선택한 상태에서 화면의 원하는 위치로 커서를 옮겨보세요! 자~ 그럼 위 이미지처럼 선택 영역이 색깔이 바뀝니다. 클릭은 하지말고 이동을 하시면서 원하는 곳으로~ 그런 다음 클릭을 하면 해당 영역의 HTML과 CSS를 확인하실 수 있습니다.

 

 

 

 

영역을 클릭하시면 위의 그림처럼 아래쪽 새로 생긴 창의 왼편에 HTML이, 오른쪽에 CSS 정보가 나옵니다.

 

위의 예를 들면 대충 class이름 tit_post으로 본인이 선택한 영역에 스타일을 줬다란 뜻이죠~

 

 

자 오른쪽영역을 볼까요? tit_post부분에 영향을 주는 속성값들이 주루룩 나옵니다. 맨 오른쪽에 보시면 파일명과 해당 줄까지 나와있어요~

 

style.css는 티스토리스킨의 기본 스타일정의 파일이므로, 관리자메뉴의 CSS화면에 가셔서 해당 줄 (311,312)을 찾으면 저 속성들이 있습니다.

 

팁하나를 드리자면, 오른쪽영역에서 마우스로 클릭을 하시면 속성추가, 속성값변경을 임시로 적용해볼수도 있습니다. 저장은 안됨. 문제가 된 부분이나 수정할 부분을 사전에 테스트를 해볼수도 있죠~ 아 그리고 앞에 체크박스를 켰다 껐다하시면 바로바로 화면에서 변화를 확인하실 수도 있어요~

 

 

개발자도구라 뭔가 어려울거 같지만 딱 저 기능만 익숙해지신다면, 스킨편집이 좀 더 쉬워지고 재미가 생길거예요~^^

 

 

 

 

무지!

 

도움되셨다면 아래 하트버튼 꾸욱~!!!!