사이트의 모든 HTML 코드를 몇 초가 아니라 몇 분 안에 생성할 수 있습니까? Emmet을 사용하면 가능합니다! 이 새로운 접근 방식을 통해 HTML, XML 및 기타 구조화된 코드 형식의 코드를 빠르게 개발할 수 있습니다.
Emmet은 많은 인기 있는 텍스트 편집기용 플러그인입니다. Emmet을 사용하면 합리적이지만 매우 압축된 구문으로 페이지의 골격을 만든 다음 전체, 적절한 HTML 코드로 확장할 수 있습니다. 결과는 마술처럼 느껴집니다. 한 줄의 텍스트가 수백 줄의 구문으로 확장되고 몇 분 안에 정적 페이지 또는 전체 사이트 구조가 완성됩니다.
여기에서 Emmet을 사용하여 전체 정적 웹 페이지를 만드는 방법을 배우게 됩니다. 이 자습서에서는 Emmet에 대한 지원이 기본 제공되므로 Visual Studio Code가 사용됩니다. Sublime Text 및 Atom과 같은 다른 편집기에서 Emmet을 사용할 수 있지만 확장을 통해 지원을 추가해야 합니다.
사이트 파일 만들기
시작하려면 Visual Studio Code를 엽니다.
"파일 -> 새 파일"을 선택하여 새 문서를 만듭니다.
"파일 -> 다른 이름으로 저장"을 선택하여 파일을 저장하고 "html" 확장자를 지정합니다.
기본 구조
각 웹 페이지의 요소는 그룹 및 하위 그룹으로 구성됩니다. Emmet으로 코딩할 때 각 그룹에 더 많은 요소의 그룹이 될 수 있는 항목이 어떻게 포함되어 있는지 항상 염두에 두어야 합니다.
참고 :기본적으로 설명하겠지만 진행하기 전에 HTML 구문의 기본 사항에 익숙해지면 더 좋을 것입니다.
매우 기본적인 최상위 수준에서 대부분의 사이트에는 머리글, 핵심 콘텐츠의 주요 부분 및 바닥글이라는 세 가지 그룹/섹션이 있습니다. Emmet으로 생성하려면 다음을 입력하세요.
#header+#mainsite+#footer
각 단어 앞의 "#"은 각 그룹이 ID가 있는 div임을 의미합니다. 줄 끝에서 Enter 키를 눌러 Emmet이 작동하는 모습을 보고 이 작은 문구를 구조화된 HTML의 세 줄로 변환합니다.
헤더 구조
일반적인 사이트의 헤더에는 로고와 한두 개의 메뉴가 포함됩니다. 페이지에 추가하려면 이전 단계에서 확장된 HTML을 유지하고 Header Div에 직접 입력할 수 있습니다. 그런 다음 다음과 같이 입력할 수 있습니다.
#logo+#menu_top+#menu_main
Enter 키를 눌러 이 항목도 확장하면 사이트 로고에 대한 3개의 추가 div와 헤더 내부에 2개의 메뉴가 생깁니다.
Emmet에서 그룹화
Emmet을 사용하면 요소를 괄호 안에 넣어 그룹화할 수 있습니다. 이를 통해 페이지에 대한 복잡한 구조를 만들 수 있습니다. 따라서 지금까지의 모든 작업을 취소하고 기본 #header+#mainsite+footer만 유지합니다. 이전의 코드.
#header 교체 다음을 사용하여 코드에서:
(#header>.logo+.menu.top+.menu.main^)
Emmet에서는 >를 사용하여 레벨을 낮출 수 있습니다. 캐릭터는 ^를 사용하여 레벨을 올릴 수 있습니다. 캐릭터. 이를 통해 요소에 들어가서 다른 요소를 추가한 다음 다시 위로 이동할 수 있습니다.
결과는 다음과 같아야 합니다.
(#header>.logo+.menu.top+.menu.main^)+#mainsite+footer
위의 내용은 "ID가 #header인 Div(그룹)를 추가합니다. 그 안에 ".logo", ".menu.top" 및 ".menu.main" 클래스가 있는 세 개의 Div를 추가합니다. 그룹 외부에서 한 수준 위로 돌아가서 ID가 "#mainsite" 및 "#footer"인 Div를 두 개 더 추가합니다.
게시물 구조
일반적인 사이트의 기본 게시물에는 일반적으로 다음 요소가 포함됩니다.
- 제목
- 이미지
- 발췌(텍스트 단락으로)
또한 방문자가 실제 게시물을 읽을 수 있는 링크와 해당 카테고리, 태그 등에 대한 링크를 제공해야 합니다. 하지만 지금은 간단하게 하기 위해 이 세 가지 요소만 사용합니다.
이것은 우리가 추가할 코드입니다:
(.post>h3{Post Title $}+img+p{Post Excerpt})*5 이것은 Emmet에게 ".post 클래스로 Div를 생성합니다. 그 안에 H3 제목의 제목과 이미지, 발췌문을 넣습니다.
요소 뒤에 첨부된 "{TEXT}"로 내용을 정의합니다. 따라서 "{게시물 제목}"을 사용하면 각 H3 제목의 콘텐츠가 자리 표시자 텍스트 "게시물 제목"이 될 것임을 Emmet에게 알려줍니다. "게시물 제목"을 이름이나 원하는 문자열로 변경할 수 있으며 코드가 확장되면 게시물 제목의 내용으로 사용됩니다.
$ "게시물 제목" 옆에 괄호 밖에 있는 "5"와 함께 작동하는 숫자 변수가 있습니다. *5 괄호 뒤는 Emmet에게 괄호의 내용을 다섯 번 반복하도록 지시합니다. $ 각 게시물의 반복 번호로 대체됩니다. 이 숫자를 페이지에 원하는 게시물 수로 바꾸세요.
이것을 실제 코드에 추가하십시오. 다음과 같아야 합니다.
(#mainsite>(.post>h3{Post Title $}+img+p{Post Excerpt})*5) 
바닥글 구조
바닥글의 경우 ".design" 및 ".copyright" 클래스가 있는 두 개의 Div라는 두 그룹을 추가합니다.
코드는 다음과 같습니다.
(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name})) 
이렇게 하면 ".design" 클래스가 있는 div가 생성됩니다. 그 안에는 ".designerslink" 클래스가 있는 링크가 있습니다. 그 옆에 ".copyright" 클래스가 있는 두 번째 div가 추가되었습니다. 이 div 안에는 "Copyright 2020 My Name"이라는 내용의 일반 텍스트 단락이 있습니다.
결과는 다음과 같습니다.
(#footer>(.design>(a.designerslink))+(.copyright>(p{Copyright 2020 My Name}))) 이제 Enter 키를 누르기만 하면 사이트가 준비됩니다!
키를 한 번만 누르면 지금까지 본 모든 것과 이 극도로 압축된 문자 묶음이 전체 페이지에 대해 수십 줄의 적절한 HTML 구문으로 바뀝니다!
Ctrl 키를 눌러 변경 사항을 파일에 저장합니다. + S 또는 "파일 -> 저장"을 방문하십시오. 작업을 보려면 브라우저를 실행하세요. 그런 다음 "파일 -> 열기" 또는 외부 파일 관리자를 사용하여 HTML 파일을 찾아 브라우저에서 수동으로 엽니다.
마무리
Emmet을 사용하여 HTML 파일을 만드는 기본 사항을 배웠습니다. 물론 코드를 수정하거나 더 많은 항목으로 확장하기 위해 언제든지 코드로 돌아갈 수 있습니다.
에밋에 대해 이미 알고 계셨나요? 사이트를 만들 때 도움이 되는 다른 바로 가기를 사용하고 있습니까? 아래 댓글 섹션에 알려주세요.