2.1 외부 스타일 시트
CSS (Cascading Style Sheets)를 HTML 문서에 연결하면 웹 페이지를 스타일링하여 더욱 멋지게 만들고 사용 편의성을 높일 수 있어. CSS를 HTML에 연결하는 방법은 여러 가지가 있고, 각각의 방법은 특정 상황에서 더 적합해.
CSS 연결 방법:
- 외부 스타일 시트 (External Stylesheets)
- 내부 스타일 시트 (Internal Stylesheets)
- 인라인 스타일 (Inline Styles)
외부 스타일 시트 (External Stylesheets)
외부 스타일 시트는 독립적인 CSS 파일로, <link> 태그를 통해 HTML 문서에 연결돼. 이 방법은 스타일을 문서의 구조와 분리할 수 있게 하여 스타일 관리를 용이하게 하고 여러 페이지에서 CSS 파일을 재사용할 수 있어.
장점:
- 스타일 관리의 편리성
- 여러 페이지에서 스타일 재사용
- 캐싱 및 성능 개선
문법:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>외부 스타일 시트 예제</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>제목</h1>
<p>텍스트</p>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>외부 스타일 시트 예제</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>제목</h1>
<p>텍스트</p>
</body>
</html>
CSS 파일 예제(styles.css):
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
2.2 내부 스타일 시트 (Internal Stylesheets)
내부 스타일 시트는 HTML 문서 자체의 <head> 섹션 안에 <style> 태그를 통해 포함돼. 외부 파일이 접근 불가능할 때나 단일 페이지에 스타일을 적용하고 싶을 때 유용해.
장점:
- 단일 페이지에서의 사용 용이성
- 추가 파일 필요 없음
문법:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>내부 스타일 시트 예제</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #333;
}
p {
color: #666;
}
</style>
</head>
<body>
<h1>제목</h1>
<p>텍스트</p>
</body>
</html>
2.3 인라인 스타일 (Inline Styles)
인라인 스타일은 HTML 요소에 style 속성을 사용하여 직접 적용돼. 특정 요소의 스타일을 빠르게 테스트하거나 변경해야 할 때 유용해.
장점:
- 빠르고 세부적인 스타일 적용
- JavaScript를 통한 동적 변경에 적합
단점:
- 많은 요소에서 스타일 관리의 어려움
- 스타일 재사용의 어려움
문법:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>인라인 스타일 예제</title>
</head>
<body>
<h1 style="color: #333; font-family: Arial, sans-serif;">제목</h1>
<p style="color: #666; background-color: #f4f4f4;">텍스트</p>
</body>
</html>
모든 방법을 한 페이지에서 사용한 예제:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>모든 CSS 연결 방법 예제</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
background-color: #f4f4f4;
}
.internal {
color: #333;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1 class="internal">제목</h1>
<p style="color: #666;">이 텍스트는 인라인 스타일을 사용해 스타일이 지정돼 있어.</p>
</body>
</html>
2.4 스타일 우선순위
다양한 방법으로 스타일을 연결할 때 적용 우선순위는 다음과 같이 결정돼:
- 인라인 스타일 (Inline Styles)이 가장 높은 우선순위를 가짐
- 내부 스타일 시트 (Internal Stylesheets)가 그 다음 우선순위
- 외부 스타일 시트 (External Stylesheets)가 가장 낮은 우선순위를 가짐
동일한 요소에 동일한 우선순위의 여러 스타일을 적용할 경우, 우선순위는 선택자의 구체성과 선언 순서에 따라 결정돼.
스타일 우선순위 예제:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>스타일 우선순위 예제</title>
<link rel="stylesheet" href="styles.css">
<style>
p {
color: blue; /* 내부 스타일 */
}
</style>
</head>
<body>
<p style="color: red;">이 텍스트는 인라인 스타일의 우선순위 때문에 빨간색이 될 거야.</p>
</body>
</html>
GO TO FULL VERSION