[CSS] CSS (Cascading Style Sheets) ❓

CSS (Cascading Style Sheets)

Style Sheet 언어. 웹 페이지를 꾸미려고 작성하는 코드를 말한다.

HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다.

 

rule set

전체 구조. 종종 줄여서 rule 이라고 한다.

 

1. 선택자 (Selector)

• rule set의 맨 앞에 있는 HTML 요소 이름. 꾸밀 요소를 선택한다.
• 다른 요소를 꾸미기 위해서는 선택자만 변경하면 된다.

2. 선언 (Declaration)

color: red; 와 같은 단일 규칙을 가지고 있고 꾸미기 원하는 요소의 속성을 명시한다.

 

3. 속성 (Property)

• 주어진 HTML 요소를 꾸밀 수 있는 방법이다.
• rule 내에서 영향을 줄 속성을 선택한다.

4. 속성 값 (Property Value)

주어진 속성을 위한 많은 결과 중 하나를 선택하기 위해 속성 값을 찾는다.

🌟 color의 값에는 red 외에 많은 것이 있다 !

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

 

✅ 각각의 rule set (셀렉터로 구분)은 반드시 { } 로 감싸져야 한다.

✅ 각각의 선언 안에 각 속성을 해당 값과 구분하기 위해 콜론 : 을 사용해야만 한다.

✅ 각각의 rule set 안에 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론 ; 을 사용해야만 한다.

 

여러 요소 선택하기

여러 선택자는 콤마 , 로 구분한다.

p,li,h1 {
  color: red;
}

 

선택자의 여러 종류

선택자 이름	선택하는 것	예시
요소 선택자 (태그 또는 타입 선택자)	특정 타입의 모든 HTML 요소	p : <p> 를 선택
아이디 선택자	특정 아이디를 가진 페이지의 요소 ・ 한 페이지에서 한번만 사용 가능 ・ id : 페이지 내에서 특정 위치나 태그를 지정	#my-id : <p id=”my-id”> or <a id=”my-id> 를 선택
클래스 선택자	특정 클래스를 가진 페이지의 요소 ・ 한 페이지에서 여러번 사용 가능 ・ 자주 사용되는 스타일에 적용	.my-class : <p class=”my-class”> & <a class=”my-class”> 를 선택
속성 선택자	특정 속성을 갖는 페이지의 요소	img[src] : <img src=”myimage.png”> 를 선택하지만 <img> 는 선택 안함
수도 (Pseudo) 클래스 선택자	특정 요소이지만 특정 상태에 있을 때 (hover, over)	a:hover : <a> 를 선택하지만 마우스 포인터가 링크위에 있을 때만 선택

 

---

🔖 Reference

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

[CSS] id와 class(아이디와 클래스)의 개념 및 차이점