스타일 적용할 경우 세미콜론(;)으로 구분하고 중괄호({ , }) 안에서 적용할 스타일을 나열함
티스토리 뷰
1. 개념
스타일 적용 기본 규칙
2. 태그
스타일 적용 기본 규칙
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
<style>
2
p
{
color
:
blue
;
font-size
:
20px
;
}
</style>
</head>
<body>
1
<div>
키보드와 하루 입니다
</div>
<div>
2
<p>
키보드와 하루 입니다
</p>
</div>
</body>
</html>
|
결과 화면
코드 설명
1
<div>
키보드와 하루입니다
</div>
HTML만 본다고 하면 똑같은 div 안에 "키보드와 하루입니다" 라는 텍스트를 입력하였습니다.
여기서는 아무런 스타일을 적용해 준 것이 없습니다.
여기서는 아무런 스타일을 적용해 준 것이 없습니다.
2
<div><p>
키보드와 하루입니다
</p></div>
2번에서는 p태그를 키보드와 하루 앞에 붙였습니다.
p 태그는 기본적으로 단락을 만드는데 사용되는 태그라서 그것이 적용이 되었습니다.
그런데 여기에 글자 색깔과 크기를 스타일로 적용하였습니다.
p라는 선택자에게 다음과 같은 스타일을 적용하라고 할 때 세미콜론으로 적용할 스타일들을 구분하고 중괄호 안에 적용할 스타일을 써내려 갔습니다.
이렇게 적용하는 것이 스타일을 적용하는 기본 규칙에 해당합니다.
p 태그는 기본적으로 단락을 만드는데 사용되는 태그라서 그것이 적용이 되었습니다.
그런데 여기에 글자 색깔과 크기를 스타일로 적용하였습니다.
p라는 선택자에게 다음과 같은 스타일을 적용하라고 할 때 세미콜론으로 적용할 스타일들을 구분하고 중괄호 안에 적용할 스타일을 써내려 갔습니다.
이렇게 적용하는 것이 스타일을 적용하는 기본 규칙에 해당합니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] ID 선택자 - 한번만 스타일 적용 (0) | 2021.03.16 |
|---|---|
| [css3] 클래스 선택자 - 특정 부분에만 스타일 적용(.class명) (0) | 2021.03.15 |
| [css3] * , tag - 전체 선택자와 태그 선택자 (0) | 2021.03.12 |
| [css3] 내부 스타일과 외부스타일(.css) (0) | 2021.03.10 |
| [css3] /* */ - 스타일에서 주석처리 (0) | 2021.03.09 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday