CSS 기초, 기본 구성과 결합자 종류 알아보기

 

CSS 코드의 기본 구성

Selector는 tag, id, class 등 바꾸고자 하는 타겟

Properties는 바꾸고자 하는 옵션, Value는 그 옵션의 값

 

일반적으로 CSS는 부모의 스타일이 자식에게 상속 (inheritance)

여기에 다양한 Rules를 추가하면서 자연스럽게 충돌하게 되는데,

이걸 잘 설계해서 스타일이 잘 적용될 수 있도록 하는 것이 핵심

 

반영 순서

1) tag 2) class 3) id 4) inline style (html 코드에 직접 style 코드 넣기)

4로 갈수록 가장 먼저 적용

하지만 inline style의 경우 코드 유지 보수하기 힘듬

 

결합자 (Combinators)

See the Pen CSS practice by woongwoongs (@woongwoongs) on CodePen.

1) Descendant(자손, 후예) Combinator

Tag Tag 조합으로, 어느 Level에 위치해 있던 상관 없이 적용

 

2) Child Combinator

Tag > Tag 조합으로 바로 밑 child일 때 적용됨

div1_1의 아이는 직접 child가 아니기 때문에 차마 녹색으로 변경되지 않음

 

3) Adjacent Sibling Combinator

Tag+Tag 조합으로 인접한 Tag정보가 일치할 때 적용됨

h1 바로 밑의 p코드만 스타일이 적용될 수 있었음

 

4) General Sibling Combinator

Tag~Tag 조합으로 Adjacent Sibling과 다르게 밑의 p코드도 스타일이 변경될 수 있었음

 

 

참고 자료

Combinators - Learn web development | MDN