[CSS] CSS 적용 및 선택자

CSS

CSS 적용방법

적용 우선순위

소스 순서에 따른 순위
- 나중에 작성된 스타일을 우선 적용시킨다
적용 방법에 따른 순위
- !important > 인라인 스타일 > id 스타일 > class 스타일 > 태그 스타일
- 인라인 > 내부 > 외부 스타일 순으로 적용의 우선순위를 가지게 된다

[ 인라인 스타일 방식 ]

<h1 style="color: aquamarine">CSS 인라인 스타일</h1>

스타일을 부여하고자 하는 요소 내에 style 속성을 직접적으로 바로 기입한다
스타일 적용에 대해 가장 높은 우선순위를 가진다

[ 내부 스타일 방식 ]

<head>
  <style>
    p {
      text-align: center;
    }
  </style>
</head>

일반적으로 head 태그 내부에 style 태그를 작성한다
현재 문서에 적용시키고자 하는 스타일 정보들을 style 태그 내부에 기입하는 방식이다
html 문서 내부에 스타일 정보를 저장하는 방식이기도 하다

[ 외부 스타일 시트 ]

<head>
  <link href="css 파일 경로" rel="stylesheet" type="text/css" />
</head>

일반적으로 head 태그 내부에 link 태그를 작성한다
link 태그를 이용하여 외부에 저장해둔 css 파일을 읽어오게 된다

CSS 선택자

기본선택자들

구분	내용	설명
전체 선택자	*	모든 요소들을 전부 선택한다
태그 선택자	태그(h1, p, li 등)	해당 문서내의 같은 태그를 모두 선택한다
아이디 선택자	#아이디명	id속성값으로 해당 아이디를 가진 요소를 선택한다
클래스 선택자	.클래스명	class 속성값으로 해당 클래스명을 가진 요소들을 선택한다
후손 선택자	선택자 선택자	공백으로 구분하며 하위 요소들 전부를 선택한다
자손 선택자	선택자 > 선택자	바로 하위인 요소들을 선택한다
속성 선택자	선택자[속성 = 값]	제시한 속성과 값이 일치하는 요소
	선택자[속성 \|= 값]	해당 속성의 값이 제시한 값으로 시작하는 요소(단어 단위)
	선택자[속성 ^= 값]	해당 속성의 값이 제시한 값으로 시작하는 요소(글자 단위)
	선택자[속성 $= 값]	해당 속성의 값이 제시한 값으로 끝나는 요소
	선택자[속성 ~= 값]	해당 속성의 값에 제시한 값이 포함되어있는 요소(단어 단위)
	선택자[속성 *= 값]	해당 속성의 값에 제시한 값이 포함되어있는 요소(글자 단위)
동위 선택자	선택자 + 선택자	앞 선택자 요소 뒤에있는 뒷 선택자 하나만을 선택한다
동위 선택자	선택자 ~ 선택자	앞 선택자 요소 뒤에있는 모든 뒷 선택자 요소를 모두 선택한다

그외 선택자

구분	내용	설명
일반 구조 선택자 (위치로 구분)	선택자:first-child	형제 관계 태그 중 첫 번째 태그
	선택자:last-child	형제 관계 태그 중 마지막 태그
	선택자:nth-child(수열)	형제 관계 태그 중 수열 번째 태그(ex. 2 : 두번째, 2n : 짝수번째인 모든 요소)
	선택자:nth-last-child(수열)	형제 관계 태그 중 뒤에서 수열 번째 태그
형태 구조 선택자 (태그별로 구분)	선택자:first-of-type	형제 관계 태그 중 첫 번째 태그
	선택자:last-of-type	형제 관계 태그 중 마지막 태그
	선택자:nth-of-type(수열)	형제 관계 태그 중 앞에서 수열 번째 태그
	선택자:nth-last-of-type(수열)	형제 관계 태그 중 뒤에서 수열 번째 태그
반응 선택자	선택자:active	사용자가 클릭한 태그
반응 선택자	선택자:hover	사용자의 마우스가 올라가 있는 태그
상태 선택자	:checked	체크 상태의 태그 (주로 input태그에서 사용)
	:focus	초점이 맞추어진 상태의 태그 (주로 input태그에서 사용)
	:enabled	사용 가능한 상태의 태그 (주로 input태그에서 사용)
	:disabled	사용 불가능한 상태의 태그 (주로 input태그에서 사용)
링크 선택자	:link	아직 방문하지 않은 요소
링크 선택자	:visited	이미 방문했던 요소
문자 선택자	::first-letter	첫 번째 글자를 선택
	::first-line	첫 번째 줄을 선택
	::after	태그 뒤에 위치하는 공간을 선택
	::before	태그 앞에 위치하는 공간을 선택
	::selection	사용자가 드래그한 글자 선택
부정 선택자	선택자:not(선택자)	선택자를 반대로 적용하여 선택

Gom's

[CSS] CSS 적용 및 선택자

CSS

CSS 적용방법

[ 인라인 스타일 방식 ]

[ 내부 스타일 방식 ]

[ 외부 스타일 시트 ]

CSS 선택자

CSS 카테고리 내 다른 글 보러가기

댓글남기기

최근 글 10 개