Emmet 1부 - 기초

Emmet은 HTML 및 CSS를 빠르게 작성하는 데 도움이 되는 많은 인기 있는 코드 편집기용 무료 플러그인입니다! Emmet은 Sublime Text, Atom, Visual Studio Code 등 많은 편집기를 지원합니다. VS Code는 Emmet이 사전 설치된 상태로 제공됩니다.

Emmet 약어를 입력하기 시작하면 제안 목록에 약어가 표시됩니다.



이 게시물에서는 다음 주제를 다룹니다.
📌 태그
📌 형제자매
📌 어린이
📌 클래스
📌 아이디
📌 아이디 & 클래스
📌 내용
📌곱하기⠀⠀⠀⠀⠀⠀

2부가 곧 공개됩니다!

태그

기본 약어를 사용하여 HTML 태그를 빠르게 만들 수 있습니다.

사업부

<div></div>

피

<p></p>

h1

<h1></h1>

형제

HTML 태그 집합을 형제로 만들려면 각 약어 사이에 +를 사용하십시오.

hdr+분파+ftr

<header></header>
<section></section>
<footer></footer>

어린이들

자식 요소는 각 약어 사이에 >를 사용하여 만들 수 있습니다.

종파>울>리

<section>
    <ul>
        <li></li>
    </ul>
</section>

수업

클래스가 있는 요소를 만들려면 .를 사용하여 클래스를 약어에 추가하기만 하면 됩니다.

h1.센터

<h1 class="center"></h1>

ID

요소에 Id를 추가하려면 #를 사용하여 Id를 약어에 추가합니다.

h1#헤더

<h1 id="header"></h1>

아이디 & 클래스

요소 약어에 여러 속성을 포함할 수 있습니다.

h1#헤더.센터

<h1 id="header" class="center"></h1>

콘텐츠

{ }로 콘텐츠를 래핑하여 요소의 텍스트 콘텐츠를 포함할 수 있습니다.

p{이것은 단락입니다.}

<p>This is a paragraph.</p>

곱하다

*를 사용하여 여러 요소를 곱하여 여러 요소를 만들 수 있습니다.

ul>li*4

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

파트 2가 곧 공개됩니다! 제 유튜브 채널에서 전체 영상을 확인하세요.

읽어 주셔서 감사합니다!

안녕하세요! | |