스타일을 적용하고자 할 때 한눈으로 보기 편한게 수정하고 묶어 놓게 되는데 이때 문서 안에 스타일을 정의해 놓으면 내부 스타일이라 하고 파일을 별도로 만들어 연결해서 사용하는 것을 외부 스타일이라고 함
티스토리 뷰
1. 개념
내부 스타일과 외부스타일(.css)
2. 태그
내부 스타일과 외부스타일(.css)
html5 코드
test.html
|
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>
2
<link rel
=
"stylesheet"
href
=
"test.css"
>
<style>
1
p
{
color
:
blue
;
font-size
:
20px
;
}
</style>
</head>
<body>
<p>
내부 스타일을 적용한 문구
</p>
<h1>
외부 스타일을 적용한 문구
</h1>
</body>
</html>
|
test.css
|
1
2
3
4
5
6
|
2
h1
{
color
:
red
;
font-weight
:
bold
;
}
|
결과 화면
코드 설명
1
p {..............}
p 선택자에 적용할 스타일은 문서 내에서 선언하고 있습니다.
head 태그 사이에 style 이라는 태그를 사용하여 그 안에 p 선택자에서 적용하고자 하는 스타일을 선언해 준 것입니다.
이렇게 해주는 것을 내부 스타일이라고 합니다.
head 태그 사이에 style 이라는 태그를 사용하여 그 안에 p 선택자에서 적용하고자 하는 스타일을 선언해 준 것입니다.
이렇게 해주는 것을 내부 스타일이라고 합니다.
2
h1 {..............}
h1의 경우에는 test.css 라는 css 파일을 만들어서 html에서 호출하였습니다.
link rel 로 text.css 라는 외부 스타일 파일 호출하여서 1번처럼 내부에서 선언하지 않아도 따로 파일로 만들어서 스타일만 지정해서 사용할 수 있습니다.
link rel 로 text.css 라는 외부 스타일 파일 호출하여서 1번처럼 내부에서 선언하지 않아도 따로 파일로 만들어서 스타일만 지정해서 사용할 수 있습니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] ID 선택자 - 한번만 스타일 적용 (0) | 2021.03.16 |
|---|---|
| [css3] 클래스 선택자 - 특정 부분에만 스타일 적용(.class명) (0) | 2021.03.15 |
| [css3] * , tag - 전체 선택자와 태그 선택자 (0) | 2021.03.12 |
| [css3] /* */ - 스타일에서 주석처리 (0) | 2021.03.09 |
| [CSS3] 스타일 적용 기본 규칙 (0) | 2021.03.08 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday