[CSS] ruleset과 선택자 (selector)

1. CSS란?

• Cascading Style Sheets의 약자
• Style sheet 언어
• HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있음

 

2. ruleset의 구조

rule set (rule)의 구조

선택자(selector)

rule set의 맨 앞에 있는 HTML 요소 이름. 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소) 

 

선언 

color: red와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.

 

속성(property)

주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, color는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다.

 

속성 값

속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다.

 

 

3. 선택자의 종류

Elements (요소)

: set equal style for these elements (=elements에 같은 style이 적용됨)
 
html
<h1>Our header</h1> 
<p›The Blog Post</p> 
<div>More Info</div>
 
css
h1 {
    color: red;
}
 

Class

: set equal style for elements within the same class (같은 class로 묶여있는 elements에 같은 style이 적용됨)

• CSS에서 마침표로 시작
• html에서는 클래스 간에 공백을 추가하여 다중 클래스를 설정할 수 있음 (ex. class="section-title article-title)
• 클래스의 이름은 케밥표기법이 좋음 ex.section-title (css는 대소문자를 구분하지 않기 때문에 이렇게 표기하는 건 중요함)

 
html
<h1 class="blog-post"›
Our header‹/h1> 
<p class="blog-post">
The blog post</p›
<div class="blog-post">
More info</div>
 
css
.blog-post {
color: red;
} 
 

Universal (거의 쓰지 않음)

html
<h1›Our header‹/h1> 
<p class="blog-post">
The blog post</p›
 
css
* {
color: red;
} 
 

IDs

: set style to one specific element : ID는 페이지에 단 하나만 있기 때문에 해당 스타일을 하나의 요소에 적용

• CSS에서 해시태그를 붙여 지정함

html
<h1 id="main-title">Our header</h1> 
 
css
#main-title {
    color: red;
}
 

Attributes (속성)

: set equal styles to all elements with attribute(s) : 같은 속성을 가진 모든 요소에 같은 스타일을 지정할 수 있음

• CSS에서 대괄호를 붙여 지정함

html
<button disabled>click</button> 
 
css
[disabled] {
    color: red;
}
 

그 외에도 많은 선택자가 있음

 

 

참고자료

https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics

CSS 기초 - Web 개발 학습하기 | MDN