CSS - 포함
안녕하세요, 웹 개발자 꿈나이들! 오늘 우리는 CSS 포함의 흥미로운 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 교사로서 저는 여러분을 안내해 드릴 테니 HTML 문서에 어떻게 스타일을 더할 수 있는지 배워보세요. 커피 한 잔 (또는 차라도 좋아요)을 손에 들고, 시작해보겠습니다!
내장 CSS - <style> 엘리먼트
가장 간단한 방법으로 CSS를 HTML 문서에 포함시키는 것은 <style> 엘리먼트입니다. 파티에 입을 옷을 고르는 것을 생각해보세요. <style> 엘리먼트는 파티를 나가기 직전에 옷을 입는 것과 같습니다.
이렇게 보입니다:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}
</style>
</head>
<body>
<h1>제 스타일 있는 페이지에 오신 것을 환영합니다!</h1>
</body>
</html>이 예제에서 우리는 body와 h1 엘리먼트에 스타일을 정의했습니다. body는 연회색 배경을 가지고 Arial 폰트를 사용하며, h1은 어두운 회색이고 중앙에 정렬됩니다.
인라인 CSS - style 속성
다음으로 인라인 CSS를 살펴보겠습니다. 이는 파티를 나가면서 멋진 모자나 멋진 목걸이를 장신하는 것과 같습니다.
다음은 예제입니다:
<p style="color: blue; font-size: 18px;">이 문단은 파랑색이고 폰트 크기가 큽니다.</p>이 경우, 우리는 <p> 태그에 직접 style 속성을 사용하여 스타일을 적용했습니다. 텍스트는 파랑색이고 폰트 크기는 18ピクセル입니다.
외부 CSS - <link> 엘리먼트
이제 외부 CSS에 대해 이야기해 보겠습니다. 이는 어떤 행사에 입을 옷이 가득 찬 별도의 옷장을 가지고 있는 것과 같습니다.
먼저, 별도의 CSS 파일을 만들어 보겠습니다 (이를 styles.css라고 부릅니다):
/* styles.css */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
text-align: center;
}그런 다음, 이를 HTML 파일에 연결합니다:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>제 스타일 있는 페이지에 오신 것을 환영합니다!</h1>
</body>
</html><link> 엘리먼트는 브라우저에게 CSS 파일을 어디서 찾을 수 있는지 알려줍니다. 이는 옷장에 대한 방향을 제공하는 것과 같습니다!
导入 CSS - @import 규칙
@import 규칙은 개인 스타일리스트가 다른 상점에서 옷을 가져오는 것과 같습니다. 이는 하나의 CSS 파일을 다른 파일로 가져오는 것을 허용합니다.
주 CSS 파일에서:
/* main.css */
@import url('typography.css');
@import url('colors.css');
body {
background-color: #f0f0f0;
}여기서 우리는 주 CSS 파일로 두 개의 다른 CSS 파일을 가져왔습니다. 이는 스타일을 정리하는 좋은 방법입니다!
CSS 규칙 재정의
이제 스타일이 충돌할 때 어떤 일이 일어나는지 이야기해 보겠습니다. 이는 두 개의 옷 중 하나를 선택해야 할 때와 같습니다.
다음은 CSS 특이성 표입니다. 가장 덜 특이한 것에서 가장 특이한 것으로:
| 선택자 유형 | 예시 | 특이성 |
|---|---|---|
| 엘리먼트 | p |
1 |
| 클래스 | .highlight |
10 |
| ID | #header |
100 |
| 인라인 | style="color: red;" |
1000 |
선택자가 더 특이할수록 우선순위가 높습니다. 예를 들어:
<style>
p { color: blue; }
.highlight { color: yellow; }
#special { color: green; }
</style>
<p class="highlight" id="special" style="color: red;">저는 무엇 색이죠?</p>이 경우, 텍스트는 빨간색이 됩니다. 인라인 스타일이 가장 높은 특이성을 가지기 때문입니다.
구형 브라우저 처리
때로는 새로운 CSS를 이해하지 못하는 구형 브라우저에 대응해야 할 때가 있습니다. 이는 옷장에 클래식한 옷을 준비해 두는 것과 같습니다.
background-color: #f0f0f0; /* 구형 브라우저 대체 */
background-color: rgba(240, 240, 240, 0.5); /* 현대 브라우저의 알파 투명도 */여기서 우리는 구형 브라우저에 대해 단색을 제공하고 현대 브라우저에 대해 반투명색을 제공합니다.
CSS 주석
마지막으로 CSS 주석에 대해 이야기해 보겠습니다. 이는 자신이나 다른 개발자에게 스타일 선택을 설명하는 작은 노트와 같습니다.
/* 이는 CSS 주석입니다 */
body {
background-color: #f0f0f0; /* 연회색 배경 */
font-family: Arial, sans-serif; /* 가독성이 좋은 sans-serif 폰트 사용 */
}주석은 브라우저에 의해 무시되지만, 코드 이해와 유지보수에 매우 유용할 수 있습니다.
그럼 여러분! 우리는 HTML 문서에 CSS를 포함시키는 다양한 방법을 다루었습니다. 연습이 완벽을 만든다는 것을 기억하고, 다양한 방법을 실험해 보세요. 즐거운 스타일링을 기원합니다!
Credits: Image by storyset