반응형
1. 스타일 주석
- 소스를 작성하고 시간이 지나 다시 본인이 작성한 소스를 보면 "이건 뭐였지?"라는 생각이 자주 듭니다.
본인이 만든 소스를 다른 사람이 봤을 때도 간단하게 코드의 설명을 적어놓으면 훨씬 더 이해하기 쉽겠죠?
CSS3에서 주석을 표시할 때는 /*와 */ 사이에 내용을 입력하는데 주석을 한 줄만 입력하거나 여러 줄을 입력할 수도
있습니다.
- 다음은 스타일 주석을 사용한 예제입니다. 실제로 스타일 소스를 작성할 때는 주석을 이용해 어떤 용도로 사용한 규칙인지
표시해 두는 것이 좋습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!DOCTYPE html>
<html>
<head>
<charset="EUC-KR">
<title>CSS3 스타일 주석</title>
<style>
/*
<h1>태그와 <p>태그의 스타일을 지정해보자
*/
h1{
color:orange; /*글자 크기*/
font-size:20px; /*글자 색*/
}
p{
color:blue; /*글자 색*/
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>HTML5, CSS3, JavaScript</p>
</body>
</html> |
cs |
<사진 1.1> 여러 줄 주석 과 한줄짜리 주석
- <사진1.1>코드는 <h1>태그와 <p>태그가 적용된 곳에 스타일을 지정하였고 주석으로 스타일의 설명을 작성했습니다.
다음은 결과 화면입니다.
<사진 1.1 결과 화면>
- 우리가 작성한 주석은 코드에는 보이지만 웹 브라우저에는 보이지 않는다는 것을 알 수 있습니다.
반응형
'Web Basic > CSS3' 카테고리의 다른 글
| [CSS3] 내부 스타일, 외부 스타일 시트와 인라인 스타일이란? (0) | 2018.03.30 |
|---|---|
| [CSS3] CSS란? 기초 용어 및 표기 방법 (0) | 2018.03.19 |