Title:
웹 프론트엔드 개발
|
edited by
Youngrok Pak
at
9 years, 6 months ago.
<p>HTML / CSS / JavaScript 개발을 포괄해서 <a href="웹 프론트엔드 개발">웹 프론트엔드 개발</a>이라고 한다. 웹 퍼블리싱, 웹 코딩 등으로 불리기도 한다.</p>
<h2>패키지 관리</h2>
<p>CSS, JavaScript 패키지들을 쉽게 설치해주는 도구로 <a href="bower">bower</a>가 있다. 웹 개발의 필수 도구다.</p>
<h3>HTML / CSS 베스트 프랙티스</h3>
<p><a class="wiki" title="HTML / CSS 설계 원칙" href="CSS%20설계 원칙">CSS 설계 원칙</a></p>
<h3>CSS 문제 해결</h3>
<p><a class="wiki" title="IE CSS Hack" href="IE%20CSS Hack">IE CSS Hack</a></p>
<p><a class="wiki" title="float 엘리먼트의 컨테이너의 height가 0이 되는 문제" href="float%20엘리먼트의 컨테이너의 height가 0이 되는 문제">float 엘리먼트의 컨테이너의 height가 0이 되는 문제</a></p>
<p><a class="wiki" title="IE6 position:absolute bug" href="IE6%20position:absolute">IE6 position:absolute</a> <a class="wiki" href="http://ecolemodev.wikigrove.com/HTML">bug</a></p>
<p><a class="wiki" title="파일 업로드 버튼 CSS로 꾸미기" href="파일%20업로드 버튼 CSS로 꾸미기">파일 업로드 버튼 CSS로 꾸미기</a></p>
<p><a class="wiki" title="IE6 png 투명 문제" href="IE6%20png 투명 문제">IE6 png 투명 문제</a></p>
<h3>도구</h3>
<ul>
<li>1 pixel을 위한 도구 : <a href="http://pitaschio.ara3.net/download.htm">http://pitaschio.ara3.net/download.htm</a></li>
<li>bootstrap 버튼 생성기 <a href="http://charliepark.org/bootstrap_buttons/">http://charliepark.org/bootstrap_buttons/</a></li>
<li>Firebug</li>
<li>IE8</li>
<li>Debugbar</li>
<li>IETester</li>
<li>
<p>Firefox + Html Validator [<a class="external" title="https://addons.mozilla.org/ko/firefox/addon/249" href="https://addons.mozilla.org/ko/firefox/addon/249">홈페이지</a>]</p>
<ul>
<li>W3C 에서 제공하는 도구는 찾아가서 웹 페이지를 테스트 하는데 불편하다.</li>
<li>Firefox 에 Html Validator 를 설치하면 별도의 Validation Check 를 하지 않아도 항상 실시간으로 브라우저 우측 하단의 상태 표시줄에 Validation 검증 결과가 표시된다.</li>
<li>W3C의 검사결과에 준하는 검증결과를 위해서 Html Validator 의 옵션에서 알고리즘을 SGML Parser 로 선택해야 한다.<br> SGML Parser는 W3C에서 제공하는 검사결과와 거의 동일한 결과를 출력한다.</li>
</ul>
</li>
<li><a href="http://www.cleancss.com/">http://www.cleancss.com</a> : css 정리, 문법 검사</li>
<li>
<p>HTML 코드 정리하기</p>
<ul>
<li>TIDY 가 가장 유명한데 설정하는 법을 좀 파봐야 할듯. 지금은 " 다음에 줄바꿈을 해버리고 블럭 사이에 빈줄 들어가는등 사용할만큼 되지 못함.</li>
<li>내가 사용하는 방식은 IE 개발자 도구 에서 OuterHtml 복사 > Dreamweaver 에서 소스 코드 포맷팅 실행 > 이클립스에서 두개의 공백을 탭으로 전환<br> 이렇게 하면 거의 내가 원하는 형태가 만들어진다.</li>
</ul>
</li>
<li>
<p>HTML 에디터</p>
<ul>
<li>
<p>JetBrains RubyMine, IntelliJ IDEA</p>
<ul>
<li>HTML 편집 기능에서 드림위버에 거의 근접하면서 다른 기능들이 잘 붙어 있고 이클립스보다 월등히 빠르다.</li>
</ul>
</li>
<li>JetBrains WEB IDE : RubyMine HTML/CSS가 좋다고 피드백을 보냈더니 그 목적이라면 WEB IDE를 추천한다면서 http://www.jetbrains.net/confluence/display/WI/Web+IDE+EAP를 보내줌.</li>
<li>
<p>Dreamweaver</p>
<ul>
<li>HTML 편집만 놓고 보면 가장 빠르고 편리하다.</li>
<li>일반적인 텍스트 편집 기능, 프로젝트 관리 기능, 버전 관리 통합 등이 만족스럽지 않다.</li>
</ul>
</li>
<li>
<p>Eclipse Web Tools</p>
<ul>
<li>공짜 중에는 그나마 쓸만한</li>
<li>이클립스가 너무 느리다.</li>
</ul>
</li>
<li>
<p>Aptana</p>
<ul>
<li>Web Tools보다 HTML 편집 기능은 약간 나은데 수많은 단점이 있다. 비추</li>
</ul>
</li>
</ul>
</li>
<li>
<p>CSS 3 도구</p>
<ul>
<li><a href="http://gradients.glrzad.com/">http://gradients.glrzad.com/</a> CSS 3 그라데이션</li>
<li><a href="http://lea.verou.me/css3patterns/">http://lea.verou.me/css3patterns/</a> CSS 배경 패턴 갤러리</li>
</ul>
</li>
</ul>
WikiNamu