문법적 형태
/* CSS */
selector {
property: value;
,,,
}위 같은 형태로 css 코드를 작성합니다.
선택자는 속성과 값을 지정할 대상(요소)를 검색합니다. 즉, HTML의 특정한 부분(요소)를 찾아 연결시켜 줍니다.
프로퍼티는 선택자로 지정된 대상(요소)에 적용할 CSS의 명령입니다.
정리하자면 선택자로 검색한 요소에 속성과 값을 입력하여 스타일을 지정합니다.
참고로
all이라는 CSS 프로퍼티는 모든 CSS 프로퍼티를 의미합니다.
선택자
1. 기본 선택자
/* 우선순위: * < tag < .class < [Attr] < #id */
/* 1. Tag Selector(태그 선택자) */
tagName {
property: value;
}
/* 2. class Selector(클래스 선택자) */
.className {
property: value;
}
/* 3. ID Selector(ID 선택자) */
#IDName {
property: value;
}
/* 4. 범용 선택자(전체 선택자) */
* {
property: value;
}
/* 5. Attr Selector(속성 선택자) */
[Attr] {
property: value;
}
[Attr="value"] {
property: value;
}
[Attr^="startValue"] {
property: value;
}
[Attr$="endValue"] {
property: value;
}
[Attr*="includeValue"] {
property: value;
}2. 가상 클래스 선택자(선택자 범위 제한)
/* 1. First-child Selector */
/* 선택된 요소들 중 인접한 모든 형제 요소들 중 첫 번째 자식인 요소 */
selector: first-child {
property: value;
}
/* 2. Last-child Selector */
/* 선택된 요소들 중 인접한 모든 형제 요소들 중 마지막 자식인 요소 */
selector: last-child {
property: value;
}
/* 3. Nth-child Selector */
/* 선택된 요소들 중 인접한 모든 형제들 중 n 번째 자식인 요소 */
selector: nth-child(n) {
property: value;
}
/* 4. First-of-type Selector */
/* 선택된 타입 중 인접한 같은 타입의 형제들 중 첫 번째 타입인 요소 */
selector: first-of-type {
property: value;
}
/* 5. Last-of-type Selector */
/* 선택된 타입 중 인접한 같은 타입의 형제들 중 마지막 타입인 요소 */
selector: last-of-type {
property: value;
}
/* 6. Nth-of-type Selector */
/* 선택된 타입 중 인접한 같은 타입의 형제들 중 n 번째 타입인 요소 */
selector: nth-of-type(n) {
property: value;
}
/* 7. Not Selector */
/* selector1으로 선택된 요소들 중 selector2를 제외한 요소 선택 */
selector1: not(selector2) {
property: value;
}:*-of-type의 경우 콜론 앞에 태그가 아닌 다른 선택자 작성시 선택된 요소의 타입에 대해서 범위를 제한하게 됩니다.
<section>
<div class="movie">A</div> V
<p class="movie">B</div> V
<p class="movie">C</div>
<p class="movie">D</div>
<div class="movie">E</div>
<p class="movie">F</div>
</section>.movie:first-of-type {
color: red;
}위와 같이 작성된다면 movie라는 클래스를 갖는 요소들은 div와 p라는 타입을 갖고 있고, movie를 class 값으로 갖고 있고 타입이 div와 p중 첫 번째 타입인 A와 B가 선택될 것입니다.
3. 동적 가상 클래스 선택자(특정 조건 만족시 선택자 적용)
/* 우선순위: :link < :visited < :hover < :active */
/* 1. Link Selector */
/* 하이퍼링크, a 태그 클릭 전 상태 선택 */
a: link {
property: value;
}
/* 2. Visited Selector */
/* 하이퍼링크, a 태그 클릭 후 상태 선택 */
a: visited {
property: value;
}
/* 3. Hover Selector */
/* 요소 위에 커서 올린 상태 선택 */
selector: hover {
property: value;
}
/* 4. Active Selector */
/* 요소 클릭 시 상태 선택, 마우스 클릭 후 떼기 전 까지의 상태 */
selector: active {
property: value;
}
/* 5. Focus Selector */
/* 요소 포커스 시 상태 선택 */
selector: focus {
property: value;
}
/* 6. Enabled Selector */
/* 선택된 요소들 중 disabled가 아닌 요소 선택 */
selector: enabled {
property: value;
}
/* 7. Disabled Selector */
/* 선택된 요소들 중 disabled인 요소 선택 */
selector: disabled {
property: value;
}
/* 8. Checked Selector */
/* 선택된 요소들 중 checked된 요소 선택 */
selector: checked {
property: value;
}4. 가상 요소 선택자
/* 1. Before Selector */
/* 선택된 요소의 Content 가장 앞에 가상 텍스트 요소 삽입 후 선택 */
selector:: before {
content: 'text'; //-> 가상의 텍스트 요소
property: value;
}
/* 2. After Selector */
/* 선택된 요소의 Content 가장 뒤에 가상 텍스트 요소 삽입 후 선택 */
selector:: after {
content: 'text'; //-> 가상의 텍스트 요소
property: value;
}
/* 3. First-letter Selector */
/* 선택된 요소의 텍스트 콘텐츠 중 첫 글자 선택 */
selector:: first-letter {
property: value;
}
/* 4. First-line Selector */
/* 선택된 요소의 텍스트 콘텐츠 중 첫 번째 줄 텍스트 선택 */
selector:: first-line {
property: value;
}
/* 5. Selection Selector */
/* 선택된 요소의 텍스트 콘텐츠 중 드래그(선택) 된 텍스트 선택 */
selector:: selection {
property: value;
}선택자 결합
/* 1. 하위 선택자 결합 */
/* 선택자를 공백으로 구분하여 작성, 여러 선택자를 공백으로 구분하여 결합 가능 */
/* selector1로 선택된 요소의 자손 요소중 selector2인 요소 선택 */
selector1 selector2 ,,, {
property: value;
}
/* 2. 자식 선택자 결합 */
/* 선택자를 >로 구분하여 작성, 여러 선택자를 >로 구분하여 결합 가능 */
/* selector1로 선택된 요소의 자식 요소 중 selector2인 요소 선택 */
selector1 > selector2 ,,, {
property: value;
}
/* 3. 형제 선택자 결합 */
/* 3-1. 일반 형제 선택자 결합 */
/* 선택자를 ~로 구분하여 작성, 여러 선택자를 ~로 구분하여 결합 가능 */
/* selector1으로 선택된 요소의 다음 형제 요소들(복수)중 selector2인 요소 선택 */
selector1 ~ selector2 {
prorperty: value;
}
/* 3-2. 인접 형제 선택자 결합 */
/* 선택자를 +로 구분하여 작성, 여러 선택자를 +로 구분하여 결합 가능 */
/* selector1으로 선택된 요소의 바로 다음 형제 요소를 선택 */
/* selector2는 반드시 다음 형제 요소(단수)를 선택할 수 있는 선택자를 사용 */
selector1 + selector2 {
property: value;
}
/* 4. OR 선택자 결합 */
/* 선택자를 ,(콤마)로 구분하여 작성, 여러 선택자를 ,(콤마)로 구분하여 결합 가능 */
/* 여러 요소를 선택하여 동일한 스타일 적용 */
selector1, selector, ,,, {
property: value;
}
/* 5. and 선택자 결합 */
/* 선택자를 공백 없이 이어 작성, 여러 선택자를 공백 없이 이어 작성하여 결합 가능 */
/* selector1이면서 selector2이면서 ,,,를 모두 만족하는 요소 선택 */
selector1selector2,,, {
property: value;
}스타일 적용 우선 순위
동일한 요소에 동일한 CSS 프로퍼티가 적용될 수 있습니다. 이때 어떤 CSS 프로퍼티 값을 우선적으로 적용되어야 할 지 순서가 존재합니다.
만약 style 태그로 작성된 CSS 코드와 link 태그로 로드된 CSS 코드의 경우 파싱되는 순서에 따라 뒤에 파싱된 스타일이 덮어 씌워 적용됩니다.
명시도
명시도의 경우 선택자의 범위가 좁을수록 명시도가 높으며, 명시도가 높다는 것은 우선 적용됩니다.
명시도가 높은 순서는 아래와 같습니다.
-
!important
-
style 어트리뷰트
-
ID 선택자
-
클래스 선택자, 가상 클래스 선택자, 속성 선택자
-
태그 선택자
-
전체 선택자
-
상속
만약 여러 선택자가 결합된 경우 가장 높은 레벨의 개수가 많은 것이 우선 적용됩니다.
높은 레벨의 개수까지 동일한 경우, 하위 레벨의 개수가 많은 것이 우선 적용됩니다.
하위 레벨의 개수까지 모두 동일한 경우, 마지막에 작성된 것이 우선 적용됩니다.
!important는 CSS 프로퍼티 값 뒤에 작성하며, 이를 작성시 무조건, 언제나 우선되는 스타일 값이 됩니다.
selector {
property: value !important;
}상속 제어
모든 속성은 아니지만 상위 요소의 CSS 속성이 하위의 모든 요소에 상속이 되는 경우가 있습니다.
상속은 자기 자신에게 명시적으로 스타일이 없는 경우 상위 요소의 스타일이 상속되어 적용됩니다.
1. initial
만약 상위 요소의 특정 스타일을 상속받지 않고싶은 경우, 브라우저의 기본값을 사용하고 싶은 경우 하위 요소에 CSS 프로퍼티 값을 명시적으로 initial로 작성해줍니다.
만약 all프로퍼티 값을 initial로 지정시 CSS 모든 프로퍼티 값을 상속받지 않고 기본값을 사용하겠다고 명시하는 것과 같습니다.
selector {
property: initial;
}2. inherit
부모 요소의 스타일을 상속받고 싶은 경우 자식 요소에 CSS 프로퍼티 값을 명시적으로 inherit로 작성해줍니다. 즉, initial과는 반대되는 역할을 합니다.
만약 all프로퍼티 값을 initial로 지정시 CSS 모든 프로퍼티 값을 상속받아 사용하겠다고 명시하는 것과 같습니다.
selector {
property: inherit;
}3. unset
unset의 경우 상위로부터 부모 요소에게 상속받을 값이 있다면 inherit으로 동작하고, 상속받을 값이 없는 경우 initial로 동작합니다.
selector {
property: unset;
}CSS 선언 방식
CSS 선언하는 방식에는 총 4가지 방법이 존재합니다.
1. 인라인 방식
: html 요소에 style 어트리뷰트의 값으로 CSS 코드를 직접 작성하는 방법입니다. 이때 선택자는 생략합니다.
<p stlye="color: red">
,,,
<p>2. 내장 방식
: html 태그 중 <style> 태그의 content 영역에 CSS 코드를 작성하는 방법입니다.
<style>
p {
color: red;
}
</style>3. 링크 방식 (권장)
: html 태그 중 <link /> 태그를 사용하여 href 속성에 외부 문서로 CSS 문서를 불러와 적용시키는 방법입니다(link 태그에서 href, rel 속성은 필수 속성으로 반드시 작성해주어야 합니다).
<head>
<link href="CSS 파일 경로" rel="stylesheet" />
</head>4. @import 방식
: 해당 방식은 HTML 문서가 아닌 CSS 문서에서 @import를 사용하여 다른 CSS 파일을 불러와 적용하는 방식입니다.
즉, CSS에서 다른 CSS 파일을 불러오는 방식입니다. 이때 CSS 파일은 직렬 호출이 되므로 주의하여 사용해야 합니다.
@import url("CSS 파일 경로");