순서는
wrap_이름 이런식으로
ex)wrap_login/ wrap_"이름"_li/wrap_account/wrap_"이름" 등
ex)cont_login/ cont_"이름"_li/cont_account/cont_"이름" 등
사이트의 width 를 고정하고 싶을때 : .siteWidth
img의 경우 img_"이름"을 사용.
title(h1~h6, p 태그 등 제목과 같은 것들)의 경우 tit_"이름" 사용
button 혹은 a를 이용한 button만들기의 경우 btn_"이름"
이름은 카멜표기법을 이용한다.
기본 태그들은 최상위로 모아서.
그 다음은 ID - 최대한 java 조작용.
그 다음은 class name 순서로 배치.
- JavaScript의 querySelector를 이용하기 위한 class명의 경우엔, "이름"에 해당하는 부분만 작성.
- 또한 단일 요소중 겹치는게 많아 두개 이상의 태그로 나눈 후 적은양(2줄이하)의 스타일 시트로 구분되는 경우
"이름"에 해당하는 부분만 작성
container는 주로 여러 개의 요소를 감싸는 div class 명이고,
wrapper는 단일 요소의 레이아웃을 위한 div class 명이다.
단일 요소의 속성을 위함은 요소에 맞게 이름 사용.
css 작성 순서는 바깥-> 안쪽 -> 그 외
0. div구조의 width
1. div구조
2. 구조적 스타일 속성(ex : list-style-type / vertical-align / text-align)
3. margin
4. padding
5. width
6. height
7. border 관련
8. background 관련
9. position 관련
10. font 관련
계속 수정예정