# 이번 강의에서는 css파일을 별도로 관리하는 방법을 알아보자
# 별도로 관리하는 이유는 웹페이지에 요소를 추가할 때 마다 html코드가 아닌 css코드도 매우 많이 추가되기 때문에 가시성이 떨어질 뿐 만 아니라 관리하기 어렵다.
# 참고로 아웃소싱이란 외부에 작업을 맡기는 행위 등을 뜻하는데 이 강의에서는 css파일과 html파일의 분할을 의미하는 것 같다.
[예시]
<!DOCTYPE html>
<head>
<style>
h1 {
font-family: sans-serif;
text-align: center;
color: #8f15c7
"
}
p{
font-family: sans-serif;
text-align: center;
color: #43ad43"
}
a{
color: rgb(167, 1, 87);
user-select: none;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
</style>
<title>My Daily Challenge</title>
</head>
<body>
<h1>Max 'Challenge for Wednesday, january 17th</h1>
<p>
Learn about the basics of web development - specifically dive into HTML &
CSS.
</p>
<p>
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resorces.</a>
</p>
</body>
지금까지 작성한 코드 중 절반 이상이 css코드이다...
이를 분리하기 위해서는 <Link>라는 요소를 사용하게 되는데 Link는 closing tag가 없는 empty element이다.
Link를 통해 css 파일을 아웃소싱하는 방법에 대해 실습을 진행해보자!
step 1. css파일 생성 후 css 선택자들만 파일에 저장한다.
h1 {
font-family: sans-serif;
text-align: center;
color: #8f15c7
"
}
p{
font-family: sans-serif;
text-align: center;
color: #43ad43"
}
a{
color: rgb(167, 1, 87);
user-select: none;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
step 2. style 태그 대신 link 태그를 사용한다.
<!DOCTYPE html>
<head>
<link href="daily-challenge.css", rel="stylesheet">
<title>My Daily Challenge</title>
</head>주의할 점은 브라우저는 css 확장자로 css를 판별하지 않기 때문에 rel 속성을 통해 css 파일임을 알려줘야 한다.
실행결과
가시적인 변화는 없다 = 잘 작동한다.
'웹개발 > HTML, CSS 기초' 카테고리의 다른 글
| [html, css 기초] 13. 외부 폰트 사용법 (0) | 2024.01.19 |
|---|---|
| [html, css 기초] 12. 파일 병합 및 id (0) | 2024.01.19 |
| [html, css 기초] 10. 링크 설정 기초 (0) | 2024.01.18 |
| [html, css 기초] 9. html 기본 구조 (0) | 2024.01.18 |
| [html, css 기초] 8. css - style (0) | 2024.01.18 |
