마크업
emmet 코드 스니펫
< 먼저 쓰는 습관 줄이기.box1이나div,main,header 단축키와 Tab을 이용한 입력 습관을 들이자.box$*4와 div*4{$}의 차이점이나 쓰임새 숙지하기{}을 애용하면 시간을 단축할 수 있다.div.container>header>h1{제목}+nav>ul>li*3 와 같이 + 로 복수의 요소 작성가능
주의사항
마크업 언어는 공백도 인식하기 때문에 display: flex로 여백을 없애준다.
작동하는 클래스는 active 붙여주기.section 콘텐츠 그룹화 / div 레이아웃 그룹화
이미지는 크기를 지정해줘야 크기에 이미지를 맞출 수 있다.
CSS
여백 설정
gap은 부모 요소에 작성 / flex나grid인 상황에서만 사용 가능.
유의 사항
박스가 한 줄에 안 나뉘어져 있는 건 flex가 필요 없음.background-color는 부모요소가 아닌 자식요소에 넣어야 자식요소끼리 들러붙지 않는다
| 단축키 | 설명 |
|---|---|
df |
display: flex; |
lisn |
list-style: none; |
tdn |
text-decoration: none; |
fi |
font: inherit; |
cri |
color: inherit; |
tftl |
transform: translate(-50%, -50%); |
aiflst |
align-items: flex-start; |
jcsb |
justify-content: space-between; |
fxdc |
flex-direction: column; |
bodra |
border-radius: 50%; |