CSS (Cascading Style Sheets) 작성 방법
- CSS : HTML 요소가 보여지는 방식을 정의하는 스타일시트 언어
- CSS 작성 형식 : 선택자 { 속성 : 값; }
- 선택자(selector) : 규칙을 식별하는 알파벳과 숫자로 된 문자
- 속성(attribute) : 정의하는 내용을 나타낸다.
- 값(value) : 속성에 대입해 속성의 성질을 나타낸다.
h1 { color : red; }
h2 {
background-color: yellow;
color: blue;
font-size: 18pt;
}
/* CSS 주석입니다. */
- 적용 방식
- 인라인 스타일(Inline Style)
- 내부 스타일(Internal Style Sheet)
- 외부 스타일(External Style Sheet)
CSS - Inline Style
- 인라인 스타일(Inline Style) : 태그에 스타일을 직접 작성하는 방식
- 장점 : 이해하기 쉽다.
- 단점 : 태그가 길어지며 용량이 커진다.
<h1 style="color:red;">인라인 스타일</h1>
<span style="font-size:15pt;color:yellow;">적용 예제</span>
CSS - Internal Style Sheet
- 내부 스타일(Internal Style Sheet) : <head>에 <style>태그를 추가하고 스타일을 작성하는 방식
- 장점 : 각 페이지마다 다른 스타일을 적용할 수 있다.
- 단점 : 동일한 스타일의 페이지가 여러 개 일 때 중복된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS - Internal Style</title>
<!-- 스타일 명시 -->
<style type="text/css">
h1 {color: green;}
span {font-size: 20pt;}
</style>
</head>
<body>
<h1>외부 스타일</h1>
<span>적용 예제</span>
</body>
</html>
CSS - External Style Sheet
- 외부 스타일(External Style Sheet) : 스타일이 작성된 별도의 파일을 링크하는 방식
- 장점 : 한 번 만들어둔 스타일을 재활용할 수 있다.
@charset "UTF-8";
span {
font-size: 20pt;
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS - External Style</title>
<!-- CSS 파일 링크 -->
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<span>외부 스타일</span>
</body>
</html>