style을 하나씩 적다보면 문서가 굉장히 길어지게 된다. 이를 방지하기 위해 따로 CSS파일를 만든다.
css 파일
body{
font-family: sans-serif;
width: 480px;
margin: 82px auto
}
#context {
background-color: yellow;
}
.context2{
color:red;
}html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="context">
아메리칸 항공 11편 테러 사건
</div>
<div class="context2">
(영어: American Airlines Flight 11 Terror Incident, AA11)
</div>
<div class="context2">
은 2001년 9월 11일 알카에다 소속 테러리스트 5명이 미국 국내선 항공편 '아메리칸 항공 11편'을 납치하여 9·11 테러를 일으킨 사건이다.[2] 이 테러의 주도범인 모하메드 아타는 항공기를 뉴욕 세계 무역 센터 북쪽 타워에 충돌시켰다. 그로 인해 탑승객 92명과 충돌 지점에 있던 사람 다수가 사망했다.[3] 이 항공기는 아메리칸 항공 소속 보잉 767-223ER 기종으로, 원래 미국 매사추세츠주 보스턴 로건 국제공항에서 이륙하여 캘리포니아주 로스앤젤레스 국제공항에 착륙할 예정이었던 아침 미국 대륙 횡단 항공편이었다.[4]
</div>
</body>
</html>기존에 <style>에 썼던 내용을 <style> 태그를 제거하고 옮기면 CSS 파일 완성이다.
그 후 <link rel="stylesheet" href="css 파일 경로">를 써주면 기존과 똑같은 실행결과가 나온다.
'HTML, CSS > CSS' 카테고리의 다른 글
| [CSS] 코멘트 (0) | 2023.08.26 |
|---|---|
| [CSS] 크기 단위 (0) | 2023.08.26 |
| [CSS] CSS 규칙, id, class (0) | 2023.08.26 |
| [CSS] 여백 (0) | 2023.08.26 |
| [CSS] 너비, 높이 (1) | 2023.08.26 |
