CSS 기초 정리

CSS 선택자

CSS 선택자에는 다음과 같은 선택자가 있습니다.

 

[기본 선택자]

• * : 전체 선택자 (모든 요소를 선택)
• div : 태그 선택자 (태그 이름이 div인 요소 선택)
• .ex : 클래스 선택자 (HTML class 속성의 값이 ex인 요소 선택)
• #ex : 아이디 선택자 (HTML id 속성의 값이 ex인 요소 선택)

[복합 선택자]

• div.ex : 일치 선택자 (태그 선택자와 클래스 선택자 ex를 동시에 만족하는 요소 선택)
• ul > .ex : 자식 선택자 (태그 선택자의 자식 요소 중 클래스 선택자가 ex인 요소 선택)
• div .ex : 하위 선택자 (선택자의 하위 요소 중 클래스 선택자 ex인 요소 선택)
• .ex + div : 인접 형제 선택자 (선택자 ex의 다음 형제 요소 div 하나를 선택)
• .ex ~ div : 일반 형제 선택자 (선택자 ex의 다음 형제 요소 div 모두를 선택)

[가상 클래스 선택자]

• .ex:hover : 선택자가 ex인 요소에 마우스 커서가 올라가 있는 동안 선택
• .ex:actice : 선택자가 ex인 요소에 마우스로 클릭하고 있는 동안 선택
• .ex:focus : 선택자가 ex인 요소가 포커스가 되면 선택 (데이터를 입력받는 요소)

*가상 선택자 focus의 경우 데이터를 입력 받는 요소에 사용이 가능하지만, 데이터의 입력이 불가능한 요소에 tabindex 속성을 주면 focus 사용이 가능합니다.  (ex. <div tabindex=""></div>)

 

* tabindex : Focus가 될 수 있는 요소를 만들 수 있으며, Tab 키를 사용해 Focus 할 수 있는 순서를 지정하는 속성입니다.

순서(값)로 -1이 아닌 다른 값을 넣는 것은 논리적 흐름을 방해하기 때문에 권장하지 않습니다.

 

* Focus는 한 페이지에 하나의 요소에만 적용 가능합니다.

• .ex:first-child : 선택자가 ex인 형제 요소 중 첫 번째에 해당하는 요소 선택
• .ex:last-child : 선택자가 ex인 형제 요소 중 마지막에 해당하는 요소 선택
• .ex:nth-child(n) : 선택자가 ex인 형제 요소 중 n번째에 해당하는 요소 선택
• .ex:not(div) : 선택자가 div가 아니고 선택자가 ex인 요소 선택

[가상 요소 선택자]

• .ex::before  : 선택자가 ex인 요소의 내부의 앞에 내용을 삽입 (content를 사용하여 내용 삽입 가능하며 삽입되는 요소는 인라인 요소에 해당)
• .ex::after : 선택자가 ex인 요소의 내부의 뒤에 내용을 삽입

* 가상 요소 선택자 사용 시 content 속성 사용은 필수입니다.

 

[속성 선택자] - 속성을 포함한 요소 선택

• [disabled] : 비활성화된 요소를 선택
• [type = "password"] : 타입 속성의 값이 password인 요소를 선택

 

 

 

스타일 상속

부모 요소에서 설장한 CSS들 중 자식 요소에 상속되는 속성들은 다음과 같습니다.

• font-style : 글자 기울기
• font-weight : 글자 두께
• font-size :  글자 크기
• line-height : 줄 높이
• font-family : 폰트(서체)
• color : 글자 색상
• text-align: 정렬

               ...

등의 글자 관련 속성들이 상속됩니다. (모든 글자 속성이 상속되는 것은 아닙니다!)

 

 

 

선택자 우선순위

우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법입니다.

1. 점수가 높은 선언이 우선됩니다.
2. 점수가 같으면, 가장 마지막에 해석된 선언이 우선됩니다.

• !important : 99999999999점
• HTML 요소의 style 속성 인라인 선언 : 1000점
• id 선택자 : 100점
• class 선택자 : 10점
• 태그 선택자 : 1점
• 전체 선택자 0점

*부정선택자 :not는 점수 계산을 하지 않습니다!