CSS 기본 1

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다.

또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다.

 

타입 선택자에 경우 스타일을 지정한 태그를 사용한 모든 요소에 적용이 된다.

클래스, id선택자에 경우 해당 클래스와 id를 사용한 요소만 적용이 되는데 둘의 차이점은 클래스는 여러 요소에 사용할 수 있지만, id는 한번만 사용이 가능하다는 점이 있다.

 

스타일 우선 순위 

상황에 따라 같은 태그나 요소에 여러 스타일이 중복되어 적용될 경우가 있다. 이때는 스타일에 우선 순위 기준으로 높은 우선 순위를 갖은 스타일이 적용된다. 

 

스타일 우선 순위는 중요도, 적용 범위, 코드 순서에 따라 달라진다.

 

1. 중요도에 따른 순위 : 사용자 스타일 >> 제작자 스타일 >>브라우저 스타일

스타일을 지정하지 않았을 경우 브라우저에서 미리 정해진 스타일로 표현이 된다. 하지만 css코드를 통해 문서 제작자가 스타일을 지정할 경우 지정된 스타일로 송출이 된다. 이 화면을 보고 있는 사용자가 설정을 변경하면 그 변경에 맞춰 화면이 나타나게 된다.

 

2. 적용 범위에 따른 순위 : !important >> 인라인 스타일 >> id스타일 >> 클래스 스타일 >> 타입 스타일

중요도가 동일하다면 적용 범위가 좁을수록 우선 순위가 높아진다.

스타일 규칙에 !important를 붙이면 다른 스타일보다 우선 순위가 높다. 순서대로 태그안에 스타일을 입력하는 인라인 스타일, 한번만 사용가능한 id스타일 특정 요소를 지정하지만 여러번 사용할 수 있는 클래스 스타일, 지정된 태그 전체를 변경하는 타입 스타일 순으로 중요도가 높다.

 

3. 작성 순서에 다른 순위

스타일 중요도와 적용범위가 같다면 정의한 코드 순서에 따라 우선순위가 정해진다. 쉽게 말하면 나중에(밑에)작성한 스타일이 기존에 스타일을 덮어쓰게 된다.

 

*스타일 상속*

문서에서 태그는 포함관계에 따라 자식/부모 태그를 가지게 된다. 자식 태그에 별도에 스타일을 지정하지 않았다면 부모에 지정한 스타일을 자식에게 상속하게 된다.