CSS3 기본 사용법

CSS는 Cascading Style Sheets의 약자입니다.  CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다.
CSS는 다양한 장치 및 화면 크기에 대한 디자인, 레이아웃 및 변형을 포함하여 웹 페이지의 스타일을 정의하는 데 사용됩니다. 다시 말해 문서 작성과 디자인을 분리하여 살펴본다면 하나의 웹 문서에서 문서 작성은 HTML이, 디자인은 CSS가 담당한다고 생각하면 됩니다.

---

CSS를 사용하는 이유

앞서 설명했던것 처럼 HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 합니다.

이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어집니다.

이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 바로 CSS입니다.

 

CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해 주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있습니다.

또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워집니다.

이러한 외부 스타일 시트는 보통 확장자를. css파일로 저장합니다.

 

디자인을 분리했을 때 장점

• 내용과 디자인 수정이 용이
• 다양한 기능으로 확장 가능
• 통일된 문서 양식 제공 

---

CSS 구분

CSS 규칙 세트는 선택자와 선언 블록으로 구성됩니다.

 

<사용 예시>

CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다.  

선택자는 CSS를 적용하고자 하는 HTML 요소(element)를 가리킵니다. 

선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다. 

각 선언은 CSS 속성명(property)과 속성 값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다. 

이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다.

---

CSS사용위치

CSS의 스타일 CSS 적용 방법엔 HTML 문서와의 독립성 정도에 따라 3가지 방법 존재합니다

 

① 인라인 스타일

장점 : HTML 문서에 가장 간단하게 CSS를 삽입할 수 있음.

단점 : CSS를 HTML 태그와 같은 행에 사용하여 HTML 태그가 복잡해짐.

 

② 내부 스타일 시트

CSS 코드를 <style>태그 내에 삽입하는 방식

 

③ 외부 스타일 시트

CSS 부분을 별도의 파일로 만들어서 HTML 부분과 완전히 분리하는 방식으로 HTML 문서와 별도로 확장자가 css인 파일 생성 후,  HTML 문서에 상단에  태그로 불러와 스타일을 적용하는 방식

 

 

현재는 스타일을 HTML과 분리하는 추세가 표준이라,  인라인 방식보다는 내부나 외부 스타일로 작업하시기를 권장드립니다. 

하나의 요소에 인라인 스타일 시트가 중복 정의되면 제일 마지막에 설정된 값이 적용되며 CSS 적용 우선순위와 상관없이 속성을 강제로 적용할 때는(! important)표시를 사용합니다. 
단, 한 문서에만 사용하거나 스타일 소스가 적다면 내부 스타일로, 여러 문서에 사용하거나 스타일 소스가 많다면 외부 스타일로 사용해도 됩니다.