CSS
- HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
- CSS로 작성된 코드를 스타일 시트라고 부른다.
- 스타일 시트는 셀렉터, 프로퍼티, 값으로 구성되어 있다.
CSS3 스타일 시트 만들기
1. <style> 태그에 스타일 시트 만들기
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
body {
background-color: pink;
color: royalblue;
margin: 0 30px;
}
h3 {
color: purple;
text-align: center;
}
hr {
border: 5px solid plum;
}
span {
color: palevioletred;
font-size: 20px;
}
</style>
</head>
<body>
<h3>css 스타일 맛보기</h3>
<hr />
<p>나는 <span>고양이</span>를 좋아합니다</p>
</body>
</html>
- <style> 태그는 <head> 태그 내에서만 사용된다.
- <style> 태그는 여러 번 작성 가능하다.
- 여기에 작성된 스타일 시트는 이 페이지 전체에 적용된다.
2. 인라인 스타일
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<h3>고 양 이</h3>
<hr />
<p>내가 좋아하고</p>
<p>사람들이 좋아하고</p>
<p style="color: slateblue">모두가 좋아하고</p>
<p style="color: steelblue; font-size: 20px">냥세구</p>
</body>
</html>
3. 외부 스타일 시트 파일 불러오기
- <link> 태그 사용
<head>
<link rel="stylesheet" href="mystyle.css" />
</head>
- @import 사용
<style>
@import url(mystyle1.css);
</style>
