HTML 코드를 더 빨리 작성하는 방법

Sep 10, 2025

어떻게

(이미지 크레디트 : 미래)

현대 웹 사이트에는 많은 HTML 코드가 필요합니다. 여러 개의 다른보기와 상태가있는 복잡한 레이아웃은 단순한 텍스트 편집기로 만드는 것이 어려울 수 있습니다. 고맙게도, 거기에서 일할 HTML 생성 도구가 있습니다. 여기서 우리는 더 인기있는 도구, emmet 및 pug 중 두 가지를 빠르게 살펴 봅니다.

그러나 이러한 강력한 시간 절약 도구를 모두 사용할 수 있도록 HTML을 알아야합니다. 그래서, 당신이 잠수하기 전에 당신이 인기있는 의미 론적을 사용하는지 확인하십시오. HTML 태그 옳은 길. 또한 A.를 사용하는 가이드를 참조하십시오 HTML 보일 러 플레이트 ...에

코드를 척하고 싶습니까? 이것들을 시도하십시오 웹 사이트 빌더 ...에 또는 길을 따라 추가 도움을 받으려면 웹 호스팅 기술 지원 서비스.

Fly에서 HTML을 생성하십시오

한 번에 많은 양의 HTML을 작성할 때 각 태그를 손으로 쓰는 데 매우 지루해질 수 있습니다. 예를 들어, 링크 목록을 쓸 때, 우리는 & lt; uL & gt;, & lt; li & gt; 과 & lt; a & gt; 모든 태그를 열고 올바른 위치에 닫습니다. 그렇지 않으면 링크가 작동하지 않을 수 있으며 전체 페이지 레이아웃이 완전히 Haywire가됩니다.

emmet을 사용하는 방법

이 일이 일어나는 기회를 줄이는지 확인하려면 재능을 사용할 수 있습니다. 개미 ...에 이것은 당신에게 많은 입력을 할애 할 수있는 도구이며 HTML & amp를 크게 향상시킬 것입니다. CSS 워크 플로우. Emmet을 사용하면 CSS와 같은 선택기를 입력하여 요소를 만들 수 있습니다. 그런 다음이 요소를 구문 분석하고 확장 할 것입니다. 아래는 에메임에서 생성 된 원래 요소입니다.

nav>ul>li*3>a.chapter{Chapter $ of 3}

Emmet 은이 요소를 감지하고 구문 분석 한 다음 요소를 아래 그림과 같이 표준 HTML로 변환합니다. emmet 요소를 빠르게 보이는 것은 그것을 암시합니다 & lt; li & gt; ( *삼 )와 각 & lt; li & gt; 인스턴스는 챕터가 오는 다음 적절한 숫자 (최대 3 개)가 호출됩니다.

emmet 요소에 포함 된 문자 수와 표준 HTML이 포함 된 문자 수와 얼마나 많은 문자 수 있습니다. 이 작은 코드조차도 Emmet ShortHand를 사용하여 얼마나 많은 시간을 할 수 있는지 보여줍니다.

& lt; nav & gt; & lt; Ul & gt; & lt; & lt; a href = ""class = "챕터"& gt; 1 장 3 ℃의 & lt; / li & gt; & lt; a href = ""class = "챕터"& gt; 2 장 3 ℃의 & lt; / li & gt; & lt; a href = ""class = "챕터"& gt; 제 3 장 3 ℃의 & lt; / li & gt; & lt; / ul & gt; & lt; / nav & gt;

Emmet은 또한 맥락을 알고 있습니다. 예를 들어, 우리가 편집하는 경우 & lt; 표 & gt; 우리가 원할 것 같을 것 같습니다 & lt; tr & gt; (이들은 행 임) 요소를 채울 요소입니다. 우리가해야 할 일은 우리가 필요로하는 몇 가지를 지정하는 것입니다.

이것은 emmet이 할 수있는 것의 빠른 예일 뿐이지만, 이용 가능한 더 많은 구성 옵션이 있습니다. 여기에는 CSS 편집, BEM (블록 요소 수정 자) 클래스 생성이 포함되며 Lorem IPSum 생성기도 있습니다.

또한 대부분의 코드 편집자가 emmet이 내장되어 있거나 플러그인을 통해 지원하는 것을 주목할 가치가 있습니다. 당신은 이것에 대해 더 자세히 알 수 있습니다 emmet 문서 페이지.

동적 콘텐츠 용 PUG를 사용하십시오

Emmet은 정적 콘텐츠에 이상적이지만 콘텐츠가 더 역동적이어야하는 경우 어떻게됩니까? 예를 들어, 개인화 된 홈페이지, 복잡한 주문 테이블 또는 HTML의 공통 블록을 반복해야 할 수도 있습니다. 이 모든 것이 JavaScript에서 가능하지만이 콘텐츠를 사전 렌더링함으로써 사용자의 브라우저에 의존하지 않고 추가 된 속도 향상을 얻을 수 있습니다. 미디어 무거운 페이지가 있는지 기억하십시오. 신뢰할 수있는 것으로 그것을 백업하고 싶을 것입니다. 클라우드 스토리지 ...에

단계 앞으로 퍼그. 이것은 HTML 용 템플릿 도구입니다. 페이지를 ".pug"형식으로 쓸 수 있고 PUG는 해당 파일을 읽고 일부 동적 데이터를 주사하고 표준 HTML을 반환합니다. 아래의 예는 PUG에 코드를 작성하여 emmet 예제 (위)와 동일한 HTML을 작성하는 방법입니다.

 UL.
  각 VAL은 [1, 2, 3]
    리
      a (href = "", class = "챕터") 장
# {val} 3.

Pug 파일은 압입을 사용하여 중첩을 나타냅니다.하나의 패스에서 많은 양의 HTML을 생성하기 위해 값을 반복 할 수 있습니다.이러한 ".pug"파일은 프로젝트에서 여러 번 재사용되도록 설계되었습니다.

Pug는 패키지 관리자에서 설치할 수 있습니다 npm. ...에그러나 Pug를 시작하는 방법에 대한 더 많은 정보를 원한다면 웹 사이트 ...에

이 콘텐츠는 원래 웹 디자이너 매거진에 등장했습니다.

자세히보기 :

10 베스트 CSS 프레임 워크
CSS 애니메이션 재창조하는 예
8 HTML 태그를 사용해야합니다 (및 피하기 위해 5)

HTML 코드를 더 빨리 작성하는 방법

Fly에서 HTML을 생성하십시오

emmet을 사용하는 방법

동적 콘텐츠 용 PUG를 사용하십시오

어떻게 - 가장 인기있는 기사

WordPress 사이트 속도 향상 및 최적화 방법

WEBGL로 액체 효과를 만드는 방법

SASS에서 미디어 쿼리를 구조하는 방법

사용자 친화적 인 웹 양식 만들기위한 10 가지 규칙

iClone 7으로 차량 애니메이션 만들기

일러스트 레이터에서 완벽하게 기하학적 로고 디자인 만들기

센서 데이터를 수집하는 앱 만들기

정확한 뼈와 근육을 그립니다

카테고리