CSS 속성의 선언 순서를 스스로 정리해 본 적이 없는 것 같아 네이버의 CSS 코드를 참고해 정해 보았다. 평소 best practice나 클린 코드 관련 글들에서 읽은 것과 결이 같아 좋은 기준이 될 것 같다.
- display - 표시(관련 속성: visibility)
- overflow - 넘침
- float - 흐름(관련 속성: clear)
- position - 위치(관련 속성: top, right, bottom, left, z-index)
- width & height - 크기
- margin & padding(그룹) - 간격
- border(그룹) - 테두리
- background(그룹) - 배경
- font(그룹) - 폰트(관련 속성: color, letter-spacing, text-align, text-decoration, text-indent, vertical-align, white-space 등)
- animation - 동작(관련 속성: animation, transform, transition, marquee 등)
- 기타 - 위에 언급되지 않은 나머지 속성들로 폰트의 관련 속성 이후에 선언하며, 기타 속성 내의 선언 순서는 무관함.
'Programming > HTML, CSS' 카테고리의 다른 글
[HTML] (non-breaking space, 줄 바꿈 없는 공백)이란? (0) | 2024.03.26 |
---|---|
[HTML] <a> 태그 'target' 요소 (0) | 2024.01.27 |
[CSS] 글꼴 이탤릭체로 만드는 법 (0) | 2023.08.12 |
[CSS] transform 속성 (0) | 2023.03.31 |
[iOS] button 요소에 color를 지정하지 않으면 safari 브라우저에서 버튼 텍스트가 파란색(-apple-system-blue)로 표시된다 (0) | 2023.03.20 |
댓글