구글 크롬 요소검사 기능을 활용하여 블로그와 친해지기

블로그 꾸미기

 

---

 

블로그를 운영함에 있어서 'HTML소스' 를 활용한다면, 이보다 더 좋을 수는 없을 것입니다. 특히나 티스토리 블로그의 경우 다양한 방법으로 블로그를 꾸밀 수가 있어서,' HTML소스' 를 잘 활용하신다면 블로그 꾸미기는 다한 것입니다.

 

반면에, 'HTML 소스' 를 잘 모르신다면, 블로그 꾸미기나 블로그와 친해진다는 것은 정말 어렵고 어려운 길입니다. 저 역시 흰것은 종이요, 검은 것은 abc구나.. 할 정도의 수준밖에 되지가 않습니다만...

 

'구글 크롬' 이 있다면, 이야기는 조금 달라집니다. 마치 영어 사전을 가져다 준 느낌이랄까요? ㅋ 표현이 적절한지는 모르겠지만, 블로그와 친해지기 두려우셨다면, 이 기회에 '구글 크롬 브라우저' 를 사용해보시기를 바랍니다. 

 

구글 크롬 다운로드 

 

구글 크롬

 

'구글 크롬' 은 '에버노트' 와 궁합이 잘 맞아서 자주 사용하는 프로그램 입니다. 익스플로러에도 지원이 되면 좋으려만, 아쉬우니 '구글 크롬' 을 사용하게 되었는데, 지금은 사용비율이 6:4 정도네요. '구글 크롬' 을 실행하시면, '마우스 우클릭' 으로 불러올수 있는 기능 중 '요소검사' 라는 항목이 있습니다.

 

 

 

---

 

'구글 크롬' 으로 접속하여, 마우스 우클릭을 하시면 '요소검사' 항목이 나타나는데, 이 부분에 대해서 설명을 하고자 합니다. 블로그를 꾸준히 운영을 하실 생각이시면, '요소검사' 기능으로 HTML언어와 친해지시기를 추천합니다.

 

요소 검사 활용

 

들어가기에 앞서, 이미지가 많은데, 부피가 크지 내용은 간단합니다. 내용이 길다고 '이거 어려운거구만 !' 하시며 나가지 마세요 ^^;

 

우선은 '요소검사' 기능을 활용하고자 하는 사이트를 선택합니다. 아래 예시는 '개인의 생각' 블로그를 대상으로 하였습니다. '요소 검사' 를 통해 알아보고자 하는 HTML소스는 '플로팅' 이라 불리우는 좌측의 손가락 아이콘입니다.

 

 

---

 

'요소 검사' 를 활용 할 수 있는 방법은 총 3가지로 볼 수 있습니다. 첫번째는 본문에 '마우스 우클릭' 을 활용한 방법과 'F12 키' 를 활용한 방법, 마지막으로 원하는 항목을 '마우스로 드래그' 하여 '요소 검사' 를 활용할 수 있는 방법입니다.

 

이를 활용하는 방법은 먼저 마우스 우클릭을 시도해봅니다. 개인의 생각 블로그는 마우스 우클릭이 막혀 있기에 요소검사 항목을 불러올 수가 없습니다. 이럴때에는 F12 키를 누르시면 아래 이미지와 같이 요소 검사가 실행이 됩니다.

 

마지막으로, 요소검사를 활용할 수 있는 방법은 드래그가 되는 사이트에서 가능합니다. 티스토리 하단이 깔끔해 보여서 배우고자 하신다면, 드래그를 해보시기를 바랍니다. 드래그가 되었다면, 드래그 된 곳에서 마우스 우클릭 / 요소 검사를 하시면, 해당되는 소스 부분을 바로 찾아 주기에 사용이 편리합니다.

 

구글 크롬 요소 검사를 활용한 실전

 

먼저 오늘 보기로 한 '플로팅 아이콘'을 찾기 전에 마우스로 각각의 소스 부분을 마우스로 이동해 봅니다. 현재 '사이드바' 에 해당되는 소스에 위치 해 있는데, 파란색 드래그 된 부분이 아니라, 빨간 네모 항목 부분이 해당됩니다. 

 

 

 

---

 

뭐가 뭔지는 모르겠지만, sidebar 항목이 해당되는 부분이 어디인지를 확인하실 수가 있습니다. 우측의 사이드바 항목이 파란색 영역으로 처리 된 것을 확인 할 수가 있는데, 현재 사이드 폭이 300px 라는 것까지 확인이 가능합니다. 원래 스킨 폭은 250인가 그랬는데, 변경한 것입니다.

 

이런식으로 하나하나 마우스로 위치를 확인하면서 해당되는 언어를 눈에 익혀두시면 좋습니다.

 

 

---

 

보통 티스토리 블로그의 경우 다양한 소스 활용 때문에, 나중에 가면 소스가 많아져서 관리하기가 어렵게 됩니다. 그래서 대부분 '주석' 처리를 해서 스킨을 관리하는데, 이를 활용해서, '요소검사' 항목 부분에 'Ctrl + F(찾기)' 을 활용하여 '플로팅' 이라고 검색을 해봅니다. 주석 처리로 되어 있다면, '플로팅'이라는 항목을 바로 찾아 주게 되어서 사용이 편리합니다.

 

 

---

 

<!-- 플로팅 모듈 시작 --> 에서 <!-- 플로팅 모듈 끝 --> 부분이 '플로팅 소스' 에 해당됩니다.

 

 

---

 

아래 table 항목이 보이실텐데, 위에 사이드바와 마찬가지로 넓이 등을 확인 하실 수가 있습니다. 이 소스를 활용해서 블로그 꾸미기를 하시려면, 빨간 네모박스 부분에 마우스 우클릭을 합니다.

 

 

---

 

마우스 우클릭시 'Copy as HTML' 항목을 선택합니다. 그러면 '플로팅' 에 해당되는 소스가 복사 되어집니다.

 

 

---

 

복사한 소스를 메모장 등에 붙여 넣기 하시면 되는데, 메모장이나 한글 문서보다 '에버노트' 프로그램에 하시면 좋습니다. 복사한 소스를 붙여 넣기 하시면, '플로팅' 에 해당되는 소스를 얻으실 수가 있습니다.

 

 

에버노트 다운로드 / 메모장의 최강자

 

여기서 한가지 주의 하실 점은 이 소스 그대로는 사용을 하실 수는 없다는 것입니다. 플로팅에 해당되는 이미지와 사용하고자 하는 블로그 주소가 다르기에 수정이 필요합니다.

 

 

---

 

구글 크롬 요소를 통해 소스를 살펴보니 주석처리가 되어 있어서 좀더 편하게 보실수 있는데, 안되어 있다면, 센스있게 구분을 하셔야 합니다. 'Metrics' 항목을 활용하시면 변경된 소스를 티스토리 관리자에서 적용해 보지 않고 미리 보기 형식처럼 바로 확인을 하실 수가 있는데, 설명을 같이 하자니 내용이 많은 것 같네요.  다음에 기회가 되면, 좀 더 보도록 하겠습니다.

 

'백문이 불여일견' 이라는 말이 있습니다. 구글 크롬 다운로드 하셔서 직접 해보시기를 바랍니다. IE 사용자도 F12 키를 활용해서 볼 수는 있는데, '크롬' 이 개인적으로 편리합니다.

 

두서 없이 작성한 것 같은데, 조금이나마 블로그 운영에 있어서 도움이 되셨으면 합니다. ^^