*선택자{속성:값;}
-스타일(CSS)을 적용할 대상(Selector)
-속성: 스타일(CSS)의 종류(Property)
-값: 스타일(CSS)의 값(Value)
*CSS 선언 방식
-내장 방식
-링크 방식
-인라인 방식
-@import 방식
*내장 방식
-<style></style>의 내용(Contents)으로 스타일을 작성하는 방식
*인라인 방식
-요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음)
*링크 방식
-<link />로 외부 CSS 문서를 가져와서 연결하는 방식
-병렬 연결
*@import방식
-CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식
-직렬 연결
*CSS 선택자
-기본 선택자
-복합 선택자
-가상 클래스 선택자
-가상 요소 선택자
-속성 선택자
*기본 선택자
-전체 선택자(Universal Selector): *를 사용해 모든 요소를 선택함!
-태그 선택자(Type Selector): 해당하는 태그 이름인 요소 선택!
-클래스 선택자(Class Selector): HTML class 속성의 값이 해당하는 요소 선택!
-아이디 선택자(ID Selector): HTML id 속성의 값이 해당하는 요소 선택!
*복합 선택자
-일치 선택자(Basic Combinator): 선택자 A와 B를 동시에 만족하는 요소 선택!(span.orange)
-자식 선택자(Child Combinator): 선택자 A의 자식 요소 B를 선택!(ul > .orange)
-하위(후손) 선택자(Descendant Combinator): 선택자 A의 하위 요소 B 선택, '띄어쓰기'가 선택자의 기호!(div .orange)
-인접 형제 선택자(Adjacent Sibling Combinator): 선택자 A의 다음 형제 요소 B 하나를 선택!(.orange + li)
-일반 형제 선택자(General Sibling Combinator): 선택자 A의 다음 형제 요소 모두를 선택(.orange ~ li)
*가상 클래스 선택자
-선택자 뒤에 ":가상이벤트"를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 한다!
*:hover 가상 클래스 선택자(Pseudo-Classes)
-선택자 A 요소에 마우스 커서가 올라가 있는 동안 선택(a:hover)
*:active 가상 클래스 선택자(Pseudo-Classes)
-선택자 A 요소에 마우스를 클릭하고 있는 동안 선택(a:active)
*:focus 가상 클래스 선택자(Pseudo-Classes)
-선택자 A 요소가 포커스 되면 선택(input:focus)
-포커스는 하나의 페이지에서 한 요소만 가능!!!
*탭인덱스(tabindex)
-tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있다!
-이름에서도 알 수 있듯이, Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는 속성이다.
-순서(값)로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않는다.
-포커스는 하나의 페이지에서 한 요소만 가능!!!
*:first-child 가상 클래스 선택자(Pseudo-Classes)
-선택자 A가 형제 요소 중 첫째라면 선택.(.abc span:first-child)
*:last-child 가상 클래스 선택자(Pseudo-Classes)
-선택자 A가 형제 요소 중 막내라면 선택.(.abc h3:last-child)
*:nth-child(n) 가상 클래스 선택자(Pseudo-Classes)
-선택자 A가 형제 요소 중(n)째라면 선택.(.abc *:nth-child(2))
*:not 부정 선택자(Negation) 가상 클래스 선택자(Pseudo-Classes)
-선택자 B가 아닌 A 요소 선택(.fruits *:not(span))
*가상 요소 선택자(Pseudo-Elements)
-앞에 콜론:이 두개 붙음!!
*::before 가상 요소 선택자(Pseudo-Elements)
-선택자 A 요소의 내부 앞!에 내용(Content)을 삽입.(.box::before)
-인라인(글자)요소!
*::after 가상 요소 선택자(Pseudo-Elements)
-선택자 A 요소의 내부 뒤!에 내용(Content)을 삽입.(.box::after)
-인라인(글자)요소!
*ATTR 속성 선택자(Attribute)
-속성 A을 포함한 요소 선택
-속성 선택자를 사용할 때 사용하는 특수문자는 대괄호다!([disabled])
*ATTR=VALUE 속성 선택자(Attribute)
-속성 A을 포함하고 값이 B인 요소 선택!
-[type="password"] => <input type="password" value"1234">
*스타일 상속
-inherit 이라는 값을 통해서 부모 요소가 가지고 있는 값을 상속시켜서 강제적으로 적용 가능!!!
*선택자 우선순위
-우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할 지 결정하는 방법
-점수가 높은 선언이 우선함! 점수가 같으면 가장 마지막에 해석된 선언이 우선함!
-용어가 중요하진 않지만, CSS 우선순위의 점수를 계산하는 것을 "명시도" 라고 부른다!
-!important 키워드를 사용하는 것을 "중요도" 라고 부른다!
-인라인 선언 = 1000점
-상속 = X
-전체 선택자 = 0점
-태그 선택자 = 1점
-Class 선택자 = 10점
-ID 선택자 = 100점
-!important = 999999999점
-전체 선택자(*) < 태그 선택자(div) < Class 선택자(.abc) < ID 선택자(#abc) < 인라인 선언(<p style="color...") < !important
