UIUX 디자이너, 프론트엔드 학습_CSS 02

저번과 동일하게 이번에도 CSS 개요 파트에 대한 내용을 기입하려 한다.

---

선택자_가상 클래스

• 어떠한 해동을 했을 때 동작하는 개념을 정의한다.
• hover
  • 선택자 요소에 마우스 커서가 올라가 있는 동안 부여되는 성질

• active
  • 선택자 요소에 마우스를 클릭하고 있는 동안 부여되는 성질
• focus
  • 선택자 요소가 포커스 되면 선택되는 성질
• first child

<div class="fruits">
   <span>딸기</span>
   <span>수박</span>
   <div>오렌지</div>
   <p>망고</p>
</div>

• 예시 코드
  • css : .fruits span:first-child { color: red; } 를 부여하면 딸기 부분에 레드 컬러 부여
  • 클래스 선택자 fruit의 span의 형제 요소 중 첫째라면 선택되는 방식
• last child

<div class="fruits">
   <span>딸기</span>
   <span>수박</span>
   <div>오렌지</div>
   <p>망고</p>
   <h3>사과</h3>
</div>

• 예시 코드
  • css : .fruits h3:last-child { color: red; } 를 부여하면 사과 부분에 레드 컬러 부여
  • 클래스 선택자 fruit의 h3의 형제 요소 중 막내라면 선택되는 방식
• nth child
  • abc:nth-child(n)

<div class="fruits">
   <span>딸기</span>
   <span>수박</span>
   <div>오렌지</div>
   <p>망고</p>
   <h3>사과</h3>
</div>

• 예시 코드
  • css : .fruits *:nth-child(2) { color: red; } 를 부여하면 수박 부분에 레드 컬러 부여
  • fruit라는 클래스의 전체(*) 중에서 2번째를 선택한다.
  • 이 외에도 (2n / 2n+1 / n+2) n을 사용하여 다양하게 선택이 가능하다.
    • n은 0부터 시작한다.(zeor-based-nembering)
• not
  • abc:not(xyz)

<div class="fruits">
   <span>딸기</span>
   <span>수박</span>
   <div>오렌지</div>
   <p>망고</p>
   <h3>사과</h3>
</div>

• 예시 코드
  • css : .fruits *:not(span) { color: red; } 를 부여하면 span 태그에 부여된 것을 제외하곤 모든 부분에 레드 컬러 부여

 

선택자_가상 요소

• 가상요소를 사용하면 html을 깔끔하게 관리할 수 있다.
• abc::before
  • 선택자 abc 요소의 내부 앞에 내용(content)을 삽입
  • 가상요소와 content는 하나의 세트

• abc::after
  • 선택자 abc 요소의 내부 뒤에 내용(content)을 삽입
  • 가상 요소와 content는 하나의 세트

 

 

선택자_속성

• attribute - attr(속성 선택자)
  • [abc]
    • 속성 abc를 포함한 요소를 선택한다.
• attr=value
  • [abc="xyz"]
    • 속성 abc를 포함하고 값이 xyz인 요소를 선택한다.

 

 

스타일 상속

• 부모 요소로부터 적용된 스타일이 하위(자식)로 이어지는 것을 말한다.

• html에서 클래스로 animal을 정의 - css 에서 클래스 선택자를 통해 레드 컬러 부여 - animal은 호랑이, 사자, 코끼리 자식 요소들을 갖고 있기에 자식들 모두에게 레드 컬러 부여
• 상속은 컬러뿐 아니라 다른 속성들에도 적용된다.
  • font-style
  • font-weight
  • font-size
  • line-height
  • font-family
  • color
  • text-align
  • ...
• 상속이 되지 않는 요소들도 inherit;를 통해 강제 상속이 가능하다.

 

 

선택자 우선순위

• 선택자 우선순위란, html의 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 css 속성을 우선 적용할지 결정하는 방법이다.
  • 점수가 높은 선언이 우선 된다.
  • 점수가 같으면, 가장 마지막에 해석된 선언이 우선한다.
  • 전체 선택자(*) : 0점
  • 태그 선택자 : 1점
  • class 선택자 : 10점
  • id 선택자 : 100점
  • 인라인 선언(html의 요소에 전역 속성이 style을 직접 추가해서 css 직접 작성하는 것) : 1000점
  • !important :999999999999999999점