가젯 위젯 (Gadget Widget ), 섹션 (Section) 고유 아이디 (ID) 이름을 쉽게 찾는 방법

블로그는 여러개의 섹션으로 나뉘어 있고, 가젯도 여러개 들어 가게 된다.
특정한 섹션이나 가젯을 CSS 코드로 꾸미거나 제어하려면, 해당 섹션이나 가젯의 고유식별자인 아이디 (ID)를 통해서 하게 된다. 꾸미고자 하는 가젯의 아이디 (ID)를 찾는 방법은 아래와 같이 두 가지로 할 수 있겠다.


1. 템플릿 HTML 편집창에서 바로가기 (Jump to Widget) 기능을 사용

사용되는 가젯의 수가 한 두 개일 때는 아래 그림과 같이 템플릿 HTML 편집창에서 바로가기 (Jump to Widget) 기능을 사용하면 쉽다. 가젯이 여러개 일 때는 아래의 두 번째 방법이 더 편하다.

=> 블로그 대시보드 > 템플릿 > HTML 편집 > Jump to Widget을 선택하여 나열된 가젯 목록에서 ID를 찾고자 하는 가젯을 선택한다. 그러면, 해당 가젯 코드 위치로 이동되어 노랑색 형광펜으로 표시된다.
=> 가젯의 아이디(ID)를 보는 방법은 아래 두 번째 방법을 참조 하면 되겠다.



2. 가젯에 이름을 주어 찾는 방법

사용되는 가젯의 수가 많을 때는 위와 같은 방법으로는 제대로 찾기가 어렵다. 이럴 때는, 아이디를 찾고자 하는 가젯에 이름을 준 다음, 템플릿 HTML 편집창에서 검색하면 쉽게 찾을 수 있다.

1) 가젯에 이름 주기
=> 대시보드 > 레이아웃 > 아이디를 찾고자 하는 가젯의 [편집/Edit] 링크를 눌러 가젯 창을 연다
=> 가젯의 이름(Title)을 적어 준다. 이름은 검색을 하기 위한 것이므로 아무 것이나 간단하게 적으면 된다. 아래 그림의 예에서는 "검색기"라고 이름을 붙였다
=> 가젯을 저장(Save)한다.


2) 가젯 아이디 (ID) 찾기
=> 대시보드에서 레이아웃 바로 아래의 템플릿 > HTML 편집을 눌러 편집창을 연다
=> HTML 코드가 있는 영역의 아무곳에나 마우스를 한 번 클릭하여 편집창을 활성화 한다. 그렇게 하는 이유는 단순히 편집창 검색기를 사용하기 위해서이다.

=> 키보드의 [컨트롤 (Ctrl) + F ]키를 쳐서 편집창 검색박스를 열고 > 찾고자 하는 가젯의 이름을 입력한 뒤에 > [엔터]키를 치면, 해당 가젯의 코드로 이동된다
=> 아래 그림에서, 맨 아래쪽에 주황색 네모로 표시한 곳을 보면, 가젯의 이름인 "검색기"에 노랑 형광색 표시가 되어 있고, 그 앞쪽에 Widget id=' HTML2 '라고 적혀 있다. 곧, 찾고자 하는 '검색기' 가젯의 아이디(ID)는 HTML2 이다.


위와 같이 찾은 가젯 아이디는 해당 가젯을 CSS코드로 꾸미거나 제어할 때 사용하게 된다.
예컨데, 위의 검색기 가젯 (아이디 = HTML2)의 여백을 조절하려 한다면,
#HTML2 { margin: 10px; }
등과 같이 쓰게 된다.


도움이 되기를 바랍니다.