CSS : CSS란?

css

What is the CSS?

---

CSS 란 Cascading Style Sheet 로 html이 구조라면, css는 html을 채워주는 도구이다.

 

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

 

Why we use CSS?

---

매우 간단한 웹페이지라면 이렇게 HTML 코드 내에 스타일이 들어가있어도 문제가 없지만,

HTML과 CSS의 역할이 다르고 또 필요한 부분이 한 눈에 들어오지 않기 때문에 가급적이면 별도로

stylesheet를 작성해서 연동하는 것이 좋다.

 

이는 여러 원인 때문에 분리해서 쓰면 좋다.

1. html과 css가 분리되어 유지보수가 쉽다.
2. 성능이 좋아진다.
3. html 안에 style을 지정하지 않기에 html이 간단, 검색엔진이 수집하기에도 쉬워진다.

 

Where, How we use CSS?

---

CSS는 HTML 요소의 스타일을 정의하는 데 사용되는데, 이를 위해서는 해당 요소를 선택할 수 있어야 한다.

선택자, 영어로는 셀렉터는 스타일을 적용하고자 하는 요소를 선택하기 위해 CSS가 제공하는 수단이다.

선택자에는 여러 종류가 있는데요. 기본적인 종류만 먼저 보자.

 

Basic

태그 선택자 / 요소 선택자는 가장 간단한 선택자로, HTML 요소의 이름을 직접 지칭함으로써 선택자가 지칭하는 타입의 모든 요소를 선택합니다.

 

위와 같이 p, em, h1, h2 태그에 property를 부여함으로써 우리는 html 문서에 css를 부여함을 알 수있다.

 

하지만 태그선택자만으로는 정교하게 디자인하는 데에 한계가 있습니다.

모든 p 요소 가운데 특별히 하나의 요소를 선택하고 싶거나 기타 다른 요소 하나에만 디자인 속성을 부여하고 싶다면?

이럴 때 태그별로 부여하면 문제가 생긴다. 독립적이지 않다는 뜻이다.

 

Class

이 때, 주어진 class 값을 attribute 값으로 보유하고 있는 html 요소를 찾아 선택하는 방법이 있다.

이를 클래스 선택자라고 한다.

선택하려는 class 속성값 앞에 . 을 하나 추가해서 작성하며, 굉장히 보편적으로 자주 사용된다.

 

Id

id 선택자는 클래스 선택자와 거의 유사한데, class 속성이 같은 속성값을 여러 개의 HTML 요소가 공유할 수 있는 데에 반해, id 속성값은 하나의 HTML 요소만 사용할 수 있다.

어떤 요소가 유일하고 문서 내에서 중요한 역할을 담당한다면 id 속성이 부여될 수도 있다.

id 선택자는 선택하려는 id 속성값 앞에 #기호를 추가하면 된다.

 

Selector

class selector

셀렉터로 HTML 요소를 선택하고 나면, 괄호 안에 속성, 프로퍼티와 값을 지정한다. 

프로퍼티는 이미 스펙에 정해져 있는 것만 사용이 가능하고, 마찬가지로 값 또한 해당하는 단위 혹은 키워드만 사용이 가능하다. 여기서 property는 float 이다.

예를 들어 글씨 색깔을 바꾸고 싶다고 하면, font-color 혹은 text-color 같은 프로퍼티는 존재하지 않으며 color라고 명시해주어야 한다. 해당하는 값은 140개의 표준 색이름 내에서 사용하거나, 색상 코드 (#000000), RGB값 및 투명도 rgba(0,0,0,0), hsl(Hue, Saturation, Lightness) 등으로 표기하는 방법만을 사용해야 한다. 그 외에 다른 방식은 지원하지 않는다.

 

프로퍼티와 값 쌍은 선언이라고 한다. 선언은 세미콜론으로 구분한다. 여기서의 선언은 float:right; 이다.

이렇게 작성된 하나의 구문을 룰셋이라고 부릅니다.

룰셋은 해당 HTML 요소를 어떻게 렌더링할 것인지 브라우저에 지시하는 역할을 합니다.