웹사이트 검색

온라인 도구를 사용하여 동적 HTML5 웹 앱을 아름답게 만드는 방법


이 시리즈의 마지막 기사를 시작하면서 HTML 5와 모바일 친화적/반응형 웹 개발의 중요성을 이해하셨기를 바랍니다.

어떤 데스크톱 배포판을 선택하든 Netbeans는 강력한 IDE이며 기본 Linux 명령줄 기술 및 3부에서 설명한 도구와 함께 사용하면 큰 어려움 없이 뛰어난 애플리케이션을 만드는 데 도움이 될 수 있습니다.

그러나 이 시리즈에서는 HTML 5 및 웹 개발의 기본 사항만 다루었고 귀하가 HTML에 어느 정도 익숙하다고 가정했지만 WWW에는 훌륭한 리소스가 가득합니다. 그 중 일부는 다음과 같습니다. FOSS – 여기서 공유한 내용을 확장합니다.

이 마지막 가이드에서는 이러한 도구 중 일부에 대해 설명하고 이를 사용하여 UI(사용자 인터페이스)를 아름답게 만드는 작업을 진행 중인 기존 페이지에 추가하는 방법을 보여 드리겠습니다.

웹사이트의 사용자 인터페이스를 아름답게 만들기

Font Awesome은 Bootstrap과 원활하게 통합될 수 있는 잠재력을 지닌 아이콘/글꼴/CSS 완전한 툴킷입니다. 페이지에 다른 많은 아이콘을 추가할 수 있을 뿐만 아니라 CSS를 사용하여 아이콘 크기 조정, 그림자 투사, 색상 변경 및 기타 다양한 옵션을 사용할 수 있습니다.

그러나 CSS를 다루는 것은 이 시리즈의 범위를 벗어나므로 기본 크기의 아이콘만 다루겠습니다. 동시에 "좀 더 자세히 살펴보세요". 이 도구를 사용하면 됩니다.

Font Awesome을 다운로드하여 프로젝트에 통합하려면 다음 명령을 실행하세요(또는 프로젝트의 Github로 직접 이동하여 브라우저를 통해 Fontawesome zip 파일을 다운로드하고 GUI 도구를 사용하여 압축을 풀어도 됩니다).

wget https://github.com/FortAwesome/Font-Awesome/releases/download/5.15.4/fontawesome-free-5.15.4-web.zip

(예, 도메인 이름은 실제로 R이 포함된 FortAwesome이므로 오타가 아닙니다.)

unzip fontawesome-free-5.15.4-web.zip
cp fontawesome-free-5.15.4-web/css/fontawesome.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
cp fontawesome-free-5.15.4-web/webfonts/* /home/ubuntu/NetBeansProjects/TecmintTest/public_html/fonts

그리고 이전에 jQueryBootstrap에서 했던 것처럼 .css 파일을 페이지 상단의 참조 목록에 추가합니다. 모든 내용을 입력할 필요는 없습니다. 프로젝트 탭에서 코드 창으로 파일을 드래그하기만 하면 됩니다.

예를 들어 탐색 표시줄의 드롭다운 목록을 살펴보겠습니다.

좋은데요, 그렇죠? 필요한 것은 index.php 하단에 있는 드롭다운 메뉴라는 기존 ul 클래스의 내용을 다음으로 바꾸는 것뿐입니다.

<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>

제 말을 믿으세요. 이러한 도구를 사용하는 방법을 배우는 데 시간을 투자하는 것은 매우 보람 있는 경험이 될 것입니다.

도움을 요청할 수 있는 곳

IT 담당자로서 귀하는 인터넷에서 제공하는 다양한 도움말 리소스에 대해 잘 알고 있어야 합니다. 웹 개발도 예외는 아니므로 애플리케이션을 조정하는 동안 유용할 것으로 확신하는 몇 가지 리소스는 다음과 같습니다.

자바스크립트 코드를 다룰 때(예를 들어 파트 2에서 했던 것처럼 jQuery로 작업할 때), 다음을 목표로 하는 온라인 자바스크립트 품질 코드 검사기인 JSHint를 사용하는 것이 좋습니다. 개발자가 오류와 잠재적인 문제를 감지하도록 돕습니다. 이러한 함정이 발견되면 JSHint는 해당 함정이 있는 줄 번호를 표시하고 문제를 해결하기 위한 힌트를 제공합니다.

확실히 멋져 보이지만 이 훌륭한 자동화 도구를 사용하더라도 다른 사람이 코드를 살펴보고 수정 방법이나 개선 방법을 알려줘야 할 때가 있습니다. 이는 어떻게든 코드를 공유해야 함을 의미합니다.

JSFiddle(온라인 Javascript/CSS/HTML 코드 테스터) 및 Bootply(JSFiddle과 동일하지만 Bootstrap 코드에 특화됨)를 사용하면 코드 조각을 저장할 수 있습니다. (바이올린이라고도 함)을 제공하고 인터넷(친구와의 이메일, 소셜 네트워크 프로필 사용 또는 포럼)을 통해 매우 쉽게 공유할 수 있는 링크를 제공합니다.

요약

이 기사에서는 웹 애플리케이션을 조정하기 위한 몇 가지 팁을 제공하고, 막히거나 다른 사람(한 사람이 아닌 여러 사람)이 살펴보고 싶을 때 유용할 수 있는 몇 가지 리소스를 공유했습니다. 코드를 개선할 수 있는 방법을 확인하세요.

다른 리소스에 대해서도 알고 있을 가능성이 있습니다. 그렇다면 아래 의견 양식을 사용하여 Tecmint 커뮤니티의 나머지 사람들과 자유롭게 공유하십시오. 그런데 제시된 콘텐츠에 대해 질문이 있으면 주저하지 말고 알려주십시오. 이 기사에서.

이 시리즈를 통해 모바일 친화적이고 반응성이 뛰어난 웹 개발의 광대한 가능성을 엿볼 수 있었기를 바랍니다.