Concentric CSS는 CSS 속성을 시각적 구조의 바깥에서 안으로 정렬하는 방식이에요.
박스 모델을 기준으로 속성들을 의미별로 그룹화하고, 일정한 순서대로 정렬함으로써 가독성과 유지보수성을 높이는 것이 목적이에요.
예시
1. 바깥에서 제일 먼 위치부터 시작
박스를 어디에 둘지 정하는 단계
position: absolute;
top: 0;
left: 0;
z-index: 10;2. 다음은 박스가 어떻게 생길지
박스의 크기와 여백, 내부 공간 같은 기본 박스 모델 설정
display: flex;
width: 200px;
height: 100px;
margin: 20px;
padding: 10px;
box-sizing: border-box;3. 시각적으로 꾸미는 부분
색, 둥근 모서리, 그림자 등 디자인 효과
background: #1e90ff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);4. 텍스트나 동작 관련 요소
글자와 인터랙션, 전환 효과 등
color: white;
font-size: 14px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;나의 CSS 속성 작성 순서
저는 Concentric 기반이지만 더 세분화해서 사용하고 있어요.
/* 1. Positioning (위치 관련) */
position
top
right
bottom
left
z-index
/* 2. Display & Box Model (박스/레이아웃) */
display
flex-direction
flex-wrap
flex-grow
flex-shrink
justify-content
align-items
align-content
order
float
clear
visibility
overflow
overflow-x
overflow-y
/* 3. Box Size (크기 관련) */
box-sizing
width
min-width
max-width
height
min-height
max-height
/* 4. Spacing (여백 관련) */
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
/* 5. Border & Outline */
border
border-width
border-style
border-color
border-radius
outline
outline-width
outline-style
outline-color
/* 6. Background */
background
background-color
background-image
background-size
background-position
background-repeat
box-shadow
/* 7. Typography (글자 관련) */
color
font
font-family
font-size
font-weight
line-height
letter-spacing
text-align
text-decoration
text-transform
white-space
word-break
/* 8. Table */
border-collapse
border-spacing
caption-side
empty-cells
table-layout
/* 9. List */
list-style
list-style-type
list-style-position
list-style-image
/* 10. Animation & Transition */
transition
transition-delay
transition-duration
transition-property
transition-timing-function
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
/* 11. Transform & Effects */
transform
transform-origin
filter
opacity
mix-blend-mode
backface-visibility
perspective
will-change
/* 12. Miscellaneous (기타) */
cursor
pointer-events
user-select
appearance
content
quotes
resize 