오늘의 학습 목표
- 타입에 의한 분류에 맞춰 프로퍼티를 선언할 수 있다.
- box-sizing 값에 따라 달라지는 박스 크기 측정 기준을 설명할 수 있다.
선언 순서의 필요성
CSS 파일을 작성하다 보면 어느 순간 선언 순서가 엉망이 되어 있다.
이런 선언은 한눈에 들어오지 않는다. 그래서 같은 선언을 중복하거나 불필요한 선언을 수정하지 않고 그대로 두는 등의 실수를 여러 번 저질렀다. Prettier를 사용하면 뚝딱 해결된다지만 알고 쓰는 것과 모르고 쓰는 것은 천지차이이므로 오늘은 선언 순서를 공부해 보았다.
조사해 보니, CSS 프로퍼티 나열 방식에 관한 여러 방법론이 존재했다.
1. 알파벳 순으로 정렬 (구글 CSS 스타일 가이드)
2. 타입에 의한 분류(레이아웃과 유관->무관한 순으로 정렬하는 NHN 코딩 컨벤션 등)
3. 무작위로 정렬
컨벤션 목록에 '무작위로 정렬'이 있다니 뚱딴지 같게 느껴질 수 있겠지만,
Chris Coyier가 작성한 포스팅에 따르면 설문조사에 참여한 만 명 중 무려 39%가 Randomly를 택했다. 10년 전에 이루어진 조사라는 것을 감안하더라도 놀라운 결과이다. (동질감이 든다)
손에 익힐 컨벤션으로는 2번을 택했다.
가장 복잡하지만 그만큼 효율적인 방식이라는 생각이 들었기 때문이다.
타입에 의한 분류
NHN 코딩 컨벤션에서는 쓰임새가 레이아웃과 관련이 큰 것에서 시작하여 무관한 것 순서로 정렬하기를 제안한다. 다시 말하면 구조적(전체적)인 것에서 세부적인 것으로, 밖에서부터 안쪽의 순서로 선언한다.
1. 레이아웃
2. 박스모델
3. 배경
4. 폰트
5. 기타
속성 선언 순서
1. 레이아웃
display : 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정
flex-direction
flex-wrap
justify-content
align-content
align-items
order
flex-grow
flex-shrink
flex-basis
align-self
visibility : 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨김
overflow : 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정
float : 요소를 일반적인 흐름으로부터 부유(분리)시킬 때 사용
clear (여기서부터 주말 중으로 공부하여 보충할 예정)
position
top
right
bottom
left
z-index
2. 박스모델
box-sizing
width (min-width, max-width 순)
height (min-height, max-height 순)
margin
padding
border
3. 배경
background (background-color, background-image, background-repeat, background-position,
background-size, background-attachment, background-origin, background-clip 순)
box-shadow
opacity
4. 폰트
font
color
letter-spacing
text-align
text-decoration
text-indent
vertical-align
white-space
5. 기타
위에서 언급되지 않은 나머지 속성들
실전 활용
기존 코드
.title {
font-size: 2em;
font-weight: 3em;
text-align: center;
padding-top: 1.5em;
}
.goal-container {
background-color: #E1EEDD;
padding: 3em;
margin-left: 1em;
display: flex;
flex-direction: column;
}개선 후
.title {
padding-top: 1.5em; /*박스모델이므로 폰트보다 앞서 선언되어야 함*/
font-size: 2em;
font-weight: 3em;
text-align: center;
}
.goal-container {
display: flex; /*레이아웃*/
flex-direction: column;
padding: 3em; /*박스모델*/
margin-left: 1em;
background-color: #E1EEDD; /*배경*/
}참조
