CSS 개요
- CSS의 필요성과 개념
- CSS의 정의 방법과 HTML 문서에서의 적용 방법 활용
- 다양한 CSS 선택자의 종류를 이해하고 활용
1. CSS란?
HTML 4.01에서는 <font>태그나 <p>태그의 align 속성을 사용해서 스타일을 지정했다.
하지만 최근의 웹 표준 개발 방법론에서는 문서의 내용, 표현, 동작을 서로 분리해서 나타내도록 하고 있다.
즉 문서의 내용은 HTML을 이용해 정의하고, 화면에 표현은 CSS를 이용하고, 동작은 JS를 이용해서 정의하도록 한다.
CSS의 사용은 다음과 같은 장점들을 갖는다.
- HTML으로 표현 할 수 없었던 다양한 스타일을 적용 할 수 있다.
- 한 번의 속성 정의로 여러 요소 및 여러 문서에서 사용 할 수 있어 전체적인 디자인에 통일성을 줄 수 있다.
- 웹 문서의 내용과 스타일 정보가 분리되어 문서의 가독성이 좋아지고, 유지보수가 편하다.
- 통일 된 문서 양식을 사용해 코딩 양이 줄어든다. 코드의 수가 줄어 로딩 시간도 단축된다.
2. CSS 사용
CSS 정의 형식
형식 : 선택자 {속성:값;}
선택자(selector)는 스타일을 적용하려는 HTML 요소를 나타낸다. 여러 태그를 동시에 스타일 주려면 콤마(,)로 구분해서 써준다.
속성(property)은 선택한 요소들에 어떤 부분을 스타일 지정 할 것인지 기술한다.
값(value)은 해당 속성에 지정할 스타일 값을 표시한다.
'속성:값'은 선언(declaration)이라고 하며, 세미클론(;)으로 선언과 선언을 구분한다.
CSS 적용 방법
(1) 스타일 요소 사용법
HTML 문서에서 <head> 태그 내에서 <style> 태그를 사용하여 스타일을 정의 한다.style 요소 사용
<html>
<head>
<style>
p {font-size : 20pt; color : red;}
</style>
</head>
<body>
<p>style 요소 사용</p>
</body>
</html>
(2) 인라인 스타일 방법
HTML 문서의 각 태그에 직접 style 속성을 사용해서 스타일을 적용한다.style 속성 사용
<body> <p style="font-size:20pt; color:red">style 속성 사용</p> </body>
(3) 외부 파일 사용법
HTML 문서와 별도로 스타일만 정의한 CSS파일을 만든 후 <link> 태그를 사용해 스타일을 적용한다.외부 css파일로 style 적용
<html> <head> <link rel="stylesheet" href="test.css"> </head> <body> <p>외부 css파일로 style 적용</p> </body> </html>
(4) CSS 적용의 우선순위
HTML 문서에 여러 CSS 적용 방법을 동시에 사용하면 충돌이 발생 할 때, 우선적으로 적용되는 우선순위가 존재한다.<body> 태그 내부에서 가장 가까이 적용된 스타일이 우선권을 갖는다.
"인라인 스타일 방법 > 스타일 요소 사용 방법 > 외부 파일 사용 방법"으로 우선권을 갖는다.
CSS 우선순위
<html>
<head>
<link rel="stylesheet" href="test.css"><!-- 3순위 -->
<style>/* 2순위 */
p {font-size : 20pt; color : red;}
</style>
</head>
<body>
<p style="font-size:20pt; color:green;">CSS 우선순위</p><!-- 1순위 -->
</body>
</html>
3. CSS 선택자
전체 선택자(universal selector)
'*' 기호를 사용해서 표시한다. 웹 문서에 있는 모든 요소에 스타일을 적용 한다.
사용 방법 : * {속성 : 속성값;}
타입 선택자(type selector)
'HTML 요소의 이름'을 직접 사용한다. 웹 문서에 있는 해당 요소가 사용된 모든 부분에 동일한 스타일을 적용 한다.
사용 방법 : 태그명 {속성 : 속성값;}
클래스 선택자(class selector)
HTML 요소에 class 속성을 줘서 사용한다. 동일한 스타일을 주고 싶은 요소에 하나의 클래스로 묶어서 스타일을 지정한다.
사용 방법 : 요소명.클래스명 {속성 : 속성값;} or .클래스명 {속성 : 속성값;}
아이디 선택자(ID selector)
HTML 요소에 ID 속성을 줘서 사용한다. HTML 요소에 class 속성 대신 ID 속성을 사용한다. 단 여러 요소에 같은 ID 속성을 중복해서 줄 수 없다.
사용 방법 : 요소명#아이디명 {속성 : 속성값;} or #아이디명 {속성 : 속성값;}
속성 선택자(attribute selector)
HTML 요소의 속성이나, 속성값까지 일치 할 때 사용한다.
사용 방법 : 요소명[속성명=연산자값] {속성 : 속성값;} or 요소명[속성명] {속성 : 속성값;}
의사 클래스(pseudo-class)
선택자를 활용하여 표현 할 수 없는 정보를 기반으로 요소를 선택 할 수 있도록 한 것으로,
실제로 존재 하지 않지만 해당 요소에 클래스가 선언 된 것처럼 간주하고 선택자를 만드는 것이다.
사용 방법 : 선택자:의사클래스 {속성 : 속성값;}
링크 의사 클래스 :
- link(아직 방문한 적 없는 링크에 적용)
- visited(사용자에 의해 방문한 적이 있는 링크에 적용)
사용자 동작 의사 클래스 :
- hover(포인팅 장치로 특정 요소에 마우스가 올려져 있는 동안 적용)
- active(사용자에 의해 요소가 활성화되는 동안 적용)
- focus(요소가 포커스를 가지고 있는 동안 적용)
결합자(combinator)
선택자를 문맥이나 요소의 구조를 기반으로 결합하는 방법이다.
CSS 결합자
css에서 사용하는 결합자의 종류
- 자손 결합자 : 선택자1 공백 선택자2 - 선택자1의 자손 요소중 선택자2에 해당하는 모든 요소 선택
- 자식 결합자 : 선택자1 > 선택자2 - 선택자1을 부모 요소로 하여 직계 자식 요소인 선택자2를 선택
- 인접 형제 결합자 : 선택자1 + 선택자2 - 선택자1의 바로 뒤에 오는 동생인 선택자2 요소만 선택
- 일반 형제 결합자 : 선택자1 ~ 선택자2 - 선택자1 다음에 오는 형제관계에 있는 모든 선택자2 요소들을 선택
- 그룹 결합자 : 선택자1, 선택자2 - 여러 선택자가 동일한 스타일을 사용하는 경우에 하나로 묶어서 사용
다양한 결합자를 사용해 결과를 확인해보세요.
| 자손 결합자 | div li {font-weight : bold; color : red;} -> div 요소의 자손 요소 중 li 요소를 선택 |
|---|---|
| 자식 결합자 | p > em {font-size : 15pt; color : blue; font-weight : bold;} -> p 요소 바로 아래에 포함된 자식 요소인 em 요소를 선택 |
| 인접 형제 결합자 | h6 + p {font-size : 15pt; background-color : cyan;} -> h1 요소의 형제 요소 중 바로 뒤에 인접한 p 요소를 선택 |
| 일반 형제 결합자 | li.style1 ~ li {background-color : yellow;} -> 클래스명 style1을 가진 li 요소 바로 다음에 오는 형제 요소 중 모든 li 요소를 선택 |
| 그룹 결합자 | h6, p {font-style : italic; font-family : cursive;} -> h1 요소와 p 요소에 동일한 스타일을 적용하는 경우 |