CSS

• Cascading Style Sheets
• html의 요소가 표시되는 방법, 문서의 스타일을 지정하는 언어

형식

• \의 \
• .css 파일을 stylesheet로 \로 연결해서 사용

선택자 {
  속성 : 값;
  속성 : 값;
  ...
}
/* 선택자를 여러 개 줄 수 있음*/
선택자1, 선택자2 {
  속성 : 값;
  속성 : 값;
}

선택자

종류	표현	설명
전체	*	html문서 내에 모든 요소에 적용하기 위한 선택자
태그	태그명	선택한 태그 모두에 적용하는 선택자
ID	#아이디명	해당 id명을 갖는 요소에 스타일 적용
Class	.클래스명	해당 class에 해당되는 요소들에 스타일 적용
복합	요소.클래스명	해당 요소 중 클래스명이 일치하는 요소들에 스타일 적용
조상선택자 후손선택자	조상 선택자에 후손 요소들 중 후손선택자와 일치하는 요소에 스타일 적용
부모선택자 > 자식선택자	부모 선택자에 자식 요소중 자식 선택자와 일치하는 요소에 스타일 적용
형제요소 +(~) 형제요소	인접(+)하거나 형제되는(~)요소를 선택
가상 클래스	요소:가상클래스	해당되는 요소의 특정 상태나 구조적으로 특정 요소에만 스타일을 적용

가상 클래스

동적 선택자
:link	방문하지 않은 상태의 링크
:visited	이미 방문한 링크
:hover	해당 요소에 마우스가 올라온 상태
:active	해당 요소가 선택된 상태/td>
:focus	해당 요소에 포커스된 상태
구조 가상 클래스
:nth-child(n)	부모의 n번째 자식 중 일치하는 요소
:nth-of-type(n)	부모의 타입이 일치하는 자식 중 n번째 요소
:first-child	첫번쨰 자식 요소
:last-child	마지막 자식 요소
가상 요소
::before	해당 요소 앞 공간을 선택
::after	해당 요소 뒤 공간을 선택
부정 선택자
:not()	()의 선택자를 제외하고 선택

속성 선택자

인라인 CSS 적용 방법

• 해당 요소의 sytle 속성으로 적용

<div style="background-color:red;"></div>

CSS 우선순위

종류	점수	내용
!important	-	인라인 스타일을 무시하는 예외
인라인 css	1000점	태그 안에서 style요소로 주는 경우, 우선 순위가 가장 높음
id 선택자	100점	id명(#) 선택자로 준 CSS
class 선택자	10점	class명(.) 선택자로 준 CSS
의사 클래스	10점	(:의사클래스)어떤 요소의 특정 상황에 스타일을 주는 가상 클래스
태그 선택자	1점	태그명을 선택자로 준 CSS
의사 요소	1점	(::의사요소)요소의 특정 부분에 스타일을 적용하기 위해 주는 가상의 요소
*	0점	html 내 모든 요소에 스타일을 적용, 우선 순위가 가장 낮음

div{} /* 1점 */
div p{} /* 1 + 1 = 2점 */
.myClass{} /* 10점 */
div#myId{} /* 1 + 100 = 101점 */
div{color:red !important;} /* 최우선 */