[콜럼Vue스] HTML 스타일 적용 우선순위

HTML 요소의 스타일 적용 우선순위

• HTML 요소에 스타일을 적용할 때, 인라인 스타일과 CSS 클래스로 정의된 스타일의 적용 우선순위가 중요함.
• 인라인 스타일은 style 속성을 이용하여 요소에 직접 지정된 스타일로, 우선순위가 가장 높음.
• CSS 클래스는 <style> 태그 내에서 정의된 스타일이며, 우선순위는 인라인 스타일보다 낮음.

<style>
  .test { 
    background-color: yellow; 
    border: double 4px gray; 
  }
  .over { 
    background-color: aqua; 
    width: 300px; 
    height: 100px; 
  }
</style>
<div style="background-color: orange;" class="test over"></div>

1. • 라인 스타일로 background-color: orange;가 적용됨.
   • 클래스 .test와 .over가 적용되며, 각각 배경 색상, 테두리, 너비, 높이와 같은 속성을 정의함.
2. 적용 우선순위 설명:
   • 스타일 적용 우선순위는 인라인 스타일 > 클래스 .over > 클래스 .test 순으로 결정됨.
   • 따라서, 이 경우 배경 색상 background-color가 인라인 스타일에서 지정된 orange로 적용됨.
3. 스타일 충돌 시 우선순위:
   • 같은 속성에 대해 여러 스타일이 선언되면, 가장 마지막에 적용된 스타일이 우선적으로 적용됨.
   • 이 예제에서 background-color가 여러 곳에서 선언되었으나, 인라인 스타일이 가장 마지막으로 적용되어 orange가 표시됨.
4. 인라인 스타일 삭제 후 적용 확인:
   • Console에서 document.getElementsByTagName('div')[0].style = ""; 명령어를 사용하여 인라인 스타일을 제거하면, 클래스 .over의 스타일인 aqua 배경색이 적용됨.