[HTML/CSS] 2-6. CSS Emmet 사용법 & 2-7. CSS 학습 팁

CSS Emmet

 

많이 쓰는 Emmet 예제

• mt10 -> margin-top: 10px;
• pb10 -> padding-bottom: 10px;
• w100 -> width: 100px;
• h100p -> height: 100%;
• bd -> border: 1px solid #000;
• bgc -> background-color: #fff;
• fsz10 -> font-size: 10px;
• fw700 -> font-weight: 700;
• c#ddd -> color: #ddd;
• z10 -> z-index: 10;

 

https://docs.emmet.io/cheat-sheet/ 

Cheat Sheet

 

 

 

---

CSS 학습 팁

 

1. 구글 신과 함께하면 모두 알아낼 수 있다.

 

2. 질문하기 전에 먼저 최대한 찾아보자.

 

3. 검색은 영문이 유리하다.

   a. 영문 문서를 읽는 것을 두려워 하지 말자. (구글 번역 도움!)

 

4. 공식 문서나 튜토리얼 문서를 잘 확인하자.

   a. https://developer.mozilla.org/ko/docs/Web/CSS 

CSS: Cascading Style Sheets | MDN

 

   b. https://www.w3schools.com/css/default.asp 

CSS Tutorial

 

5. 배운 것을 기록해두자.

   a. 나만의 예제코드 모음집을 만들자.

 

---