1. CSS 개요
CSS은 웹 페이지를 꾸미는 데 사용하는 코드로 Cascading Style Sheets의 약자입니다.
화면의 이런저런 곳을 예쁘게 꾸미기 위해선 CSS를 잘 활용할 수 있어야 합니다. 사실 CSS는 프로그래밍 언어가 아니고 Style sheet 언어입니다. HTML 페이지의 요소들에 스타일을 적용할 수 있습니다.
▲ CSS 없는 상태 ▼ CSS 있는 상태
메뉴나 슬라이드 등 기능과 내용은 JS 파일에서 구현된 것이지만 디자인과 관련된 것들은 CSS를 통해 보이고 있는 것입니다.
실습
텍스트 에디터에서 이 내용을 입력해 보세요.
body{
background: black;
}
p {
font-weight: 600;
color: white;
}html 파일이 있는 곳에 styles 폴더를 만들고 style.css라는 이름으로 저장합니다.
CSS에서 font-weight는 글씨의 굵기이며, color는 글씨 색입니다.
HTML의 <head></head> 부분에 link를 추가하여 css 파일을 불러오도록 합니다.
<link href="styles/style.css" rel="stylesheet" type="text/css"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>Hello World!</p>
</body>
</html>위 코드처럼 하게 되면 아래의 결과가 나오게 됩니다.
HTML의 link 태그의 href 부분에서 styles 폴더의 style.css를 stylesheet로 받아오고 있는 것입니다.
2. CSS 구조
CSS는 선택자와 선언부로 구성됩니다.
- 선택자 : HTML 요소의 태그, ID, class 등으로 식별하여 꾸미고자 하는 요소를 선택합니다.
- 선언부 : 속성과 속성 값을 입력하는 부분으로, 각 선언을 세미콜론(;)으로 구분합니다.
여러 속성을 정의할 때 세미콜론으로 구분하면 됩니다. - 속성 : HTML을 꾸밀 방법입니다.
- 속성 값 : 속성의 콜론(:) 뒤에 값을 지정합니다.
선택자는 5가지 종류가 있습니다.
| 요소(태그) 선택자 | HTML 요소 | p |
| 아이디(id) 선택자 | 특정 id를 가진 요소 | #id |
| 클래스(class) 선택자 | 특정 class를 가진 요소 | .class |
| 속성 선택자 | 특정 속성을 가진 요소 | p[font-weight] |
| 수도(Pseudo) 선택자 | 특정 상태에 있는 요소 | p : hover |
수도(Pseudo) 선택자와 관련한 글은 한번 더 작성하겠습니다.
태그마다 다양한 속성을 가지며 여러 속성을 활용하여 멋지게 디자인을 할 수 있습니다.
3. CSS 적용 방법
1) 내부 스타일 시트 (Internal Style Sheet)
<html> 내부의 <head></head> 안에 <style></style>으로 작성합니다. 따로 파일을 만들지 않아도 돼서 편리하지만 재활용성을 위하여 css파일을 따로 관리하는 것이 유지보수 측면에서 좋습니다.
...
<head>
<style>
body {
background: black;
}
p {
font-weight: 600;
color: white;
}
</style>
</head>
...
2) 외부 스타일 시트 (External Style Sheet)
별도의 css파일을 생성하여 작성하고 html 문서에서 <link> 태그로 불러와서 사용하는 방식입니다. 특별한 경우가 아니라면 외부 스타일 시트를 권장합니다. 동일한 서버나 url으로 다른 서버의 css를 불러오는 것도 가능합니다.
...
<head>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
...href에 css 파일의 위치 혹은 url을 지정해 주면 됩니다.
3) 인라인 스타일 시트 (Inline Style Sheet)
각 태그에 스타일을 직접 작성하는 방식입니다. 필요할 때마다 적용할 수 있어 편리하지만 일관된 디자인 체계로 구성하는 데에는 방해되므로 필요한 경우에만 사용합니다.
...
<body style="background: black">
<p style="font-weight: 600; color: white;">Hello World!<p>
</body>
...