IE전용, IE Developer Toolbar (표준코딩, 사이트구조분석 도움 툴)

IE Developer Toolbar 를 소개합니다.

마이크로소프트사의 Internet Explorer(이하 IE) 에서 작동하는 S/W 입니다. 공식적으로 마소에서 배포하는 S/W 이구요.

국내 높은 IE점유율로 IE에서만 잘 보이면 장땡이던 시절이 있었습니다. 그때는 지금과 같이 전문 HTML, XHTML, CSS 코더가 따로 있지 않고 디자이너나, 프로그래머가 병행해서 처리했었죠. 그 만큼 중요하게 생각하지 않았던 부분입니다.

지금은 많이 나아졌지만 국내 웹사이트는 비정상적으로 제작되곤 했죠. 해외에는 뜨지도 않는 그래픽요소가 너무 가득하고, 필요한 정보를 전달하기 위한 사이트구조라기 보단, Look&Feel, 보기 좋은 것에 더 신경을 썼습니다. 물론 디자인이란 것이 보기 좋아야 하지만 웹이란 특성상 디자인은 사용자 UI를 위한 디자인이어야 하는데 디자인을 위한 디자인이었다고 할 수 있죠.

IE Developer Toolbar 는 모든 브라우저를 지원하진 않지만 최근 IE도 W3C 웹표준을 준수한 브라우징을 지원하기에 표준을 적용한 사이트 개발에 많은 도움이 될 것 같습니다.

설치 방법과 사용법은 쉽습니다.

1. 프로그램 다운로드

마이크로소프트사 에서 직접 다운 받을 실 수 있어요. --> http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

여기서 바로 다운 받으시려면 -->

IEDevToolBarSetup.msi

2. 다운받은 파일을 설치합니다.

3. 간단한 설정 (IE 7 기준)

설치 후 브라우저 상단 메뉴에서 간단한 셋팅을 합니다.
'도구 > 추가 기능 관리 > 추가 기능 사용 또는 사용 안 함' 선택

메뉴 선택

IE Developer Toolbar, IE Developer Toolbar BHO 항목을 '사용' 으로 설정합니다.

추가 기능 관리

'확인' 버튼을 누른 후 브라우저를 모두 끄고 새로 띄우세요.

이제 프로그램을 활성화하겠습니다. 브라우저의 제일 오른쪽 '>>' 버튼을 클릭 후 프로그램을 활성화 하세요.

Toolbar 활성화

활성화 하면 브라우저 하단에 툴바가 나타납니다.

브라우저 하단 툴바 구동

여기 까지가 설치 및 프로그램 시작 입니다.

이제 몇가지 주요 기능을 소개하겠습니다.

4. 사용하기

<영역별 기능>

IE Developer Toolbar

• A 영역 : 메뉴 영역
• B 영역 : 태그 구조도 (선택 사이트의 태그 구조가 트리형태로 디스플래이 됩니다. 태그의 위치를 쉽게 찾을 수 있습니다.)
• C 영역 : 선택 태그의 속성 표시 (선택한 태그에 사용된 속성이 표시됩니다.)
• D 영역 : 선택 태그에 적용된 CSS 표시

만약 <div class="sample" style="width:500px;"> 란 태그가 있다면
B영역엔 - style 500px 라고 나오고
C영역엔 - css에서 sample로 정의된 스타일이 표시됩니다.


<메뉴 기능>

• File
• Undo All - 조작된 상태를 초기화 해 줍니다.
• Find : 원하는 태그를 찾습니다.
• Select Element by Click - 브라우저에서 사이트를 특정 요소(이미지, 택스트 등..)를 클릭하면 해당 위치와 속성을 보여줍니다.
• Disable : 사이트에 적용된 기능을 미적용 상태로 보여줍니다. Script, Popup, CSS 세가지를 미적용 상태로 확인 할 수 있습니다.
• View : 하위 메뉴에 있는 요소를 시각적으로 보여줍니다.

View 메뉴의 Link Paths 선택시

• Outline : 하위 메뉴에서 선택한 요소를 외곽선를 그려줍니다.

Outline 메뉴의 DIV Elements 선택시

• Images : 이미지에 대한 정보를 브라우저에 표시해 줍니다.
• Cache : 각종 캐쉬관련 정보를 지우거나, 비활성화 시켜줍니다.
• Tools : 브라우저 사이즈를 일정한 포멧으로 조정할 수 있습니다. 또 칼라 피커와 같은 툴을 제공합니다.
• Validate : 코드를 검사할 수 있는 페이지로 연결해 줍니다. HTML, CSS 의 문법, 유효성등을 체크할 수 있습니다.

여기까지네요. ^.^