CSS 란?
- HTML, XHTML, XML과 같은 문서의 스타일를 꾸미는 스타일 시트 언어
- Cascading Style Sheets
- 선택자(Selector), 속성(Property), 값(Value) 을 이용하여 구성
1
2
3
4
선택자 {
속성 : 값;,
속성 : 값;
}
- html 내부에 스타일을 작성하는 것에 비해 매우 효율적인 방법
이 포스트에서는 선택자에 대해서만 정리하고
css의 속성과 값은 활용(클론 코딩처럼 실제 사용) 하면서
알게 된 점을 기술하는 방식으로 정리할 예정
선택자 (Selector)
- 선택자는 html의 어느 태그 혹은 영역에 스타일을 줄지 알려주기 위해 필요
- 같은 선택자의 다른 스타일의 경우 후행하는 코드가 우선순위를 가짐(덮어쓰기)
- 각 선택자마다 우선순위 점수가 있고 합산된 점수가 높은 선택자가 적용됨
- 우선순위와 [점수]
- !important [∞]
- 인라인 스타일 [요소기준우선]
- Id 선택자 [100]
- Class 선택자 [10]
- 속성기반 선택자 [10]
- 가상 클래스 [10]
- 가상 요소 [10]
- 태그 선택자 [1]
- 전체 선택자 [0]
혼용 방식의 점수
단일 선택
- * 전체 선택자(Universal)
- 모든 요소를 선택
- 우선순위 점수 [0]점
- 태그 선택자(Type)
- 해당 태그를 선택
- 우선순위 점수 [1]점
- 클래스 선택자(Class)
- 해당 클래스를 가진 요소를 선택
- 우선순위 점수 [10]점
- 아이디 선택자(Id)
- 해당 아이디를 가진 요소를 선택
- 우선순위 점수 [100]점
다중 선택
우선순위 점수는 [선택자1+선택자2+…]점이 된다
- 일치 선택자(Basic Combinator)
- 두개의 선택자를 동시에 만족하는 요소를 선택
- 두개의 선택자를 붙여서 사용한다 (선택자1선택자2)
- div.newclass의 경우 [1+10]점
- 자식 선택자(Child Combinator)
- 선행 선택자의
자식요소 중 후행 선택자에 해당하는 요소 - 선택자 사이에 > 를 입력한다(공백의 유무에 영향 없음)
- div > .newclass의 경우 [1+10]점
- 선행 선택자의
- 후손 선택자(Descendant Combinator)
- 선행 선택자의
후손요소 중 후행 선택자에 해당하는 요소 - 선택자 사이에 공백을 입력한다(공백의 유무에 영향 있음)
- div .newclass의 경우 [1+10]점
- 선행 선택자의
- 인접 형제 선택자(Adjacent Sibling Combinator)
- 선행 선택자의
다음 형제요소 중 처음으로 해당하는 요소 하나를 선택 - 선택자 사이에 + 를 입력한다(공백의 유무에 영향 없음)
- li.newclass + li의 경우 [1+10+1]점
- 선행 선택자의
- 일반 형제 선택자(General Sibling Combinator)
- 선행 선택자의
다음 형제요소 중 후행 선택자에 해당하는 요소를 전부 선택 - 선택자 사이에 ~ 를 입력한다(공백의 유무에 영향 없음)
- li.newclass ~ li의 경우 [1+10+1]점
- 선행 선택자의
- 가상 클래스 선택자(Pseudo-Classes)
- 선행 선택자에 :를 붙인 후 hover, active, focus 등의 가상 클래스를 붙인다
- hover의 경우 지정된 요소에 마우스를 올리면 해당 스타일이 적용
- active의 경우 클릭을 누른 상태일 때 해당 스타일이 적용
- focus는 클릭 후 focus 되어있는 동안 스타일이 적용
- first-child, last-child, nth-child는 해당 요소 중
몇 번째 자식에게 스타일을 적용할지 정할 수 있다 - not()는 해당 요소 중 ()안의 것이 아닌것에 스타일이 적용
()안에는 태그, 클래스등 선택자가 동일하게 들어간다 - li:hover의 경우 [1+10]점
- 가상 요소 선택자(Pseudo-Elements)
- 선행 선택자에 ::을 붙인 후 before, after, placeholder등을 붙인다
- before의 경우 선택한
요소의 내부앞에 content를 삽입 - after의 경우 선택한
요소의 내부뒤에 content를 삽입 - placeholder는 input태그의 필드 안 힌트 텍스트에 스타일을 적용
- div::before의 경우 [1+10]점
- 속성 선택자(Attribute)
- 지정한 속성을 가진 요소를 선택
- [] 해당 속성을 가진요소 전부 스타일 적용
- [속성=”값”] 해당 속성과 값을 가진 요소 전부 스타일 적용
- 속성뒤에 ~ (여러 값이 있는경우 지정한 값이 포함되어있다면 선택)
- 속성뒤에 | (값, 값-oo 의 형태인 경우 포함하여 선택)
- 속성뒤에 ^,$ (시작 단어와 끝단어가 일치하면 포함하여 선택)
- div[class^=”m”] 이면 m, m-n, m_n, m n이 포함(n_m, n m 비포함)
- a[target=”_blank”]의 경우 [1+10]점