<div id="toc" style="background-color: rgb(255, 255, 250); border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: rgb(210, 180, 140); border-right-color: rgb(210, 180, 140); border-bottom-color: rgb(210, 180, 140); border-left-color: rgb(210, 180, 140); padding-top: 2px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px;"><span class="Apple-style-span" style="font-weight: bold;">목차</span>
<hr />
<ol>
<li><a href="#toc_0" class="external" title="toc_0">Firefox + Firebug 사용하기</a></li>
<li><a href="#toc_1" class="external" title="toc_1">Internet Explorer + IE Developer Toolbar 사용하기</a></li>
<li><a href="#toc_2" class="external" title="toc_2">기타 브라우징 도구에서 개발자용 디버깅 도구 사용하기</a></li>
<li><a href="#toc_3" class="external" title="toc_3">XE의 Optimizer 옵션 끄기</a></li>
<li><a href="#toc_4" class="external" title="toc_4">CSS 디버깅</a></li>
</ol>
</div>
<p> </p>
<p>개발자용 디버깅 도구를 사용하면 웹사이트의 인터페이스 구축하거나 관련 문제를 해결하는데 많은 도움을 받을 수 있습니다. 개발자용 도구로 다음과 같은 일을 할 수 있습니다.</p>
<p> </p>
<ul>
<li>화면에 보이는 객체의 HTML 요소에 부여된 id, class 이름을 직관적으로 확인할 수 있습니다. 사용자는 객체의 id, class 이름을 이용하여 사용자 정의 CSS를 작성할 수 있습니다.</li>
<li>화면에 보이는 객체를 선택하고 선택한 객체의 HTML 요소와 적용된 CSS 코드를 직관적으로 확인할 수 있기 때문에 인터페이스 오류의 원인을 쉽게 파악하고 바로잡을 수 있습니다.</li>
</ul>
<p> </p>
<h3>Firefox + Firebug 사용하기<span class="Apple-style-span" style="vertical-align: super;"><a href="#toc_0" class="anchor" title="toc_0" id="toc_0" >#</a></span></h3>
<p>오픈소스 브라우저인 <a href="http://www.mozilla.or.kr/ko/" class="external" title="http://www.mozilla.or.kr/ko/">Firefox</a> 브라우저에 <a href="https://addons.mozilla.org/ko/firefox/addon/1843" class="external" title="https://addons.mozilla.org/ko/firefox/addon/1843">Firebug</a>라는 부가 기능을 설치하고 실행한 모습 입니다. 단축키 <span class="Apple-style-span" style="font-weight: bold;">F12</span>를 누르면 Firebug를 사용할 수 있습니다. 화면 하단 좌측은 선택된 객체의 HTML 구조를 보여주고 화면 하단 우측은 선택된 객체에 적용된 CSS 속성들을 보여줍니다.</p>
<p><img title="39(1).gif" class="attachment" src="./files/attach/images/18093223/967/180/018/1262524_39(1).gif" alt="39(1).gif" /></p>
<p> </p>
<h3>Internet Explorer + IE Developer Toolbar 사용하기<span class="Apple-style-span" style="vertical-align: super;"><a href="#toc_1" class="anchor" title="toc_1" id="toc_1" >#</a></span></h3>
<p><a href="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx" class="external" title="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx">Internet Explorer</a> 6~7 버전 사용자는 <a href="http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en" class="external" title="http://www.microsoft.com/downloadS/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en">IE Developer Toolbar</a>를 사용할 수 있으며 <a href="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx" class="external" title="http://www.microsoft.com/windows/products/winfamily/ie/default.mspx">Internet Explorer</a> 8 사용자는 개발자 도구가 기본으로 탑재되어 있으므로 IE Developer Toolbar를 별도로 설치할 필요가 없습니다. 예제화면은 Internet Explorer 8 브라우저에 내장된 개발자 도구를 실행한 모습입니다. 단축키 <span class="Apple-style-s
pan" style="font-weight: bold;">F12</span>를 누르면 개발자 도구를 사용할 수 있습니다. 화면 하단 좌측은 선택된 객체의 HTML 구조를 보여주고 화면 하단 우측은 선택된 객체에 적용된 CSS 속성들을 보여줍니다.</p>
<p><img title="40.gif" class="attachment" src="./files/attach/images/18093223/967/180/018/1262518_40.gif" alt="40.gif" /></p>
<p> </p>
<h3>기타 브라우징 도구에서 개발자용 디버깅 도구 사용하기<span class="Apple-style-span" style="vertical-align: super;"><a href="#toc_2" class="anchor" title="toc_2" id="toc_2" >#</a></span></h3>
<ul class="noindent">
<li>Opera 9 : <a href="http://www.opera.com/products/dragonfly/">Dragonfly</a></li>
<li>Safari 3 : '편집 > 기본 설정 > 고급 > 메뉴 막대에서 개발자용 메뉴 보기'에 체크하면 메뉴가 활성화 됨</li>
<li>Chrome 1 : 현재 페이지 관리 > 개발자 정보 > 자바스크립트콘솔(Ctrl+Shift+J) 또는 콘텍스트 메뉴에서 '요소검사'</li>
</ul>
<p> </p>
<h3>XE의 Optimizer 옵션 끄기<span class="Apple-style-span" style="vertical-align: super;"><a href="#toc_3" class="anchor" title="toc_3" id="toc_3" >#</a></span></h3>
<p>XE는 여러개로 잘게 쪼개진 CSS, Javascript 파일들의 전송 지연을 효과적으로 줄이기 위하여 Optimizer라는 기능을 제공하고 있습니다. Optimizer는 여러개로 잘게 쪼개진 CSS, Javascript 파일을 하나의 파일로 통합하거나 압축 전송하기 때문에 웹페이지의 로딩속도를 더욱 빠르게 만들어 줍니다. 그러나 웹페이지의 오류를 디버깅 해야 할 때 이 옵션이 켜져 있으면 불편합니다. Optimizer가 분리된 파일을 하나로 통합하기 때문에 어느 파일에서 오류를 유발하는지 찾아내기 어렵습니다. 따라서 웹사이트를 디버깅 하는 도중에는 이 옵션을 끄는것이 보다 효율적인 디버깅을 가능하게 합니다.</p>
<p> </p>
<p>XE의 Optimizer를 사용하지 않으려면 'Settings > Optimizer 사용 > 체크 해제' 합니다.</p>
<p> </p>
<p><img title="41.gif" class="attachment" src="./files/attach/images/18093223/967/180/018/1262612_41.gif" alt="41.gif" /></p>
<p> </p>
<h3>CSS 디버깅<span class="Apple-style-span" style="vertical-align: super;"><a href="#toc_4" class="anchor" title="toc_4" id="toc_4" >#</a></span></h3>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 2em;"><span class="Apple-style-span" style="line-height: 18px;">CSS 코드가 기대한 결과대로 출력되지 않는다면 코드가 '<span class="Apple-style-span" style="font-weight: bold;">저장</span>'되지 않았거나 CSS의 적용 '<span class="Apple-style-span" style="font-weight: bold;">우선순위</span>'가 다른 CSS 코드보다 낮기 때문입니다. CSS의 우선순위를 높이려면 <span class="Apple-style-span" style="font-weight: bold;">!important</span> 명령을 적용할 수 있습니다.</span></p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 2em;"> </p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 2em;">예를 들면 다음 코드에서 <span class="Apple-style-span" style="font-weight: bold;">margin:0 auto</span> 속성이 의도한 대로 적용되지 않았을 때</p>
<ol class="code" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 38px; line-height: 1.8em; font-family: courier, monospace; background-image: ; background-color: rgb(239, 239, 239); background-position: 8px 7px;">
<li style="line-height: 2em;">.widgetMenuC ul{ width:960px; margin:0 auto;}</li>
</ol>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 2em;"> </p>
<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; line-height: 2em;">다음과 같은 방법으로 우선순위를 높여줄 수 있습니다.</p>
<ol class="code" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 38px; line-height: 1.8em; font-family: courier, monospace; background-image: ; background-color: rgb(239, 239, 239); background-position: 8px 7px;">
<li style="line-height: 2em;">.widgetMenuC ul{ width:960px; margin:0 auto <span class="Apple-style-span" style="font-weight: bold;"><span class="Apple-style-span" style="color: rgb(255, 1, 3);">!important</span></span>;}</li>
</ol>
<p> </p>
<p>CSS 문법 지식이 더 필요한 경우 <a href="http://www.w3schools.com/css/css_reference.asp" title="http://www.w3schools.com/css/css_reference.asp" class="external">CSS Reference[1]</a> 또는 <a href="http://hooney.net/docs/Css/DocumentsIndex" title="http://hooney.net/docs/Css/DocumentsIndex" class="external" style="color: rgb(86, 137, 66) !important; line-height: 2em; text-decoration: underline; cursor: pointer !important;">CSS Refernece[2]</a>를 참조하세요.</p>
<p> </p>