1. CSS란?
- CSS란 Cascading Style Sheets의 약자입니다.
- CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다.
- HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다.
- 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다.
2. CSS 적용 방법
- HTML 문서에 CSS 스타일을 적용하는 방법은 다음과 같습니다.
- 인라인 스타일(Inline style)
- 내부 스타일 시트(Internal style sheet)
- 외부 스타일 시트(External style sheet)
2-1. 인라인 스타일(Inline style)
- 인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
- 이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.
<p style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 스타일을 적용하였습니다.
</p>
2-2. 내부 스타일 시트(Internal style sheet)
- 내부 스타일 시트를 이용한 방법은 HTML 문서의 <head>태그 내에 <style>태그를 사용하여 스타일을 지정합니다.
- 이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다.
<style>
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }
</style>
2-3. 외부 스타일 시트(External style sheet)
- 외부 스타일 시트를 이용한 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다.
- 스타일을 적용할 모든 웹 페이지의 <head>태그 내에 <link>태그를 사용하여 외부 스타일 시트를 포함하면 됩니다.
<link rel="stylesheet" href="/examples/media/expand_style.css">
위의 예제에서 사용된 CSS 파일의 내용은 다음과 같습니다.
body { background-color: lightyellow; }
p { color: red; text-decoration: underline; }3. 스타일 적용의 우선순위
- 위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정됩니다.
- 인라인 스타일
- 내부 / 외부 스타일 시트
- 웹 브라우저 기본 스타일
- 예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용됩니다.
- 또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용됩니다.
4. CSS 선택자(selector)
- 스타일을 적용할 HTML 요소를 선택하는데 사용하는 대표적인 선택자는 다음과 같습니다.
- HTML 요소 선택자
- 아이디(id) 선택자
- 클래스(class) 선택자
4-1. HTML 요소 선택자
- CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다.
p { color: red; font-size: 14px; }4-2. 아이디(id) 선택자
- 아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다.
- 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다.
<style>
#para { color: teal; text-decoration: line-through; }
</style>
...
<p id="para">이 부분에 스타일을 적용합니다.</p>
- HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작합니다.
- 하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생합니다.
- 따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋습니다.
4-3. 클래스(class) 선택자
- 클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다.
- 이러한 특정 집단을 클래스(class)라고 하며, 동일한 클래스 이름을 가지는 요소들을 모두 선택해 줍니다.
<style>
.paras { color: lime; text-decoration: overline; }
</style>
...
<p class="paras">이 부분에 스타일을 적용합니다.</p>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<p class="paras">이 부분에도 같은 스타일을 적용합니다.</p>
더보기
참고 : http://tcpschool.com