구글 블로그는 아주 많은 스킨이 있습니다. 괜찮은 것만 추려내더라도 일일이 확인할 수 없을 정도인데요, 이렇게 많은 스킨에는 공통점이 있습니다. 기본적으로 구글 블로그가 정해진 형태에 대해서는 변하지 않는다는 겁니다.
구글 블로그 스킨을 적용하면 조금씩 손을 보고 싶은 곳이 몇 군데 있는데, 그중에서 눈에 거슬리는 곳이 한 군데 있습니다. 바로 본문 아래 프로필 공간입니다. 이곳은 어떤 의미로 만들었는지 알 수 없네요. 댓글 쓰는 곳도 아니고 그저 이 블로그를 만든 나 이런 사람이야 알리는 정도밖에 보이지 않아 활용 가치가 떨어집니다. 조금은 구질구질해 보이기도 하는 이 쓸모없는 공간을 삭제하는 방법을 알아보겠습니다.
바로 이 자리입니다. 이 공간을 없애는 방법을 알아보겠습니다.
앞선 포스팅에서 개발자 도구를 통해서 위치를 확인했습니다. 프로필 이미지 클래스는 avatar-container, 프로필 사용자 이름은 author-name입니다. 개발자 도구를 이용해서 소스 위치를 찾는 방법은 아래 링크를 참고하시면 됩니다.
구글 블로그 html 편집화면입니다. 구글 블로그에서 html 수정을 했을 때 잘못 적용이 되었다면 이렇게 오류 메시지를 알려줍니다. 오류 메시지가 항상 사용자가 원하는 결과대로 적용이 되었다는 것을 뜻하지는 않습니다. html 코딩 상 문제가 없다는 것이지, 사용자가 의도하는 결과를 보여준다는 것은 아닙니다. 지금 오류는 간단합니다. 주석 처리한 곳의 위치가 틀렸습니다.
바로 이곳이 앞서 개발자 도구에서 확인한 곳입니다. 프로필 이미지와 프로필 사용자 이름을 담당했던 두 개의 클래스가 보입니다. 이 두 개를 포함해서 몽땅 주석 처리합니다. 스킨에서는 필요 없는 소스와 레이아웃에서 필요없는 위젯은 삭제를 하는 것이 제일 좋다고 하는데요, 일단은 주석 처리하고 저장을 누릅니다.
결과를 확인하면 프로필 사용자 이름이 노출되고 있습니다. 어찌 된 일일까요. 분명히 두 개의 클래스를 한꺼번에 주석 처리했는데, 하나만 적용되었습니다. 다시 html 편집화면으로 들어가 보겠습니다.
앞서 주석 처리했던 author-name 클래스가 그대로 남아있네요. 그래서 화면에도 프로필 2차 삭제로 표시했습니다.
결과 화면입니다. 처음 프로필 공간이 차지하고 있던 철골 구조물 같은 곳이 사라지고 본문과 딱 붙어있습니다. 어떤가요, 괜찮죠.
개발자 도구로 HTML 소스 위치 찾는 방법, 이렇게 쉬운 것을