[블로그 꾸미기] CSS 수정 좀더 쉽게 하는 방법

이번 포스트는 CSS 수정을 좀더 쉽게 하는 방법에 대해서 알아보도록 하겠습니다.

웹개발자 분들께서는 HTML 과 CSS 에 어느정도 익숙하리라 생각합니다. 하지만 익숙하지 않은 분들도 다소 계실거라 생각이 드는데요 이때 블로그를 관리하기 위해 CSS 수정을 해야 하는 상황이 있을 수도 있습니다. 예를 들자면 티스토리의 스킨을 적용했지만 간격이 작거나 클때 또는 글자의 크기가 작거나 클때가 있을 수 있습니다. 이를 어떻게 손쉽게 수정할 수 있는지에 대해서 알아보려고 합니다.

Chrome 브라우저

IE, Firefox, Safari 등 다양한 브라우저가 존재하고 이들은 개발자 도구를 포함하고 있습니다. 하지만 이번 포스트에서 공유드리면서 사용된 기본 브라우저는 크롬(chrome) 브라우저 이기 때문에 크롬브라우저를 기준으로 설명드리겠습니다.

만약 이미 크롬브라우저가 설치되어 있다면 크롬브라우저를 이용해 같이 확인해 보실 수 있으며, 만약 크롬브라우저가 설치되어 있지 않다면 아래 경로를 통해 설치하실 수 있습니다.

https://www.google.com/intl/ko/chrome/browser/features.html

개발자 도구

크롬 브라우저를 열어보면 개발자 도구가 있습니다. ms 윈도우에서의 크롬 브라우저의 개발자 도구 단축키는 "F11" 로 알고 있으며 맥에서의 크롬부라우저의 단축키는 아래와 같습니다.

이렇게 개발자 도구를 열었을때 아래와 같은 도구 모양이 나타나고 "element" 영역을 활성화 하여 수정하고자 하는 영역을 선택할 수 있습니다.

Element 탭에서 DOM 을 선택했을때 "반짝반짞" 이라는 타이틀 아래 블로그 설명 영역이 활성화 되어 있는 듯한 모습을 확인하실 수 있습니다. 또한 오른쪽 "Style" 탭에 선택된 element의 style 을 확인하실 수 있으며 여기에서 직접 수정하여 사용자가 원하는 모습을 바로바로 테스트 해볼 수 있습니다.

위에서 캡쳐된 <div id="blogDesc"> 엘리먼트의 style 을 보면 font 와 color, margin-top 속성을 확인해 볼 수 있습니다. 

현재 margin-top 값은 10px 로 정의되어 있으며 저는 간격이 좁은것 같아 좀더 넓게 처리하도록 해보겠습니다. 그래서 20px 정도로 설정하고 화면을 확인해 보도록 하겠습니다.

앞서 캡쳐된 모습과 10px 에서 20px 로 수정한 이후의 간격이 훨씬 넓어 진것을 확인하실 수 있습니다.

또한 수정된 css 속성은 바로바로 화면에 반영되기 때문에 블로그 관리자 모드에서 HTML/CSS 편집내 style.css 를 수정한 뒤 저장하고 다시 확인하는 번거로움을 줄일 수 있고 마지막 반영된 모습을 보고 만족스럽다고 생각이 되었을때 style.css 내용을 수정하시면 됩니다.

만약 블로그 관리 또는 편집을 하시다가 궁금한 내용이 있다면 언제든지 댓글을 통해 문의주신다면 바로바로 신규 포스팅 또는 댓글을 통해 답변 드릴 수 있도록 하겠습니다 ^^

이번 포스트는 CSS 수정 좀더 쉽게 하는 방법에 대해서 알아봤습니다.