* - 모든 요소에 적용할 때 사용함
주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용
기본 스타일을 초기화 해서 설정할 때 사용
tag - 특정 태그가 쓰인 모든 요소에 스타일 적용
2. 태그
* , taghtml5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
1
*
{
margin-left : 30px ;
font-weight : bold ;
}
2
p
{
color : blue ;
}
h1
{
color : red ;
}
</style>
</head>
<body>
<p>
p 태그에 적용될 요소
</p>
<h1>
h1태그에 적용될 요소
</h1>
</body>
</html>
|
결과 화면
코드 설명
1
* {..............}
* 태그로 모든 요소에 2가지를 적용해 보았습니다.
하나는 margin-left 라고 해서 왼쪽 여백을 30으로 주었고 , 전체 모든 글자를 굵게 하는 font-weight:bold 로 설정을 해준 것입니다.
지금 화면 1에서 보시는 것처럼 전체 모든 요소의 여백이 왼쪽으로 30으로 떨어지고 글자가 굵어진 것을 확인하실 수 있습니다.
하나는 margin-left 라고 해서 왼쪽 여백을 30으로 주었고 , 전체 모든 글자를 굵게 하는 font-weight:bold 로 설정을 해준 것입니다.
지금 화면 1에서 보시는 것처럼 전체 모든 요소의 여백이 왼쪽으로 30으로 떨어지고 글자가 굵어진 것을 확인하실 수 있습니다.
2
p,h1 {..............}
두번째는 각각의 태그로 스타일을 적용하였습니다.
p태그에는 글자 색을 blue로 설정을 해준 것이고 h1은 red로 설정해 주었습니다.
2번에서와 같이 적용하는 것을 태그 선택자로 스타일을 적용한 모습입니다.
p태그에는 글자 색을 blue로 설정을 해준 것이고 h1은 red로 설정해 주었습니다.
2번에서와 같이 적용하는 것을 태그 선택자로 스타일을 적용한 모습입니다.