[CSS] CSS 시작, 문법, 선택자

CSS는 무엇이고 왜 쓰는가?

CSS는 Cascading Style Sheet의 약자이다.

CSS는 HTML요소들이 미디어에서 어떻게 보이게 할지 정의하는데 이용하는 스타일 시트 언어이다.

기존의 HTML은 HTML 문서 내에서 스타일을 지정해야 했기 때문에 협업에 있어서 시간적으로 비효율적이었다.

하지만 스타일을 CSS로 외부에서 작성하여 연결시킴으로써 작업의 효율이 좋아졌다.

---

CSS 문법

선택자 { 속성명:속성값; 속성명:속성값; ...}

CSS의 기본적인 작성 문법은 위와 같다.

크게 보면 선택자 { 선언부 }의 형태로 구성된다.

여기서 선택자는 CSS를 적용하고자 하는 HTMl요소를 가리키고 선언부는 중괄호 {}를 이용하여 전체를 둘러싼다.

각각의 선언은 속성명과 속성 값을 가지며 속성명:속성 값의 형태로 연결된다.

하나의 선언마다 세미콜론 ; 를 이용하여 끝마치고 다음 선언과 구별한다.

---

CSS 선택자

CSS 선택자는 전체, HTML요소, class, id, 그룹 선택자로 크게 5가지로 나눌 수 있다.

 

1. 전체 선택자

전체 선택자는 * (asterisk)로 작성한다.

스타일을 모든 요소에 적용할 때 사용한다.

 

2. HTML요소 선택자

HTML요소 선택자는 특정 태그(p, div, span, ul,... 등)에 스타일을 적용할 때 사용한다.

선택자 위치에 p, div, 등 태그명을 작성하면 해당 태그에 동일한 스타일이 적용된다.

 

3. class 선택자

class 선택자는 HTML요소 속성으로 준 class명을 가지고 스타일을 적용한다.

선택자에서 class명을 뜻할 때에는. class명으로 작성한다.

class 선택자를 사용하면 해당 class에 속한 모든 요소들에 스타일이 적용된다.

 

4. id 선택자

id 선택자 또한 class선택자와 같은 역할을 한다.

id선택자는 #id 명의 형태로 사용한다.

id선택자와 class선택자의 다른 점은 id의 경우 태그 안에서 하나만 지정 가능하고, class는 공백으로 여러 개를 구분하여 작성이 가능하다.

(필자의 경우 Java의 상속과 인터페이스와 비슷하다 생각했다.)

 

5. 그룹 선택자

그룹 선택자는 여러 개의 공통점이 없는 선택자들을 쉼표 , 를 기준으로 여러 개 작성하여 한번에 선언하게 하는 것이다.

예를 들어 <div>와 <p>에 모두 공통으로 CSS 속성을 주고 싶다면

div, p {속성명:속성값;}

의 형태로 작성할 수 있다.