웹페이지에 CSS를 넣는 방법이 2가지 있다.
- style 태그를 사용하는 방법
- style 속성을 사용하는 방법
다음의 코드를 보자.
<!DOCTYPE html>
<html>
<head>
<title>나의 객관화</title>
<meta charset="utf-8" />
<style>
a {
color: black;
text-decoration: none;
}
</style>
</head>
<body>
<h1><a href="index.html">채소</a></h1>
<ol>
<li><a href="1.html">나의 현재</a></li>
<li><a href="2.html" style="color: red">나의 미래</a></li>
<li><a href="3.html">앞으로 해야할 일</a></li>
</ol>
</body>
</html>
보다시피 style 태그를 head 태그의 자식 태그로 사용하는 경우와 특정 태그의 속성으로 사용하는 방법이 있다.
CSS는 위에서부터 아래로 적용되므로 결과를 보면 다음과 같다.
앞서 배운 CSS의 용어를 정리해보자.
style 태그 안의 특정 태그는 선택자(Selector)라고 한다. 여기서는 웹페이지에 있는 모든 a 태그를 '선택'한다는 의미에서 선택자 인 것이다.
이 태그에 어떤 효과를 줄 것인지 선언하는 부분을 선언(Declaration)이라고 한다.
선언에는 속성(Property)과 값(Value)이 있다.
'WEB > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] #8.박스 모델 (0) | 2021.12.05 |
|---|---|
| [HTML/CSS] #7.선택자 (tag, class, id) (0) | 2021.12.01 |
| [HTML/CSS] #5.링크 (0) | 2021.11.30 |
| [HTML/CSS] #4.목록 태그 (0) | 2021.11.29 |
| [HTML/CSS] #3.속성과 img (0) | 2021.11.29 |
