HTML,CSS-style 태그 선택자 적용 우선순위

선택자(Selector) 유형

• 기본 선택자
  • 전체 선택자(*), 요소(tag) 선택자
  • 클래스(class) 선택자, 아이디(id) 선택자, 속성(attr) 선택자
• 결합자(Combinators)
  • 자손 결합자, 자식 결합자

<style>
  /* 전체 선택자 */
  * {
    color: red;
  }

  /* 요소 선택자 */
  h2 {
    color: orange;
  }

  h3,
  h4  {
    font-size: 10px;
  }

  /* 클래스 선택자 */
  .green {
    color: green;
  }

  /* id 선택자 */
  #purple {
    color: purple;
  }

  /* 자식 결합자 */
  .box > p {
    font-size: 30px;
  }

  /* 자손 결합자 */
  .box p {
    color: blue;
  }
</style>

위에 코드처럼 전체는 * 로 표시

요소는 h2, div, span 등 요소의 이름으로 표시 그리고 쉼표(,)를 이용해서 여러개를 한번에 묶어서 사용도 가능합니다.

클래스는 . + 클래스명 으로 표시 ex) .box

id 선택자는 id 앞에 #을 붙여서 표시

---

자식결합자는 직속?인 하위 요소를 고를때 사용합니다. ('>') 꺾쇠 사용

• .box > p 는 box 클래스의 바로 하위 요소인 p들을 선택하겠다는 의미

자손 결합자는 직속여부에 관계없이 하위 요소를 고를 때 사용합니다. (' ') 공백 사용

• .box p 는 box 클래스의 하위요소중 p들을 선택하겠다는 의미

---

CSS적용 우선순위 (cascading order)

• CSS 우선순위를 아래와 같이 그룹을 지어볼 수 있다.
  • 1. 중요도 (Importance) - 사용시 주의

                      - !important

                 

                  2.우선 순위(Specificity)

                     

                      - !important > 인라인 > id > class, 속성 > 요소

 

 

 

똑같은 선택자를 적용해서 중복으로 style 을 줬다면 더 밑에 있는 코드가 작동한다.

(위에서부터 읽기때문에 아래 코드로 갱신이 됨)

---

CSS 상속

• CSS는 상속을 통해 부모 요소의 속성을 자식에게 상속한다.
  • 속성(property) 중에는 상속이 되는 것과 되지 않는 것들이 있다.
  • 상속 되는 것 예시
  • 예) Text 관련 요소(font,color,text-align), opacity, visibility 등
  • 상속 되지 않는 것 예시

       예) Box 모델 관련 요소(width, height, margin, padding, border, box-sizing,             display), position 관련 요소(position, top/bottom/right/left, z-index) 등

---

 

 

위에 것들을 전부 외워서 하기는 쉽지않다.

html, css 의 바이블 MDN 에서 확인해보자!