[CSS] CSS의 개요와 기본 문법

CSS 개요

웹 페이지의 스타일과 내용적인 부분을 서로 분리해 놓은 서식을 스타일 시트라고 합니다.

이러한 스타일 시트를 이용하면 웹 페이지의 스타일을 편리하게 개발할 수 있습니다.

CSS란?

CSS는 Cascading Style Sheets의 약자입니다.

CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다.

HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다.

오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다.

CSS를 사용하는 이유

• CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어가능.
• 또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수가 쉽다.

CSS 선택자

- HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.

<style>

    h2 { color: teal; text-decoration: underline; }

</style>

...

<h2>이 부분에 스타일을 적용합니다.</h2>

- 아이디(id) 선택자

아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용.
이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택한다.

<style>

    #heading { color: teal; text-decoration: line-through; }

</style>

...

<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

- HTML과 CSS는 하나의 웹 페이지안에 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작가능.
- 하지만 중복된 아이디를 가지고 자바스크립트 작업 할 시 오류 발생.
- 따라서 되도록 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름, 클래스를 사용하는 것이 좋다.

- 클래스(class) 선택자

클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다.
- 같은 클래스 이름 가지는 요소를 모두 선택함.
<style>

    .headings { color: lime; text-decoration: overline; }

</style>

...

<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>

<p>class 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>

<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

- 그룹(group) 선택자

그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용.
그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결.
그룹 선택자는 코드를 중복 작성 하지 않도록 함. 
 - 코드를 간결하게 만들어 주기 위해서.
 <style>

    h1 { color: navy; }

    h1, h2 { text-align: center; }

    h1, h2, p { background-color: lightgray; }

</style>

CSS 주석 (comments)

• 주석(comment)이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문.
• 이러한 주석은 다른 CSS 코드와 달리 웹 브라우저에 의해 해석되지 않음.

CSS에서 주석을 표현하는 방법.
문법
/* 주석내용 */

예제
<style>

p { color: teal; /*이것은 한 줄짜리 주석입니다.*/ font-size: 30px; }

/* 

이것은 두 줄짜리 주석입니다.

몇 줄이라도 가능합니다. 

*/

</style>

필수 : CSS에서 주석을 작성할 때 절대로 주석 내부에 또 다른 주석을 넣어서는 안 됨.