Title:
웹 프론트엔드 개발
|
edited by
Youngrok Pak
at
10 years, 1 month ago.
<p>HTML / CSS / JavaScript 개발을 포괄해서 <a href="웹 프론트엔드 개발">웹 프론트엔드 개발</a>이라고 한다. 웹 퍼블리싱, 웹 코딩 등으로 불리기도 한다.</p>
<h2>패키지</h2>
<h3>패키지 관리</h3>
<p>CSS, JavaScript 패키지들을 쉽게 설치해주는 도구로 <a href="bower">bower</a>가 있다. 웹 개발의 필수 도구다.</p>
<h3>필수 라이브러리</h3>
<ul>
<li><a href="jQuery">jQuery</a></li>
<li><a href="Bootstrap">Bootstrap</a></li>
<li><a href="FontAwesome">FontAwesome</a></li>
</ul>
<h3>위지윅 에디터</h3>
<p>오픈소스로는 오랫동안 <a href="CKEditor">CKEditor</a>와 <a href="TinyMCE">TinyMCE</a>가 경쟁해왔고, 최근 몇 년간 <a href="CKEditor">CKEditor</a>가 앞서 나갔으나, 버전 4를 발표하면서 문서가 개판이 되었고, <a href="TinyMCE">TinyMCE</a>는 버전 4를 발표하면서 좀더 좋아졌다. 에디터와 엮어서 개발해야 할 것이 많다면 <a href="TinyMCE">TinyMCE</a> 추천.</p>
<p><a href="http://imperavi.com/redactor/">redactor</a>는 최근에 등장해서 높은 평가를 받고 있고, 제공하는 기능이 가장 안정적이라고 평가되지만 API가 다소 부족하고 문서도 부실하다. 국산으로 <a href="https://github.com/HackerWins/summernote">summernote</a>가 <a href="jQuery">jQuery</a>, <a href="Bootstrap">Bootstrap</a>, <a href="FontAwesome">FontAwesome</a>을 활용해서 개발되어 코드 양으로 효과적으로 줄여 미래가 촉망되지만, 아직은 문서가 부족하다. 위지윅 에디터들이 처음 나올 때는 <a href="jQuery">jQuery</a>도 <a href="Bootstrap">Bootstrap</a>도 없기도 했고, 라이브러리 의존성이 제약사항이 되기 때문에 그런 기능들을 전부 자체 개발해왔는데 앞으로는 summernote 같은 아키텍처가 더 유리할 것 같다.</p>
<h3>기타 유용한 라이브러리</h3>
<ul>
<li><a href="http://softwaremaniacs.org/soft/highlight/en/">highlightjs</a> 코드 문법강조</li>
<li><a href="http://codemirror.net/">CodeMirror</a> 소스코드 에디터</li>
<li><a href="https://github.com/desandro/isotope">isotope</a> 플립보드 스타일의 레이아웃. 관련 라이브러리 중 가장 강력하고 안정적이다.</li>
<li><a href="http://fancyapps.com/fancybox/">fancybox</a> 팝업 다이얼로그. 2.x부터 유료가 되었는데 여전히 1.x를 쓸 수 있지만 <a href="bower">bower</a>는 2.x를 설치해준다. 요즘은 <a href="Bootstrap">Bootstrap</a>의 modal에 밀리는 추세.</li>
</ul>
<h2>HTML / CSS</h2>
<p><a href="CSS%20설계 원칙" class="wiki" title="HTML / CSS 설계 원칙">CSS 설계 원칙</a> 같은 글을 있지만, 이제는 그냥 <a href="Bootstrap">Bootstrap</a>이 베스트 프랙티스다.</p>
<h2><a href="Responsive Design">Responsive Design</a></h2>
<h3>CSS 문제 해결</h3>
<p><a href="IE%20CSS Hack" class="wiki" title="IE CSS Hack">IE CSS Hack</a></p>
<p><a href="float%20엘리먼트의 컨테이너의 height가 0이 되는 문제" class="wiki" title="float 엘리먼트의 컨테이너의 height가 0이 되는 문제">float 엘리먼트의 컨테이너의 height가 0이 되는 문제</a></p>
<p><a href="IE6%20position:absolute" class="wiki" title="IE6 position:absolute bug">IE6 position:absolute</a> <a href="http://ecolemodev.wikigrove.com/HTML" class="wiki">bug</a></p>
<p><a href="파일%20업로드 버튼 CSS로 꾸미기" class="wiki" title="파일 업로드 버튼 CSS로 꾸미기">파일 업로드 버튼 CSS로 꾸미기</a></p>
<p><a href="IE6%20png 투명 문제" class="wiki" title="IE6 png 투명 문제">IE6 png 투명 문제</a></p>
<h2>개발 도구</h2>
<h3>IE 버전별 테스트</h3>
<p><a href="http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/">http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/</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 href="https://addons.mozilla.org/ko/firefox/addon/249" class="external" title="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