1. 내부 스타일 (embedded)
2. 인라인 스타일 (inline)
3. 외부 스타일 (external)
1. 내부 스타일 (embedded)
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
</style>
<title>CSS</title>
</head>
<body>
</body>
</html>
- 코드는 위에서부터 아래로 읽는다.
- style 태그는 body 태그 안에 맨 마지막에 놔둬도 적용이 된다. 렌더링이 잘 되지만, 추후 웹 페이지에 다양한 기능들로 인해 스크립트들이 추가되고, 맨 마지막에 style 태그 코드가 있다면? 맨 처음에는 style 적용이 안된 상태로 렌더링이 되었다가 다양한 기능 로딩후에 style 적용이 된 상태로 렌더링 될 것이다. 그래서 style 태그는 head에 정의해두는 것이다.
2. 인라인 스타일 (inline)
<body>
<h1 style="color:red">Welcom!</h1>
</body>
3. 외부 스타일 (external)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/main.css" />
<title>CSS</title>
</head>
<body>
</body>
</html>
- link 태그의 위치는 최상단에 두어야 한다.
- html의 용량이 커지면 커질수록 브라우저가 html 파일을 읽으면서 컨텐츠들을 불러오는데 걸리는 시간과 비용이 오래걸리기 때문에 link 태그는 제일 상단에 로드해야된다.
댓글