CSS 선언순서 및 규칙

1. 모질라 파이어폭스

1. display
2. list-style
3. position
4. float
5. clear
6. width/height
7. padding/margin
8. border/background
9. color/font
10. text-decoration
11. taxt-align/vertical-align
12. white-space
13. other text
14. content

---

2. NHN

네이밍 규칙

네이밍 규칙은 레이아웃, 객체, 이미지, 폴더, 파일의 이름을 작성하는 규칙으로 이해하기 쉬운 이름으로 작성해야 코드를 쉽게 파악할 수 있다.

HTML 코드 작성 규칙

1. 들여쓰기
   HTML 코드를 작성할 때 코드의 가독성을 높이기 위하여 왼쪽 첫 번째 열부터 오른쪽으로 일정한 간격만큼 띄어 쓴다. 들여쓰기를 하면 전체 HTML 구조를 쉽게 파악할 수 있다.
   2. 빈 줄
   3. HTML 코드의 빈줄은 의미 있는 객체를 구분하기 위하여 사용한다. DTD 및 인코딩
      DTD(Document Type Definition)는 SGML(Standard Generalized Markup Language) 계열 마크업 언어의 문서 타입을 정의하는 것으로서, 해당 HTML 문서가 어떤 버전의 HTML로 작성되었는지, 어떤 규칙으로 내용을 기술하고 어떤 요소와 애트리뷰트, 애트리뷰트값을 지정할 수 있는지 정의한다. 또한 인코딩을 선언하여 문서에서 사용되는 문자 코드 세트를 지정한다. DTD와 인코딩 선언은 HTML 문서가 브라우저에서 바르게 해석될 수 있도록 한다.
   4. 주석
      HTML 코드의 주석은 코드 그룹을 구분하거나, 참고해야 하는 사항을 기술한다.

CSS 코드 작성 규칙

1. 들여쓰기
   CSS 코드는 들여쓰기를 하지 않는다. 단, 중괄호"{}"가 중첩되는 경우는 예외이다.
2. 공백
   CSS 코드는 공백을 최소화한다.
3. 빈 줄
   CSS 코드의 빈 줄은 코드 그룹의 영역을 표시하기 위하여 사용한다.
4. 줄 바꿈
   CSS 코드의 가독성을 위한 속성 줄 바꿈은 하지 않는다.
5. 인코딩
   HTML 문서가 브라우저에서 바르게 해석될 수 있도록 CSS의 인코딩은 HTML의 인코딩과 동일하게 선언한다.
6. 선택자
   선택자 버그가 발생하지 않도록 사용 규칙을 준수한다.
7. 속성
   속성 선언 순서를 준수하여 코드를 쉽게 파악할 수 있도록 하며, CSS 코드 최적화를 위해 속성 값을 축약하여 사용하고 약식 속성을 허용 범위에 맞게 사용한다.
8. z-index
   z-index 속성 값을 범위에 맞게 사용하여 객체가 브라우저에서 바르게 표현되도록 한다.
9. 핵
   크로스 브라우징을 위해 제시된 핵(hack)에 한해 최소한의 사용을 허용한다.
10. 미디어 타입
    미디어 타입 상황에 맞게 추가해서 사용한다.
11. CSS 선언 타입
    상황에 알맞은 CSS 선언 타입을 선택한다.
12. 주석
    CSS 코드의 주석은 코드 그룹을 구분하거나 참고해야 하는 사항을 기술한다.

웹 접근성 보장 방법

모든 사람이 환경의 제약 없이 웹 콘텐츠에 접근할 수 있도록 보장하는 마크업 방법을 기술한다.

CSS 선언순서

1. (레이아웃)
   1. display
   2. visibility
   3. overflow
   4. float
   5. clear
   6. position
   7. top
   8. right
   9. bottom
   10. left
   11. z-index
2. (Box)
   1. width
   2. height
   3. margin
   4. padding
   5. border
3. (배경)
   1. background
4. (폰트)
   1. color
   2. letter-spacing
   3. text-align
   4. text-decoration
   5. text-indent
   6. vertical-align
   7. white-space
5. (동작)
   1. animation
6. 기타

출처

---