▶ CSS3란?
CSS는 텍스트의 색상이나 크기 또는 이미지의 크기나 위치 등을 처리하는 웹 문서에서 디자인 요소를 담당하는 언어다. 자주 사용하는 디자인 부분들을 미리 조합해서 만들어 놓고 HTML페이지 내부에서 필요할 때마다 적용한다.
⦁ CSS 작성 방법
<style type="text/css">
코드작성
</style>⦁ CSS의 주석 처리
/* 주석 처리할 내용 */
▶ CSS 코드를 정의하는 방법
1. 내부 스타일 시트: HTML 문서 안의 과 안에 CSS 코드를 추가하는 방법
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본구조</title>
<meta charset="UTF-8">
<style type="text/css">
span{color:red;}
</style>
</head>
<body>
<span>Hello, World</span>
</body>
</html>2. HTML 태그의 style 속성에 CSS를 추가하는 방법
<body>
<span style="color:red;">Hello, World</span>
</body>
3. 외부 스타일 시트: 별도의 CSS 파일을 만들어 놓고 HTML 문서와 연결하는 방법
CSS 파일을 적용시킬 HTML 문서에 태그로 연결하여 사용하면 된다.
2-1) HTML 문서 - link로 연결
CSS 파일을 적용시킬 HTML 문서에 태그로 연결하여 사용하면 된다.
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본구조</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css"> <!--연결
</head>
<body>
<span>Hello, World</span>
</body>
</html>
2-2) HTML 문서 - @import로 불러오기
<!DOCTYPE html>
<html>
<head>
<title>HTML 기본구조</title>
<meta charset="UTF-8">
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<span>Hello, World</span>
</body>
</html>@import url()은 여러 개의 CSS 파일을 한 번에 가져올 수 있다
<style type="text/css">
/* style css */
@import url("base.css");
@import url("style.css");
@import url("member.css");
</style>