1. display **객체의 노출여부/표현방식**
2. ( justify-content / align-items)
3. ( flex-direction / flex-wrap / flex-flow ) → flex ~로 시작하는 것들
4. list-style
5. position **위치/좌표**
6. float
7. clear
8. width
9. height **크기/여백**
10. padding
11. margin
12. border
13. background **윤곽/배경**
14. color
15. font **글자/정렬**
16. text-decoration
17. text-align / vertical-align
18. white-space
19. other text
20. content **내용**
스타일 코드 위치
분리없이 하단에 작성
최상단 태그 이름은 St[컴포넌트명]
function Home() {
return (
<StHome>
...
</StHome>
);
}
rem 사용 (10px === 1rem)
Container, Wrapper 구분해서 사용
HTML/CSS 네이밍 시 container와 wrapper의 차이