Emmet FE 효율성
구문
모든 Emmet의 출발은 단축키의 탭이기 때문에 Emmet을 사용한 후의 장면은 줄임말 탭을 작성한 후에 탭을 미친 듯이 눌러야 한다.
우선 HTML 웹 페이지부터 시작합시다. 현재 모든 웹 페이지는 기본적으로 H5페이지이기 때문에 Emmet을 사용하면 H5페이지 프레임을 매우 빠르게 생성할 수 있습니다. 필요한 html5를 만들고 리턴을 누르면 됩니다(VS 코드에서만 가능).
하위 요소 연산자:>
모든 원소는 가까워서 중간에 빈칸이 있을 수 없다.
div>ul>li
펼치다
-
근사 요소 연산자: +
+ 기호는 모든 요소가 같은 레벨임을 나타낸다
div+p+bq
펼치다
父元素操作符：^
因为 + > 操作符都是向下，所以如果要相对当前曾经向上一级可以使用^
div+div>p>span+em^bq
펼치다
乘法操作符： *
使用 * 可以让元素重复输出
ul>li*5
펼치다
-
-
-
-
-
괄호 연산자: ()
괄호를 사용하여 몇 가지 요소를 함께 놓고 조작하다
div>(header>ul>(li>a)*2)+footer>p
펼치다
ID 및 class 연산자
Emmet을 통해서도 태그에 ID와 class를 쉽게 부여할 수 있습니다.
div#header+div.page+div#footer.class1.class2.class3
펼치다
重复数字操作符: $
$ 可以和 * 配合快速给 大量的标签起名 每一个$表示一个数字占位符
ul>li.item$*5
펼치다
-
-
-
-
-
문자 조작자: {}
괄호를 사용하여 탭 내부의 문자열을 복사합니다
a{Click me}
펼치다
Click me
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
