과거에 공부했던 CSS를 다시 복습하는 차원에서 스타일과 스타일 시트에 대해서 정리하고자 합니다.
스타일 시트
웹 문서 안에서는 스타일 규칙을 여러 개 사용합니다. 이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 스타일 시트라고 합니다.
스타일 시트의 분류는 다음과 같습니다.
| 스타일 시트 | 브라우저 기본 스타일 | |
| 사용자 스타일 | 인라인 스타일 | |
| 내부 스타일 시트 | ||
| 외부 스타일 시트 | ||
1) 인라인 스타일
따로 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시
<h1>레드향<h1>
<p style="color: blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
2) 내부 스타일 시트
웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>멤버 소개</title>
<style>
h1 {
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
</head>
<body>
...
</body>
3) 외부 스타일 시트
웹 사이트를 만들 때 하나의 웹 문서로 끝나는 경우는 거의 없습니다. 대부분 디자인에 일관성이 있도록 같은 스타일을 여러 웹 문서에 사용하죠. 이를 위해 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 높고 필요할 때마다 가져와서 사용하는 것이 일반적 입니다.
이를 외부 스타일 시트라 하고 *.css 파일 확장자를 사용합니다.
외부 스타일 시트에는 <style> 태그를 사용하지 않으며, 외부 스타일 시트를 웹 문서에 연결해야 스타일이 문서에 적용됩니다.
외부 스타일 시트를 연결할 때 사용하는 태그는 <link> 태그 입니다.
/*style.css 외부 스타일 시트 파일*/
h1 {
padding: 10px;
background-color: #222;
color: #fff;
}<!-- index.html 파일 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>상품 소개 페이지</title>
<link rel"stylesheet" href="css/style.css">
</head>
<body>
<h1>레드향</h1>
<p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
</body>
'Frontend > HTML, CSS' 카테고리의 다른 글
| [CSS] 케스케이딩 스타일 시트 알아보기 (0) | 2024.08.27 |
|---|---|
| [CSS] CSS 기본 선택자 (2) | 2024.08.26 |
| [CSS] CSS를 활용한 로그인 페이지 꾸미기 (0) | 2024.08.07 |
| [HTML] 로그인 화면 만들기 (0) | 2024.08.07 |
