[CSS] Chapter 3. CSS 선택자(Selector) 및 선언 방법

1. CSS 선택자(Selector) 구성 및 설정

*	공용선택자, 전체선택자	모든 엘리먼트를 선택
E	엘리먼트 선택자, 태그 선택자, 타입 선택자	E 엘리먼트를 선택
.	클래스 선택자	html 에서만 사용할 수 있으며, 예를 들어 div.warning 은 warning 이라는 클래스를 가지고 있는 div 엘리먼트를 선택
#	아이디 선택자	예를 들어, #myId 는 myID 를 아이디 속성의 값으로 사용하는 엘리먼트를 선택
E>F	자식 선택자	E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택
E F	자손 선택자, 후손 선택자, 하위 선택자	E 엘리먼트의 하위에 있는 F 엘리먼트를 선택하게 됨. 이 경우 특이한 점은, E 와 F 사이에 다른 엘리먼트가 포함되어 있더라도 선택 대상에 해당한다는 것
E+F	인접 선택자, 형재자매 선택자	E 와 F 가 서로 상하위 관계가 아닌, 인접해 있는 형제 관계인 경우 선택
E:action	동적 선택자, 가상 선택자, 상태 선택자	사용자 액션이 적용되는 상황에 따라 선택 여부가 결정됨. 예를 들어, button:hover 는 버튼 위에 마우스 커서가 머물게 되면 이 상황에서만 선택이 이루어지게 됨

 

2. CSS 선언 방법

외부 선언 (External Linked Style)

• HTML Document 외부에 별도의 CSS 파일을 생성하여 내용을 구성함 (확장자 : *.css). 이 CSS 를 적용할 문서에는 를 활용하여 외부의 CSS 를 해당 문서에 적용할 수 있도록 처리

문서 안에 포함하여 선언 (Embedded Style)

• HTML Document 내부에과 같이 기술하여 스타일을 적용시키도록 처리

엘리먼트에 직접 선언 (Direct, Inline Style)

• 스타일을 적용할 태그 (엘리먼트)에 직접 style="적용할스타일내용" 형식으로 기술하여 처리. 대상에 직접 적용하는 방식이기 때문에 선택자는 기술하지 않음 → 인라인 스타일 방식이 가장 우선순위로 적용되며, 그 다음 우선순위로는 외부/내부 선언의 마지막 스타일 시트가 적용됨

@import 방식

• 다른 스타일 시트에서 또 다른 스타일을 가져올 때 사용. ex.) @import url("css/importStyle.css")

⚠️ link 방식은 여러 .css 파일을 병렬방식으로 동시에 로딩하며 불러오며, @import 방식은 직렬방식으로 순차적 로딩하며 불러오기 때문에 상황에 맞게 사용해야 함