CSS를 더 빠르게 작성하는 방법
i++ 대신 i = i + 1로 이동했다고 서두르는 것 같습니다. 사용 가능한 옵션이 많거나 plugins available to make your web development workflow easy . 에밋도 그 중 하나입니다.Emmet은 일부 약어를 사용하여 코딩 속도를 높이는 텍스트 편집기용 플러그인입니다. 우리가 작성하는 Html
html:5과 마찬가지로 이 코드를 얻습니다.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
이것은 HTML 이었지만 HTML이 아닌 CSS를 더 빨리 작성하는 방법을 배우기 위해 여기에 있었습니다. 초조해하지 마세요. 귀하의 워크플로우를 빠르고 원활하게 도와줄 Emmet의 CSS 약어를 안내해 드리겠습니다. 자, 시작하겠습니다.
CSS용 에밋
emmet이 HTML에만 유용하다고 생각할 수도 있지만 그렇지 않습니다. CSS와 함께 Emmet을 사용할 수 있습니다. Emmet은 CSS 속성에 대한 속기만 제공합니다. 예를 들어,
m0라고 쓰면 margin: 0;가 됩니다. 일반적으로 사용되며 더 빠르게 코딩하는 데 도움이 되는 다른 것을 살펴보겠습니다.CSS의 Emmet 약어
Emmet에는
p 가 padding , w 가 width , h 가 height , m 가 margin 와 같은 단축키가 많이 있습니다. Emmet 작업을 시작하기 전에 논의해야 할 몇 가지 일반적인 사용 사례가 있습니다.CSS 단위
Emmet CSS 약어로 기본값을 입력하면
px가 기본 단위로 표시됩니다. em, rem 또는 백분율과 같은 다른 단위를 원하면 다음과 같은 별칭을 사용해야 합니다.e → em
r → rem
p → %
x → ex
색상 값
Emmet은 색상을 지원하며 이를 사용하여 색상 단축키를 작성할 수 있습니다.
c#0와 마찬가지로 생성된 출력은 color: #000000 입니다. 다른 사용 사례는 다음과 같습니다.#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00
분리 기호
한 줄에 많은 속성을 작성하는 동안 속성을 구분하기 위해
+를 사용합니다.
결론
따라서 emmet이 이러한 단축키를 사용하여 CSS 작성을 매우 쉽게 만드는 것을 볼 수 있습니다. 하나의 명령문으로 다섯 줄을 작성할 수 있다고 생각하십시오. 대단하지 않나요? 자세한 내용을 알아보려면 사용 가능한 치트 시트here를 확인하십시오.
Reference
이 문제에 관하여(CSS를 더 빠르게 작성하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/sameerkatija/how-to-write-css-even-faster-10k3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
