CSS란?
웹페이지를 구성하는 3가지 요소
- 구조와 내용을 담당하는 HTML
- 디자인을 담당하는 CSS
- 페이지의 동작을 담당하는 JavaScript
중에서 디자인을 담당하는 요소.
- style - 정해진 속성을 입력해서 웹 페이지를 꾸미는 것
- stylesheet - style을 모아서 정리해 둔 것
입력방식
1. 인라인 방식
<p style="스타일 내용"></p>태그에 style 속성을 주어 태그에 명시하여 적용하는 방식
2. 내부 스타일시트 적용방식
<style>
스타일 적용 내용
</style>HTML 문서 내에 <style></style> 태그로 적용하는 방식
3. 외부 스타일시트 적용방식
<link href="CSS파일 위치" rel="stylesheet" type="text/css"/>HTML문서 외부에 따로 CSS 파일을 준비, 불러와서 적용하는 방식
스타일 구조
- 선택자 { style속성 : 속성값 ; }
선택자
- 전체 선택자 : *
- 태그 선택자 : HTML 태그이름
- 아이디 선택자 : #"HTML 태그에 부여한 ID"
- 클래스 선택자 : ."HTML 태그에 부여한 Class"
- 기본속성 선택자 : [ 속성이름 ]
- 속성값 중 특정 속성값을 가진 태그 선택하기
- [속성 = "속성값"] 속성 값이 입력한 값과 같은 속성을 가진 태그들을 검색하여 선택
- [속성 ^= "속성값"] 속성 값이 입력한 값으로 시작하는 태그들을 검색하여 선택
- [속성 $= "속성값"] 속성 값이 입력한 값으로 끝나는 태그들을 검색하여 선택
- [속성 *= "속성값"] 속성 값이 입력한 값을 포함하는 태그들을 검색하여 선택
- [속성 ~= "속성값"] 속성 값 전후에 공백(띄어쓰기)을 포함하여 검색하여 선택
- [속성 ~= "www"] 일경우 속성값이 "www aaa bbb", "aaa www bbb", "aaa bbb www" 모두 선택됨
- [속성 |= "속성값"] 속성값이 입력해 준 값이거나, 입력해준 값 바로 다음 "-" 이 붙는 태그들을 검색하여 선택
- 속성값 중 특정 속성값을 가진 태그 선택하기
- 자손선택자 : > 선택자의 자손을 선택
- 후손선택자 : ' (공백)' 선택자의 후손을 선택
- 동위선택자 : 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용
- 선택자A+선택자B : A선택자를 바로 위 형으로 둔 B선택자를 선택
- 선택자A~선택자B : A선택자를 형으로 둔 모든 B선택자
- 상태 선택자 : 주로 input 태그의 현재 상태에 따라 선택하는 선택자
- input태그:checked : checked 상태의 input태그를 선택
- input태그:focus : focus 상태의 input태그를 선택
- input태그:enabled : 사용가능한 input태그를 선택
- input태그:disabled : 사용불가능한 input태그를 선택
- 일반 구조 선택자 : 특정 위치에 있는 태그 선택 (위치로만 구분)
- :first-child : 형제 관계 태그 중 첫번째 태그 선택
- :last-child : 형제 관계 태그 중 마지막 태그 선택
- :nth-child(n) : 앞에서 n번째 위치한 태그 선택
- :nth-last-child(n) : 뒤에서 n번째 위치한 태그 선택
- 형태 구조 선택자 : 특정 위치에 있는 태그 선택 (태그 별로 구분)
- :first-of-type : 형제 관계 태그 중 첫번째 태그 선택
- :last-of-type : 형제 관계 태그 중 마지막 태그 선택
- :nth-of-type(n) : 앞에서 n번째 위치한 태그 선택
- :nth-last-of-type(n) : 뒤에서 n번째 위치한 태그 선택
- 문자 선택자 : 태그 내부에 위치한 문자열을 선택하는 선택자
- 선택자::first-letter : 첫 번째 글자를 선택
- 선택자::first-line : 첫 번째 줄을 선택
- 선택자::before : 태그 내부에 위치한 문자열 앞을 선택 ->content 라는 style속성과 속성값으로 문자열 앞에 내용을 추가 할 수 있음
- 선택자::after : 태그 내부에 위치한 문자열 뒤를 선택 -> content라는 style속성과 속성값으로 문자열 뒤에 내용을 추가 할 수 있음
- 부정 선택자
- A선택자:not(B선택자) : A선택자 중 B선택자가 아닌 태그들을 선택