1. 선택자의 이해
개요
HTML 문서에서 CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자가 존재
일반 선택자는 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자로 분류
복합 선택자는 자식 선택자, 하위선택자, 인접 형제 선택자, 일반 형제 선택자로 분류
그 외에도 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 존재
- 전체 선택자 : * {}
- 타입 선택자 : h1, h2, h3 {}
- 클래스 선택자 : .className {}
- ID 선택자 : #idName {}
- 하위 선택자 : E1 E2 {}
- 자식 선택자 : E1>E2 {}
- 인접 형제 선택자 : E1+E2 {}
- 일반 형제 선택자 : E1~E2 {}
가상 클래스 선택자 요소
가상 클래스 선택자는 User Agent가 제공하는 가상의 클래스를 지정
사용법 : 가상 클래스 {}
- :link : 방문하지 않은 링크를 선택
- :visited : 방문한 링크를 선택
- :hover : 지정된 요소에 마우스가 올라간 경우 선택
- :active : 지정된 요소가 활성화 된 경우 선택
- :focus : 지덩된 요소가 포커스를 가질 경우 선택
- :fist-child : 지정된 요소 중 부모의 첫 번째 자식 선택
- :last-child : 지정된 요소 중 부모의 마지막 자식 선택
- :nth-child(n) : 지정된 요소 중 n번째 자식 선택
- :enabled : 지정된 요소가 enabled인 경우 선택
- :disable : 지정된 요소가 disabled인 경우 선택
- :checked : 지정된 요소가 checked인 경우 선택
속성 선택자 요소
- [A] : A속성이 포함된 엘리먼트 선택
- [A=V] : A속성 값이 V와 정확히 일치하는 엘리먼트 선택
- [A~=V] : A속성 값이 V단어를 포함하는 엘리먼트 선택
- [A^=V] : A속성 값이 V로 시작하는 엘리먼트 선택
- [A*=V] : A속성 값이 V를 포함하는 엘리먼트 선택
- [A$=V] : A속성 값이 V로 끝나는 엘리먼트 선택
- [A|=V] : A속성 값이 정확히 V이거나 V-으로 시작하는 엘리먼트 선택
CSS 규칙 적용 우선순위
같은 엘리먼트에 두 개 이상의 CSS 규칙이 적용된 경우 마지막 규칙, 구체적인 규칙, !improtant가 우선 적용
CSS 규칙 들 중 하단에 작성된 규칙이 마지막 규칙
p {} 보다 p b {}가 더 구체적이므로 구체적인 것 적용
속성 값 뒤에 !important를 작성하면, 같은 엘리먼트에 대해 보다 우선적으로 스타일 적용
2. Font 속성
개요
<font> tag 관련 속성은 CSS property로 대체 가능하므로 추천하지 않는 기능
CSS Font 관련 속성은 text의 글꼴, 굵기, 크기, 스타일등을 지정
font-family, font-size, font-style, font-variant, font-weight, font로 구성
- font-family : 글꼴 지정
- font-size : 글자 크기 지정
- font-style : 글자 스타일 지정
- font-variant : 소문자를 작은 대문자로 변형
- font-weight : 글자 굵기 지정
- font : font에 관한 속성을 한번에 지정하는 단축형 속성
3. Text 속성
개요
CSS Text 관련 속성은 글자, 공간, 단어, 문단들이 보여지는 속성을 정의
text-ailgn, text-decoration, text-indent, text-transform, white-space 등으로 구성
들여쓰기를 위해 문자를 사용하는 것이 아니라 text-indent 속성을 사용하여 들여쓰기 적용.
- text-align : text 정렬 방식 지정
- test-decoration : text 장식 지정.
- text-ident : Text-block안 첫 라인의 들여쓰기 지정.
- text-transform : text 대문자화
- white-space : 엘리먼트 안의 공백 지정
- vertical-align : 수직 정렬 지정
- letter-spacing : 문자 간의 space 간격을 줄이거나 늘림.
- word-spacing : 단어 간의 간격 지정
- line-height : 줄 간격 지정
- color : text 색상 지정
4. 사용자 인터페이스 속성
개요
화면에 출력될 엘리먼트들에 디자인 요소를 추가하는 속성
커서의 모양이나 리스트 형태를 변경
문서의 배경색과 배경 이미지를 변경
엘리먼트가 화면에 출력되는 방식을 조정
- cursor : 사용자 환경의 마우스 모양을 변경
- classification : 리스트의 글머리 기호를 변경
- display : 엘리먼트가 화면에 출력되는 방식을 조정
- backgrond-color : 배경색을 지정
- background-image : 배경을 이미지로 지정
- background-attachment : 배경 이미지를 고정하거나 scroll여부를 지정
- background-repeat : 배경 그림의 반복 여부를 지정
- background-position : 배경 그림의 위치를 지정
- background : 배경 관련 속성을 한번에 지정
display
화면에 나오는 엘리먼트는 inline과 block 두 가지로 분류
5. 테이블 & 테두리 속성
개요
<table> 엘리먼트의 관련 속성은 테이블의 너비나 높이를 지정하고, Cell 내부 내용을 정렬
관련 속성은 table-layout, width, height, text-align, vertical-align 등이 있다.
테두리 관련 속성은 테두리 모델을 설정하여, 테두리 스타일과 너비 등을 지정.
관련 속성은 border-collapse, border-style, border-width, border-color 등이 있다.
6. 요약
CSS 선택자는 HTML문서 내에서 스타일을 적용하고자 하는 element를 선택
일반 선택자, 복합 선택자, 가상 클래스 선택자, 가성 엘리먼트 선택자, 속성 선택자가 존재.
포지셔닝 속성은 HTML문서 내에서 element의 화면 배치나 스크롤 여부 등을 설정
font 속성은 글꼴, 크기 등의 글자 꾸밈을 담당
text 속성은 여백, 들여쓰기 정렬 등의 공간 설정 기능을 담당