Tiny Bunny

HTML 태그에 스타일을 적용할 때, 같은 요소에 여러 스타일이 겹치는 경우 어떤 스타일이 최종 적용되는지 정리해보았습니다.
이번 포스팅에서는 CSS 스타일 우선순위의 원칙과 함께, 실제 예제를 통한 적용 순서를 설명드리겠습니다.

CSS 우선순위

구분 설명 우선순위
인라인 스타일 태그 내부 style 속성에 직접 작성 ⭐ 가장 높음
ID 선택자 #primary 형태 매우 높음
클래스 선택자 .special 형태 중간
태그 선택자 button 등 태그 이름 낮음
중복 선언 같은 선택자라면 나중에 선언된 것이 적용됨 적용됨

실전 예제로 살펴보는 적용 우선순위

아래와 같은 HTML 버튼 요소들이 있다고 가정:

<button>기본 버튼</button>
<button class="special">클래스 버튼</button>
<button class="special" id="primary">ID + 클래스 버튼</button>
<button class="special" id="primary" style="background-color: darkgreen;">인라인 스타일 버튼</button>

 

그리고 아래처럼 CSS가 선언되어 있다면:

button {
  background-color: blue;
}

.special {
  background-color: brown;
}

#primary {
  background-color: black;
}
버튼 요소 적용된 스타일 최종 배경색
<button> 태그 선택자 blue
<button class="special"> 클래스 선택자 (.special) brown
<button class="special" id="primary"> ID 선택자 (#primary) black
<button class="special" id="primary" style="..."> 인라인 스타일 > ID > 클래스 darkgreen
 

✅ 결론: 같은 요소라도 어떤 방식으로 스타일을 적용하느냐에 따라 우선순위가 달라지며, 그 순서대로 덮어씌워집니다!

🔍 추가로 꼭 알아야 할 CSS 기본 개념들

  • 기본 박스 모델: 모든 요소는 기본적으로 box-sizing: content-box;
    → border나 padding은 width에 포함되지 않음.
  • display 속성 차이:
    • inline: width/height 지정 불가, 줄바꿈 안 됨
    • inline-block: inline처럼 배치되면서도 사이즈 지정 가능
  • position 속성 차이점 요약:
    • static: 기본값 (좌표 이동 불가)
    • relative: 자기 위치 기준으로 이동
    • absolute: 가장 가까운 position 지정된 조상 기준 위치, 문서 플로우에서 빠짐
    • fixed: 뷰포트를 기준으로 고정, 스크롤해도 움직이지 않음
    • sticky: 스크롤 중 특정 위치에서 고정되며, top, bottom 등 기준 필요
  • 트랜스폼 속성:
    • translateX, translateY, scale, rotate 등으로 요소의 크기/회전/이동 제어 가능
    • 반응형 디자인에도 자주 활용됨
  • 애니메이션 기초: animation: 3s infinite alternate slidein;
  • 미디어 쿼리 기초: @media screen and (max-width: 768px) { /* 모바일 기준 스타일 */ }

정리

항목 설명
CSS 우선순위 인라인 > ID > 클래스 > 태그 > 선언 순서
box-sizing 기본값 content-box
display 차이 inline, inline-block, block 등 요소 배치 및 크기 지정 방식 다름
position 정리 relative, absolute, fixed, sticky 동작 기준 차이
transform 기능 요소 이동, 크기 조절, 회전 등을 통해 반응형 UI 구현
animation 사용법 animation: 지속시간 반복방식 효과명;
media query 화면 크기별 스타일 분기: @media screen and (max-width: 768px) 등
 

 

티스토리툴바