흔히 zen 코딩, Emmet 코딩, 자동 완성 등의 이름으로 불리고 있는 이 기술은 긴 HTML, CSS 코드를 간단한 키 조합으로 빠르게 적는 기술입니다.
크게 어렵지 않지만, 업무가 무척 편해지니 꼭 습득하여 사용해 보시기를 권장드립니다.
(백엔드에서 풀스택으로 가거나, 퍼블리셔 입문자가 보시기에 알맞은 글입니다.)
이 기능은 Visual Studio Code 환경에서 사용하시기를 바라며, Visual Studio 2022에서는 자동 완성이 처참하니 HTML, CSS만 VS Code로 진행하고 코드 복사/붙여 넣기를 하시는 것을 추천드립니다.
(Visual Studio 2022는 확장자 추가나 설정이 쉽지 않기에 접근성이 좋은 VS Code 위주로 적어드리겠습니다.)
자주 사용하는 코드 위주로 정리하였으니 혹시 내가 몰랐던 게 있나 찾아보시는 것도 재밌을 것 같습니다.
(앞의 키를 순서대로 입력 후 엔터를 눌러주시기를 바랍니다. " : "를 엔터로 봐주세요!)
HTML:
<!-- HTML 기초 코드 한번에 적기 -->
!:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!-- 태그 빨리 만들기 -->
.: <div class=""></div>
.asdf: <div class="asdf"></div>
#asdf: <div id="asdf"></div>
a.asdf: <a href="" class="asdf"></a>
table#asdf: <table id="asdf"></table>
.asdf$*5:
<div class="asdf1"></div>
<div class="asdf2"></div>
<div class="asdf3"></div>
<div class="asdf4"></div>
<div class="asdf5"></div>CSS:
/* width */
wa: width: auto;
w엔터f: width: fit-content;
w100: width: 100px;
w100vw: width: 100vw;
mw100: min-width: 100px;
ma100: max-width: 100px;
/* height */
ha: height: auto;
h엔터f: height: fit-content;
h100: height: 100px;
h100vh: height: 100vh;
mh100: min-height: 100px;
mah100: max-height: 100px;
/* position */
por: position: relative;
poa: position: absolute;
pof: position: fixed;
l100: left: 100px;
la: left: auto;
t엔터a: top: auto;
b0: bottom: 0;
ra: right: auto;
/* display */
db: display: block;
dib: display: inline-block;
df: display: flex;
dg: display: grid;
dn: display: none;
/* flex, grid 세부 속성 */
ais: align-items: start;
aic: align-items: center;
aie: align-items: end;
jcs: justify-content: start;
jcc: justify-content: center;
jce: justify-content: end;
jcsb: justify-content: space-between;
jcsv: justify-content: space-evenly;
jcsd: justify-content: space-around;
fsh: flex-shrink: ;
fwp: flex-wrap: ;
g20: gap: 20px;
/* overflow */
oh: overflow: hidden;
ox: overflow-x: hidden;
oy: overflow-y: hidden;
ou: overflow: unset;
/* transform */
tf: transform: ;
tft: transform: translate(x, y);
tftx: transform: translateX(x);
tfty: transform: translateY(y);
tfr: transform: rotate(angle);
/* text 관련 */
c: color: #000;
ff: font-family: serif;
fz: font-size: ;
fw: font-weight: normal;
fwb: font-weight: bold;
fw400: font-weight: 400;
ta: text-align: left;
tac: text-align: center;
tar: text-align: right;
lh: line-height: ;
ls: letter-spacing: normal;
tt: text-transform: uppercase;
td: text-decoration: none;
tsh: text-shadow: hoff voff blur #000;
wh: white-space: nowrap;
wb: word-break: normal;
wbb: word-break: break-all;
wbk: word-break: keep-all;
/* margin */
m100: margin: 100px;
mb10: margin-bottom: 10px;
mt: margin-top: ;
mra: margin-right: auto;
mln: margin-left: none;
/* padding */
p10: padding: 10px;
pt10: padding-top: 10px;
pb: padding-bottom: ;
pra: padding-right: auto;
pln: padding-left: none;
/* 마우스 관련 */
us: user-select: none;
cur: cursor: pointer;
/* 박스와 기타 설정들 */
bg: background: #000;
bd: border: 1px solid #000;
bora: border-radius: ;
bsh: box-shadow: ;
op0: opacity: 0;
z99: z-index: 99;
bxb: box-sizing: border-box;
out: outline: ;
trs: transition: prop time;
trde: transition-delay: ;
ct: content: '';방향키를 추가하면 더욱 많은 조합을 만들 수 있으나 너무 복잡해지면 가독성이 떨어지기에 간단하고 자주 쓰이는 코드만 몇 개 추려보았습니다.
위 코드를 보고 “아 이런 느낌?” 하고 감이 오실 겁니다.
그 감이 대부분 맞으나 “이게 왜 안됨?”이라는 속마음이 절로 드는 조합도 있습니다.
위에 있는 키 조합이 전부가 아니며 각자에게 맞거나 제가 놓친 조합들도 분명 있을 겁니다.
VS Code에서 다양한 조합을 실험해 보시면서 작업 속도를 비약적으로 발전시켜 보시기를 바랍니다.
그럼 오늘도 모두 파팅입니다.
728x90
반응형
'개발 > CSS' 카테고리의 다른 글
| [CSS] transition에 대해 알아봅시다 (0) | 2024.11.21 |
|---|---|
| display:grid 간단 사용법과 grid로 반응형 하는 법 (2) | 2024.11.18 |
| display: flex;에 대해 알아봅시다 (0) | 2024.11.17 |
| 스크롤 바를 변경하거나 안 보이게 하는 코드 (0) | 2024.11.14 |
| text-overflow 2줄 ellipsis (텍스트 2줄 이상 ...처리하기) (0) | 2024.10.31 |
