CSS 적용하기
1. 인라인 방식
인라인 방식은 HTML 태그 내 style
속성을 통해 스타일을 직접 지정하는 방식입니다. 이 방법은 소규모 테스트나 특수 목적에 유용할 수 있지만, 스타일이 조금만 길어져도 복잡도가 급격히 상승하며 뒤에서 배울 가상 클래스와 가상요소(:hover
, ::before
, ::after
) 스타일을 적용할 수 없어 사용에 제한이 있습니다. 따라서 일반적인 실무 환경에서는 권장되지 않습니다.
<p style="color:yellow; background-color:black;">Hello world</p>
<p style="color:yellow; background-color:black;">Hello world</p>
2. 내부 스타일
내부 스타일은 HTML 파일 내 <style>
태그를 사용하여 스타일을 정의하는 방식입니다. 인라인 방식보다 코드의 재사용성과 가독성이 향상되지만, HTML 파일이 길어질수록 복잡도가 증가하여 효율성이 떨어질 수 있습니다. 한 파일 내에서 스타일을 관리할 수 있다는 점에서는 편리합니다. 국내에서는 Daum 포털이 한동안 이 방식을 사용한 바 있습니다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>내부 스타일</title>
<style>
p {
color: yellow;
background-color: black;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>내부 스타일</title>
<style>
p {
color: yellow;
background-color: black;
}
</style>
</head>
<body>
<p>Hello world</p>
</body>
</html>
3. 외부 스타일
외부 스타일은 HTML 파일에서 <link>
태그를 사용해 외부 CSS 파일을 연결하는 방식입니다. <link>
태그는 head
요소 내에 위치하며, 외부 스타일 시트는 .css
확장자를 가지며 HTML 파일과 분리하여 관리할 수 있습니다.
속성으로는 rel
과 href
를 사용합니다. rel
은 relations의 약자로 대상 파일의 속성을 나타내며, href
는 hyper-references의 약자로 연결 시 참조할 파일의 위치를 나타냅니다.
실무에서 가장 많이 사용하는 방법입니다. HTML과 CSS를 분리하면 코드의 가독성과 효율성, 유지보수성이 높아집니다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>외부 스타일</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello world</p>
</body>
</html>
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>외부 스타일</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello world</p>
</body>
</html>
/* style.css */
p {
color: yellow;
background-color: black;
}
/* style.css */
p {
color: yellow;
background-color: black;
}
4. 다중 스타일 시트
4.1 기본
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>외부 스타일</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="font.css" />
<link rel="stylesheet" href="layout.css" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<p>Hello world</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>외부 스타일</title>
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="font.css" />
<link rel="stylesheet" href="layout.css" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<p>Hello world</p>
</body>
</html>
4.2 css 파일 안에 css 포함하기
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>외부 스타일</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello world</p>
</body>
</html>
<!-- index.html -->
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>외부 스타일</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<p>Hello world</p>
</body>
</html>
/* style.css */
@import url('reset.css');
@import url('font.css');
@import url('layout.css');
@import url('main.css');
/* style.css */
@import url('reset.css');
@import url('font.css');
@import url('layout.css');
@import url('main.css');
@import
는 문서 최상단에 있어야 합니다!- CSS 종속성을 같은 파일에 깔끔한 모습으로 유지할 수 있다는 장점이 있습니다.
- 하지만, 성능 측면에서는 CSS를 파싱하기 위한 시간이 더 증가하기 때문에 권장하지는 않습니다.
- import로 가져온 CSS 파일을 병렬로 다운로드할 수 없으므로 렌더링 프로세스의 지연시간이 증가합니다.
- 번들러를 사용하여 CSS 파일을 합치거나 분리하여 필요한 상황에서만 로딩할 수 있도록 최적화가 필요합니다!
@
at-rule
@
가 붙는 문법을 at-rule이라고 부릅니다! import만 있는 것은 아니고 다양한 엣룰이 있습니다!
@charset | 스타일시트에서 사용하는 문자 인코딩을 지정합니다. 문서에서 가장 먼저 선언합니다. |
---|---|
@import | 다른 스타일시트에서 스타일 규칙을 가져옵니다. @charset 바로 다음에 선언되어야 합니다. |
@font-face | 디바이스에 없는 폰트를 다운받아 적용할 때 사용합니다. |
@keyframes | 애니메이션을 만들 때 사용합니다. |
@media | 사용자 디바이스에 따른 스타일을 분기 처리하고자 할 때 사용합니다. |
@supports | 특정 CSS 속성을 브라우저가 지원하는지 확인하고 스타일을 선언하고자 할 때 사용합니다. |