개발자 도구를 이용해서 html 소스 위치를 찾는 방법입니다. 이전에도 스킨을 수정하려고 여기저기 문의하면 F12키를 이용해서 개발자도구에서 찾아보면 된다는 답변을 많이 받았습니다. 그 당시도 사용 방법을 찾아보기도 했는데, 이렇게 쉬운 것을 왜 이해를 못 했을까 그 생각만 납니다.
개발자 도구에서는 여러 가지 작업을 할 수 있는데요, 오늘은 자신 있게 설명할 수 있는 소스 코드 보는 방법을 알아보겠습니다.
키보드 F12를 눌러 들어온 화면입니다. 개발자 도구 화면 메뉴에서 Elememts 를 누르면 해당 페이지 소스가 쭉 올라옵니다. 여기서 커서를 천천히 아래로 움직이면 왼쪽 웹페이지가 음영 처리됩니다. 그러면 이 속에, 웹페이지에 관련된 소스가 들어있습니다. 해당 소스 앞에 있는 삼각형을 누르면 하위 코드가 열립니다. 이런 방법으로 찾아 들어갑니다.
이처럼 웹페이지와 관련 없다면 웹페이지에는 아무런 표시가 나지 않습니다. 다른 코드로 이동해서 찾습니다.
구별되죠. 지금 표시된 코드가 웹페이지에 영향을 주는 코드입니다. 계속 타고 들어갑니다.
이 자리는 프로필 이미지 자리네요.
이 자리는 프로필 사용자 이름입니다. 이제 html로 들어가서 확인합니다.
구글 블로그 html 편집화면입니다.
Ctrl + F로 프로필 이미지 클래스를 찾습니다. 클래스 이름이 avatar-container 입니다.
오른쪽에 같은 이름이 몇 군데 있다는 표시가 있는데요, 쭉 내려서 확인하니 이 자리가 나옵니다. 이 부분을 생각해 두었던 작업을 하면 됩니다.
구글 블로그 html 편집은 정상적으로 수정이 안 되면 오류 메시지가 나옵니다. 정상적이라고 해도 원했던 결과는 아닐 수 있지만, 그래도 한 번 걸려주니 안심은 되더군요.
조금 전에도 스킨 수정하느라 html코드에서 적당한 곳을 골라서 수정하고 결과 확인하고 다시 html 편집으로 들어왔다 확인하는 과정을 얼마나 했는지 모릅니다. 이렇게 간단한 것을, 참 한심할 정도로 많은 시간을 수정할 코드 찾느라 허비했네요.