태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

IE8 개발자도구로 티스토리 스킨 미리 수정하기



 

파이어폭스에는 파이어버그(firebug)라는 부가기능(Addon)이 있어 웹페이지를 손쉽게 가수정, 미리 확인해볼수 있습니다.
그렇다면 IE에서는 어떠한 도구가 파이어버그와 동일한 기능을 할까요?
IE에서는 예전 IE6때부터 Internet Explorer Developer Toolbar(이하 IE Dev. Toolbar)를 MS자체에서 제공하고 있었습니다.
하지만, 이 IE Dev. Toolbar는 별도로 설치해야되는 툴바 프로그램이었고, 언어라 영어라 일반 사용자들이 접근하기에는 다소 어려움이 따랐습니다.
하지만, MS에서 IE8을 출시하면서 이 툴바를 "Internet Explorer 개발자 도구"(이하 IE8 개발자도구)로 프로그램 안에 포함시켜 접근성 향상과 동시에 자국어화를 통해 한글로 바뀌어 웹 개발자 및 일반 사용자들이 손쉽게 사용할수 있게 바뀌었습니다.

이번 게시글에서는 이 IE8 개발자도구를 통해 티스토리 스킨을 미리 가수정을 해보는 작업을 해보도록 하겠습니다.



지금 이 글을 읽고계시는 독자분께서 Internet Explorer 8을 사용하고 계시다면 F12키를 눌러보시기 바랍니다.

다음과 같은 창이 나타나는데, 이 창이 IE8 개발자도구 입니다.
간략히 프로그램 내부구성을 설명드리자면, (다음 이미지로 넘겨주세요.)

이곳을 클릭하면 내용이 펼쳐집니다.


계속해서 이번 강좌에서 하게될 IE8 개발자도구의 수정원리는 기존의 파이어버그와 똑같습니다.
자세한 내용을 확인하시려면 http://cdmanii.com/992의 "Firebug 의 원리는?"을 참고하여 주시길 바랍니다. 해당 내용에서 프로그램이 파이어버그가 아닌 IE8 개발자도구로 바뀌었다고 생각하시면 됩니다.
(시간 여건이 되지못해 작성을 못한점.. 내용 읽으실때 편의를 드리지 못한점 양해바랍니다.)



지금부터 티스토리 블로그의 수정을 위해 준비작업을 해보도록 하겠습니다.
(저희는 이제 사냥을 하러 무기를 준비하는겁니다.. 엥? ^^;;;)
일단 상단에서 말했듯이 [F12]키를 누르면 프로그램이 실행되는것 아시죠?
만약에 실행이 안되신다면 우선 IE버전을 확인해 주시고(IE8 이상에서 프로그램 탑재),
IE8이라면 우측 상단에 도구 → 개발자 도구를 실행하셔도 똑같은 화면이 켜집니다.

정리하자면, [F12] → 우측상단 고정아이콘(Ctrl+P 또는
고정
)→ 툴바형태 화면 확인입니다.
위 3단계로 티스토리 스킨 수정작업을 하기위한 준비는 끝났습니다.

아, 한가지 잊어버렸네요. 다시 원상태로 복귀하려면 고정 해제 (Ctrl+P 또는
고정 해제
)를 하시면 됩니다.



본 파트 진행을 위해 장소를 옮겨 FunFunMania 개발블로그로 옮겨 계속 진행을 하도록 하겠습니다.
CSS값을 임의로 수정, 오른쪽으로 삐져나간 댓글 입력란
임의로 댓글을 다는 부분의 CSS값을 다르게 넣어 댓글 입력하는 부분의 오른쪽이 삐져나갔음을 확인할 수 있습니다. 이걸 한번 수정해보도록 하겠습니다.

진행방법1
1. IE8 개발자도구 HTML-좌측화면 상단의 클릭으로 요소 선택버튼을 클릭합니다.
2. 수정하고자 하는 부분을 클릭합니다.
3. 이렇게 하면 하단 좌측화면에 해당 요소의 HTML이 보이며 우측화면에는 그 요소에 상속된 CSS 스타일이 보이게 됩니다.

이제 해당 요소를 찾아보도록 하겠습니다.

댓글은 <textarea>안에 있는데, 이에 상속된 CSS에서 width값이 너무 커서 오른쪽이 넓어져 있습니다.
IE8의 개발자도구로 width값을 확인해보니 600픽셀의 값을 가지고 있습니다. 너무 크게 값을 잡아놨네요. 숫자부분을 클릭하여 수정을 하시면 됩니다.
파이어버그 같은경우에는 키보드의 화살표키를 이용해서 조정이 가능하지만, IE8 개발자도구의 경우에는 화살표로 조정이 되지 않습니다. 이점이 약간 아쉽습니다.

숫자를 입력하고 엔터키를 누르면 그때그때 바뀌는 모습을 보실수 있습니다.
딱 540픽셀이 적절한것으로 보입니다.
이제 이를 바탕으로 실제 블로그에 수정을 하시면 됩니다.
단, 무작정 수정하시면 블로그 표시에 문제가 있을수 있으니,
절대경로와 상대경로 그리고 치환자를 고려하시여 수정을 하시길 바랍니다.
자세한 내용은 http://cdmanii.com/992의 "Firebug 마무리"를 참고하여 주시길 바랍니다.



오랜만에 제대로된 글로 다시 찾아왔습니다.
글을 다 쓰는데 꼬박 한달이 걸렸습니다. (2009/11/02 05:08 ~ 2009/12/13 17:04)
그동안 일을 하면서 글을 쓰자니 몸이 많이 힘들고, 여유가 없어서 글을 다 쓰는데 오랜 시간이 걸렸습니다.

그리고, 글을 쓰면서 글 본문에서도 링크로 여러번 언급되었지만,
cdmanii님의 글을 상당부분 참고하여 비슷한 부분이 꽤 많습니다.
이 부분에 대해서는 cdmanii님과 온라인상으로 사전에 양해와 허락을 얻었으니, 논란의 소지는 없었으면 합니다. (2009/12/13 09:14에 최종적으로 허락을 얻었습니다.)

그리고, 비슷하기는 하지만 나름 정성을 들여 쓴글이고, 오랜만에 올리는 글이니 좋은 댓글과 트랙백 기다리고 있겠습니다.

긴 장문의 글 읽어주셔서 감사합니다.
신고
  1. BlogIcon 씨디맨
    2009.12.14 18:04 신고 Delete Reply Permalink

    IE 에서 오류나는거 잡을때는 이게 꼭 필요한듯해요. 근데 정말 본문에도 말하셨지만 화살표로 속성값 크기 조절안되는 건 좀 아쉽네요. 이부분도 되면 정말 실시간으로 조절될텐데요. ㅋ

    1. Re: BlogIcon (구.J군™) Jason.A
      2009.12.16 21:47 신고 Delete Permalink

      IE가 웹표준을 어겨가면서까지 독보적인 방향으로 나가다 보니, 아무래도 어쩔 수없이 필요해지긴 합니다. (저는 그 부분까지는 생각을 못했는데, cdmanii님의 댓글을 읽고나니 생각이 나네요. ^^;;)

      IE 다음 버전에선, 좀 더 웹표준에 가까워지면서 화살표로 속성값 크기를 조절할 수 있는 등의 사소한 기능들도 업데이트되었으면 하는 바람이 있네요.

      cdmanii님 댓글 감사합니다.

  2. 명이
    2010.06.15 12:42 신고 Delete Reply Permalink

    안녕하세요 잘보고 갑니다~~

    1. Re: BlogIcon (구.J군™) Jason.A
      2010.06.27 00:40 신고 Delete Permalink

      읽어주셔서 감사합니다. ^^

멋진 선플 하나가 글쓴이에게 큰힘이 됩니다.
« 이전 : 1 : ··· : 7 : 8 : 9 : 10 : 11 : 12 : 13 : 14 : 15 : ··· : 74 : 다음 »