크롬으로 티스토리 블로그 구조 파악하기

 티스토리 블로그의 가장 큰 매력은 바로 자신만의 디자인을 가진 블로그를 만들 수 있다는 점이 있지요. 저 또한 이런 매력때문에 제 블로그를 티스토리에 차리게 되었기도 하지요. 그러나 이제 갓 블로그를 시작하는 초보 분들이라면 이러한 티스토리의 장접이 단점이 되는 경우가 발생합니다. 기본적으로 HTML과 CSS의 동작 방식을 이해하고 이를 수정할 줄 알아야 멋진 블로그를 만들 수 있기 때문이기도 하지요.

 인터넷을 검색하며 어떻게든 스킨을 이것 저것 수정해 나가면 코드의 구성을 어느정도 까지는 이해하실 수 있는 단계에 도달하실 것입니다. 하지만 초보자에게 있어 이러한 소스의 수정도 한계가 있는법!

 이번에 소개해드리는 것은 크롬의 기능을 활용하여 블로그의 디자인을 보면서 해당 디자인이 코드로 어떤 방식으로 구현했는지를 확인할 수 있는 방법입니다.

 보시는 화면은 제가 티스토리를 처음 시작할 때 처음으로 작성한 글입니다.

 자신이 원하는 화면을 선택하신 후 오른쪽 버튼을 클릭하신 후 '요소 검사'를 클릭합니다.

 그렇게 하면 다음과 같은 화면을 보실 수 있습니다.

 위쪽의 회면은 자신의 블로그이고요 아랫쪽 왼쪽 부분은 skin.html, 아랫쪽 오른쪽 부분은 style.css 파일입니다.

 skin.html에서 자신이 원하는 영역을 클릭하면 위쪽 화면에서 선택한 부분이 어느 영역인지를 표시해 주며

 왼쪽 윗부분에서는 해당 부분의 명칭과 픽셀 크기를 나타냅니다.

 그리고 style.css에서는 선택한 부분이 적용된 코드 부분을 함께 볼 수 있습니다.

 위의 방법을 사용하여 자신의 코드를 수정해서 멋진 사이트를 만들어 보도록 합니다!