CSS
- CSS(Cascading Style Sheets)
- 선택자
- 상속과 초기화
- 결합자, 우선순위
- 단위
- 꾸미기
1. CSS (Cascading Style Sheets)
- 웹 페이지에 스타일과 레이아웃을 적용
- 내부 CSS: 웹 문서 안에 스타일을 작성 (in
head) - 외부 CSS:
head영역 안에<link>태그로 외부의 CSS 파일 로드 - inline CSS: 태그에 직접 스타일 정의 (잘 안쓰임)
주석: /* 작성할 내용 */
- 내부 CSS: 웹 문서 안에 스타일을 작성 (in
2. 선택자
- HTML 문자에서 스타일을 적용할 요소
전체 선택자 ( * )
- 모든 요소에 스타일을 적용할 수 있는 선택자
- 웹 문서 내의 모든 요소에 스타일이 적용됨.
유형 선택자
- HTML 문서의 태그 이름으로 선택
- 같은 태그의 모든 하위 요소에 적용
ID, Class 선택자
- 요소의 ID, Class 속성값에 완전히 동일한 값을 가진 요소에 적용
- ID는
#, Class는.으로 시작
#ID_1 {
do something;
}
.Class_1 {
do something;
}속성 선택자
[]를 사용, 요소가 가진 속성을 선택자로 설정
[href="abc"] {
do somthing;
}- 속성과 값을 동시에 입력하면 값까지 동일한 요서 선택 가능
- 대괄호 앞에 태그를 붙여 더 강력한 범위 설정 가능
a[href]
의사 선택자
- 기존 선택자에 추가하는 특별한 상태를 선택
ls:focus {
do something;
}의사 클래스 / 요소
선택하고자 하는 HTML 요소의 '특별한 상태'를 명시할 때 사용
ex)-:link,-:visited,-:first-child
3. 상속과 초기화
상속 inherit
- 부모 요소의 스타일 값을 이어받아 자식 요소에 적용하는 것
- 상속이 되는 속성과 안되는 속성이 나뉘어져있지만,
inherit을 사용함으로써 부모 요소의 상속이 안되는 값도 상속받을 수 있음
초기화 initial
- 브라우저가 지정한 속성의 초기값을 요소에 적용
- 속성의 초기값 예상이 어렵기 때문에, 쓰는데 주의를 요함
4. 결합자, 우선순위
자손 결합자
- 속성 사이에 한 칸의 공백을 주어 앞 셀렉터의 자식 요소 선택
div span { ...; }자식 결합자
- 위 자손 결합이 하위의 모든 요소에 적용되는 것에 반해, 직계에만 속성이 적용
div > span { ...; } /* 반드시 div 바로 하위계층의 span에만 적용 */인접 형제 결합자
- 앞 셀렉터의 바로 다음에 위치한 형제 요소 선택
a + p { ...; }일반 형제 결합자
- 앞 셀렉터의 다음에 위치한 모든 형제 요소 선택
a ~ p { ...; }우선순위 (명시도)
-
작성 순서, 결합, 선택자에 따라 스타일이 적용되는 우선순위는 변경됨.
기본 우선순위
- inline CSS (제일 강력함)
- ID 선택자
- Class 선택자, 속성 선택자, 의사 클래스
- 유형 선택자 및 가상 요소
-
important: 우선순위를 선점하는 코드- 예상치 못한 버그가 나올 수 있기에 사용을 지양하자.
5. 단위
고정 단위
px: 정확한 크기(pixel)를 나타내야 할 때 사용 (고정값의 가장 일반적 단위)pt: 문서(point) 등에 사용되는 단위 (보통 브라우저의 폰트는 12pt = 16px)
상대 단위
em: 요소의 글꼴 크기에 상대적인 단위, 또한 합성 단위rem: 합성을 회피하기 위한 단위로, 항상 최상위 크기<HTML>에만 영향을 받기에 반응형 웹 생성에 효과적%: 부모의 크기에 따라 상대적으로 백분율vw: viewport width, 화면의 너비에 따라 결정 (1vw = 1%)vw: viewport height, 화면의 높이에 따라 결정
6. 꾸미기
글꼴 꾸미기
font-size : 글자 크기 변경
font-family : 글씨체 변경. 여러 개를 동시에 지정할 수 있고, 지원한다면 앞에서부터 글꼴 적용 (마지막에 sans-serif 작성으로 혹시 글꼴이 아예 없는 상황도 대비
font-weight : 글자 두께 변경
color : 글자 색상 변경
text-align : 글자 가로 정렬 변경 (left, center, right)
line-height : 글자의 줄간격 변경
letter-spacing : 자간 변경. 보통 em 단위로 부모 폰트의 크기에 따라 변경
배경 꾸미기
background-color : 배경 색 지정, currentColor 값을 쓰면 부모 요소의 글꼴 색을 상속받음
background-image : 배경 이미지 지정, url로 받아옴
background-repeat : 배경 이미지 반복을 지정
background-size : 배경 크기 지정, 단일 값 입력시 너비 조정 가능
background-position : 배경 이미지 위치 지정
background : 앞의 배경 이미지 속성을 한번에 적용할 수 있는 단축 속성.
ex) background: red url('이미지 경로') no-repeat right center / contain
