CSS 개요
CSS(Cascading Style Sheets) : HTML 문서에서 태그를 꾸며줌, 선택자에 적용된 많은 스타일 중 어떠한 스트일로 웹상에 표현할지 결정
- 마크업 언어(HTML)가 실제로 화면에 표시되는 방법을 기술하는 언어
(모양, 색상, 크기, 스타일 .....)
(== HTML 코드가 화면에 어떤 스타일로 보여질 지 지정하는 것) - CSS 선택자(Selctor)
Selector란?
현재 HTML 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열
스타일을 적용하고자 하는 요소를 선택하는 방법
CSS 선택자
태그 선택자
: 현재 HTML 문서 내에 같은 태그를 선택하는 선택자
- 태그명 { css 코드; }id 선택자(#)
: HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
- #id속성값 { css 코드; }class 선택자(.)
: HTML 문서 내에서 같은 class 속성값을 가지는 태그를 모두 선택하는 선택자
- .class선택자 { css 코드; }모든 요소 선택자('*')
: 모든 요소를 선택하는 선택자
- '*' { css 코드; }기본 속성 선택자
: 태그에 작성된 특정 속성을 선택하는 선택자
- 선택자[속성명="속성값"] { css 코드 ; }
1) 선택자는 생략할 수 있다.
2) "속성값" 양쪽의 쌍다옴표("") 는
홑따옴표('')로 변경할 수 있다
자식 선택자
: 지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자
- 선택자1 > 선택자2 { css 코드 ; }
1) 선택자1 : 부모 선택자
2) 선택자2 : 자식 선택자후손(자손) 선택자
: 지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자
- 선택자1 선택자2 { css 코드 ; }
1) 선택자1 : 부모(조상) 선택자
2) 선택자2 : 후손 선택자반응 선택자
-: 사용자의 움직임에 따라 반응하여 스타일이 달라지는 선택자
(마우스 오버, 클릭 유지...)
1) 요소를 클릭하고 있는 경우(:active)
2) 요소에 마우스가 올라가는 경우(hover)상태 선택자
: 입력 양식(input, input 관련 태그)의 상태에 따라 선택되는 선택자
1) :focus -> 요소에 초점이 맞춰졌을 때
2) :checked -> 요소가 체크 되었을 때(radio, checkbox)
3) :enable / :disable
-> 요소가 사용 가능한/불가능한 상태일 때동위 선택자
: 동위 관계(동등한 위치 == 형제 관계) 뒤에 위치한 요소를 선택하는 선택자
A
B
B
1) A선택자 + B선택자 { css 코드 ;}
A 바로 뒤(다음)에 있는 B요소 하나를 선택(+)
2) A선택자 ~ B선택자 { css 코드 ;}
A 뒤에 있는 모든 B 요소를 선택 (~ : 틸드(tilde))문자열 속성 선택자
: 속성값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자
1) 선택자[속성명 ~= "특정값"] { CSS 코드; }
-> 띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성중
속성값이 특정 값을 단어로 포함하는 요소를 선택
2) 선택자[속성명 |= "특정값"] { CSS 코드; }
-> 속성값이 특정 값을 단어로 포함하는 요소를 선택
단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다.
3) 선택자[속성명 ^= "특정값"] { CSS 코드; }
( ^ : 캐럿)
-> 속성값이 특정값으로 시작하는 요소를 선택
4) 선택자[속성명 $= "특정값"] { CSS 코드; }
-> 속성값이 특정값으로 끝나는 요소를 선택
5) 선택자[속성명 *= "특정값"] { CSS 코드; }
-> 속성값이 특정값을 포함하는 요소를 선택일반 구조 선택자
: 형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자로 **위치를 기준으로 구분함 (중요)**
1) :first-child: 자식 요소중 해당 태그인 맨 앞 요소
2) :last-child : 자식 요소중 해당 태그인 맨 뒤 요소
3) :nth-child(수열) : 자식 요소중 해당 태그인 INDEX 번째의 요소
4) :nth-last-child(수열) : 자식 요소중 해당 태그인 역순의 INDEX 번째의 요소형태 구조 선택자
: 선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자
(선택된 요소들을 기준으로 구분)
1):first-of-type : 같이 선택된 형제들 중에서 첫번째 요소
2):last-of-type: 같이 선택된 형제들 중에서 마지막 요소
3):nth-of-type(수열): 같이 선택된 형제들 중에서 수열번째 모든요소
4):nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열번째 모든요소부정 선택자
: 괄호 내 선택자를 제외한 나머지 요소를 선택
( 선택자1:not(선택자2) )기타 선택자
:only-child : 특정 요소의 자식이 하나밖에 없을 때 선택
:only-of-type : 특정 요소의 자식 중 지정된 형태와 같은 자식 요소가 하나만 있을 때 선택
:empty : 자식 요소가 없는 요소를 선택
- 자식 요소 : 태그, 글자, 띄어쓰기 모두 자식 요소라고 함.CSS 선택자의 우선순위
- 기본적으로 css 속성은 style태그 또는 css 파일에 작성된 순서대로(위->아래) 해석이 진행되지만, 같은 요소에 여러 css 속성이 설정되는 경우 우선 순위가 적용된다.
* 알아둬야 할 것
1) 동일한 우선 순위로 css 속성이 설정된 경우
-> 제일 마지막에 작성된 css 속성이 반영된다
2) 여러 선택자를 이용해서 같은 요소를 선택하더라도
지정되는 css 속성이 다르면 모두 반영된다.
1순위: css속성: 속성값 !important;
2순위: inline-style 속성 (요소에 직접 작성되는 style속성)
3순위: 아이디 선택자(#아이디 속성명)
4순위: 클래스 선택자(.class 속성명)
5순위: 태그 선택자 (태그명)