HTML 약어
요소 단축키
| div | 생성 |
| p | 생성 |
| h1 | 생성 |
| a | 생성 |
| img | |
| input | 생성 |
| btn | 생성 |
| link:css | CSS 스타일시트 link 태그 |
HTML 보일러플레이트
! → full HTML5 boilerplate
doc → HTML5 doctype only
암시적 태그
| .class | 로 변환 |
| ul>.item | 자식이 |
| table>.row | 자식이 |
| select>.opt | 자식이 |
중첩
중첩 연산자
| > | 자식 요소 |
| + | 형제 요소 |
| ^ | 한 레벨 위로 |
| ^^ | 두 레벨 위로 |
중첩 예시
div>ul>li → nested child elements
div+p+footer → sibling elements
div>p>span^h2 → climb up: h2 is sibling of p
div>p>span^^h2 → climb up twice: h2 sibling of div
그룹화
괄호 그룹화
div>(header>nav)+main+footer
→ groups header>nav as a unit
(div>h2+p)*3
→ repeat grouped structure 3 times
복잡한 레이아웃
.container>(header>h1+nav>ul>li*3)+main+footer
→ full page layout skeleton
곱셈
반복 연산자
| li*5 | |
| div>p*3 | 자식 단락 3개를 가진 div |
| ul>li*4>a | 링크를 포함한 항목 4개의 목록 |
| tr>td*4 | 셀 4개인 테이블 행 |
곱셈 예시
ul>li.item*5 → 5 list items with class
table>tr*3>td*4 → 3x4 table grid
.row>.col*3>p{Content} → 3-column row with text
번호 매기기
항목 번호 매기기 ($)
| $ | 순차 번호 (1, 2, 3...) |
| $$ | 두 자리 제로 패딩 (01, 02...) |
| $$$ | 세 자리 제로 패딩 (001, 002...) |
| $@3 | 3부터 번호 시작 |
| $@- | 역순 번호 (내림차순) |
| $@-3 | 3부터 역순 번호 |
번호 매기기 예시
li.item$*3 → item1, item2, item3
li.item$$*3 → item01, item02, item03
li.item$@3*3 → item3, item4, item5
속성
ID 및 클래스
| #id | id 속성 추가: |
| .class | 클래스 추가: |
| .c1.c2 | 다중 클래스: class="c1 c2" |
| #main.container | ID + 클래스 조합 |
커스텀 속성
td[colspan=2] →
a[href=#]{Click} → Click
input[type=email placeholder=Email]
div[data-id=$]*3 → data-id="1", "2", "3"
텍스트
텍스트 내용 ({})
| p{Hello} | Hello |
| a{Click me} | Click me |
| p{Item $}*3 | Item 1, Item 2, Item 3 |
중첩과 텍스트
p>{Click }+a{here}+{ to continue}
→
Click here to continue
ul>li{Item $}*4 → list with numbered itemsCSS 약어
박스 모델
| m10 | margin: 10px; |
| m10-20 | margin: 10px 20px; |
| p10 | padding: 10px; |
| w100 | width: 100px; |
| w100p | width: 100%; |
| h50 | height: 50px; |
디스플레이 & 포지션
| d:f | display: flex; |
| d:g | display: grid; |
| d:n | display: none; |
| d:b | display: block; |
| pos:r | position: relative; |
| pos:a | position: absolute; |
Flexbox
| jc:c | justify-content: center; |
| jc:sb | justify-content: space-between; |
| ai:c | align-items: center; |
| fxd:c | flex-direction: column; |
| fw:w | flex-wrap: wrap; |
타이포그래피 & 색상
| fz14 | font-size: 14px; |
| fw:b | font-weight: bold; |
| ta:c | text-align: center; |
| c:#333 | color: #333; |
| bgc:#fff | background-color: #fff; |