Zen Coding으로 알려진 Emmet은 HTML 또는 CSS를 코딩하는 동안 생산성을 향상시켜야하는 가장 좋은 도구 중 하나입니다. 코드 완성과 마찬가지로 작동하지만 더 강력하고 놀랍습니다. HTML / CSS를 간단한 양식에서 복잡한 양식으로 자동화 할 수 있습니다.
Emmet는 Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm 등과 같은 텍스트 편집기 또는 IDE (통합 개발 환경)를 지원합니다. 또한 JSFiddle, JSBin, CodePen, IceCoder 및 Codio 와 같은 온라인 편집 도구를 지원합니다.
Emmet의 작업 방식은 구문 작성이 끝나면 탭 키보드 키를 입력하는 것입니다. 다음은 가장 일반적으로 사용되는 Emmet 기호입니다. 이들이 실제로 작동하는지 보려면 계속 읽으십시오.
Emmet - HTML Best Tricks
내가 한 것처럼 Emmet으로 HTML을 작성하면 놀랄 것입니다. 앞에서 설명한 것처럼 Emmet은 간단한 HTML을 매우 복잡한 HTML로 줄여 쓸 수 있습니다. 그리고 그것들은 한 줄의 코드에서만 작성됩니다. 기본적으로 알려지지 않은 태그 이름을 약식으로 쓰면 Emmet은 자동으로 작성한 태그를 씁니다. 쉽게 이해하려면 아래 애니메이션을보십시오.
1. 중첩
일부 요소를 중첩 시키려면 사용하려는 각 태그 뒤에 큰 기호 > 를 추가해야합니다. 예를 들어 nav, div, ul 및 li 이 포함 된 header 사용하려면 header>nav>div>ul>li 와 히트 탭 키를 입력하면됩니다.
2. 형제 자매
요소를 중첩하지 않으려면 더하기 + 기호 다음에 추가 할 태그를 사용하면됩니다. 예를 들어 header+section+article+footer 는 header, section, article 및 footer 대해 다른 위치를 제공합니다.
3. 위로 올라 가라.
자식 요소 내부에 있고 그 자식 외부에 다른 요소가 있기를 원하면 ^ 기호를 사용하여 하나의 요소를 쉽게 위로 올라갈 수 있습니다. 두 번 입력하면 두 요소가 올라갑니다. 예를 들어 header>div>h1>nav 을 입력하면 nav 요소가 여전히 h1 안에 있습니다. 그것을 꺼내려면 마지막 기호를 ^ 로 ^ .
4. 클래스 추가
Emmet은 또한 태그 내에 선호하는 클래스 이름을 포함 할 수 있습니다. 사용하는 기호는 CSS의 클래스 선택기와 같은 점으로 점 . 기호. 예를 들어 .container 클래스로 div 를 만들고 싶다면 .fixed h1 을, .fixed nav 하면 div.container>header>h1.title+nav.fixed 합니다.
두 개 이상의 클래스를 갖고 싶다면 점과 함께 첫 번째 클래스 다음에 추가 클래스를 입력하십시오 . 기호. 예 : div.container.center 가 생성합니다. .
5. ID 추가
클래스 외에도 # 기호가있는 태그 안에 ID를 추가 할 수도 있습니다. 사용법은 클래스 추가와 동일하지만 이중 ID는 안에 입력 할 수 없습니다. 그렇게하려고하면 Emmet은 입력 한 마지막 ID 만 읽습니다.
6. 텍스트 추가
Emmet은 단순한 태그를 생략하는 것만 큼 간단하지 않으며, 내부에 텍스트 줄을 추가 할 수도 있습니다. 텍스트를 추가하려면 텍스트를 중괄호 {} 묶어야합니다. 태그 안에 텍스트가 자동으로 추가되므로 더 큰 > 기호를 추가 할 필요가 없습니다.
7. 속성 추가
class와 id 이외의 다른 속성을 추가하려면 괄호 [] 기호 안에 추가 할 속성을 추가하십시오. 예를 들어 로고 alt 가있는 logo.png 소스가있는 이미지가 필요하므로 img[src="logo.png"] 됩니다.
8. 그룹화
내부에 여러 개의 중첩 요소가있는 경우, () 기호로 그룹화하면 쉽게 달성 할 수 있습니다. 예를 들어, 헤더가 h1이고 내부에 nav 섹션이 있고 헤더 외부에 다른 섹션이있는 컨테이너를 갖고 싶다면, .container>(header>h1+nav.fixed)+(section>.content+.sidebar) 됩니다.
9. 곱셈
이 기능은 Emmet에서 가장 좋아하는 기능 중 하나가 될 수 있습니다. 곱셈과 마찬가지로 우리는 원하는만큼 요소를 곱할 수 있습니다. 그것을 사용하려면 곱하기를 원할 요소 뒤에 star * 기호를 추가하고 요소의 수를 더하십시오. 예를 들어, ul 안에 5 개의 li 항목을 쓰고 싶다면 올바른 구문은 ul>li*5 입니다.
10. 자동 번호 매기기
자동 번호 매기기는 숫자가 증가함에 따라 쉽게 다른 이름을 쓸 수 있도록 도와줍니다. 이 기능의 올바른 구문은 달러 $ 기호입니다. 자동 번호 매기기는 곱셈과 함께 사용하는 것이 가장 좋습니다. 예를 들어, 이전 li 항목에 item1 에서 item5 까지의 클래스를 추가하고 싶습니다. 그래서, 나는 달러 기호와 함께 클래스 이름을 추가해야한다 : ul>li.item$*5 .
11. Lorem
lipsum.com과 같은 입술 생성기를 열어 더미 텍스트를 작성하는 경우 Emmet을 사용하면 더 이상 필요하지 않습니다. Emmet은 또한 lorem 또는 lipsum 구문을 사용하여 더미 텍스트 생성기를 지원합니다. 텍스트의 길이를 지정할 수도 있습니다. 예를 들어, 10 단어 길이의 텍스트를 원한다면 lorem10 을 입력 할 것입니다.
12. 자동 문서
새 프로젝트를 시작할 때 수동으로 html 구조체를 작성하거나 다른 리소스에서 붙여 넣기하는 대신 에메트가 더 잘 수행 할 수 있습니다. 당신이해야 할 일은 감탄했습니다 ! 로그인, 탭을 치면 마법이 일어납니다. 그러면 HTML5 문서 구조가 생성됩니다. 대신 HTML4를 사용하려면 html:4t 입력하십시오.
13. 링크
문서에 추가하려는 favicon, rss 또는 외부 CSS 파일이있는 경우 링크 트릭을 사용하여 더 빠르게 작성할 수 있습니다. favicon을 포함 시키려면 link:favicon 을 입력하면 기본 favicon.ico 파일 이름 안의 favicon 링크가 생성됩니다. CSS의 경우 link:css 는 기본 style.css 스타일 이름이 포함 된 CSS 링크를 생성합니다. RSS는 rss.xml 을 기본 이름으로 사용합니다.
플러스 + 부호와 결합하여 더 빠른 자원을 생성 할 수 있습니다.
앵커
기본적 a 태그를 입력 a 탭을 누르면 href 속성이 포함 된 완전한 태그가 생성됩니다. 그러나 링크를 인스턴스 a:link 와 결합하면 // 값을 추가 할 수 있습니다. 메일 링크를 사용하려면 다음을 사용 a:mail .
15. 스마트 스킵
내가 여러분에게 줄 마지막 HTML 속임수는 똑똑한 건너 뛰기 기능입니다. 기본적으로 클래스 또는 ID를 내부에 넣을 때 태그 이름을 쓰지는 않습니다. 이것은 특정 조건에서만 적용됩니다.
첫째, 내부에 ID 또는 클래스가있는 div 가 필요하면 태그 이름을 쓸 필요가 없으며 id 또는 클래스 기호를 이름과 함께 직접 작성하면됩니다.
둘째, ul 태그 안에있을 때 클래스 또는 ID가 있으면 li 태그 작성을 건너 뜁니다.
마지막은 table 태그 내에 적용됩니다. tr 이나 td 태그에 클래스 나 id가 있으면이 태그가 자동으로 추가됩니다.
Emmet - 최고의 CSS 트릭
HTML 트릭을 배웠다면 이제는 CSS를위한 시간이다. 상단 이미지에 표시된 공통 기호 중 일부는 CSS에서 작동하지 않습니다. 그들은 더 크고 ^ 기호 위로 기어 올라갑니다. 당신이 그들을 사용한다면, 플러스 + 기호처럼 생산됩니다. 자, 가자.
1. 너비와 높이
Emmet으로 width 과 height 를 정의하는 것은 매우 쉽습니다. 추가하려는 크기 다음에 첫 단어를 써야합니다. 기본적으로 단위를 지정하지 않으면 Emmet은 px 단위로 단위를 생성합니다. 사용 가능한 단위 기호는 % % 와 em 입니다.
2. 텍스트
사용하기 쉬운 텍스트 특성 기호가 있으며 기본값으로 생성됩니다. ta 는 left 값으로 text-align 을 생성하고, td 는 none 값도 none text-decoration 이며, tt 는 uppercase 값을 갖는 text-transform 됩니다.
3. 배경
배경을 추가하려면 bg 약어를 사용하십시오. bgi 와 결합하여 background-image 를 얻을 수 있으며 bgc 는 background-color, bgc 은 background-color bgi 를 얻을 수 있습니다. bg+ 를 써서 백그라운드 속성의 전체 목록을 얻을 수도 있습니다.
4. 글꼴 얼굴
더하기 기호는 배경에 적용 할 수있는 것이 아닙니다. @font-face 의 경우 @font-face 속성의 전체 목록을 보려면 @f+ 로 간단히 작성할 수 있습니다. 더하기 기호없이 @f 를 입력하면 기본 @font-face 만 얻을 수 있습니다.
5. 기타
다른 위대한 트릭은 anim 텍스트로 animation 작성을 줄여서 사용할 수 있다는 것입니다. 마이너스 기호를 추가하면 애니메이션 속성을 전체 값으로 얻을 수 있습니다. @kf 전체 목록을 생성하는 @kf 텍스트도 있습니다.
결론
Emmet은 개발 프로세스를 간소화하는 데 매우 많은 시간을 절약하는 도구입니다. Emmet을 아는 경우 지금 시도해 보는 것이 너무 늦지 않습니다. 이러한 트릭은 Emmet 기능 중 일부일뿐입니다. Emmet에는 다른 기호와 구문, 특히 CSS가 많이 있습니다. Emmet 문서 또는 치트 시트로 가서 더 자세히 읽으십시오.
