CSS 4가지 스타일은 무엇인지 알아봅시다.
1. 내부 스타일시트(internal style sheet)
<head>
<style>
body { background-color: red; }
h2 { color: white; text-decoration: underline; }
</style>
</head>
내부 스타일 시트를 이용하는 방법은 HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용합니다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다.
HTML 페이지 안에 위치하므로 영향을 주는 범위는 페이지 안의 전체 태그에 영향을 줍니다.
2. 외부 스타일시트(external style sheet)
<head>
<link rel="stylesheet" href="javascript/assets/css/expand_style.css">
</head>
외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다.
외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장됩니다.
스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됩니다.
3. 인라인 스타일(Inline style)
<body>
<h2 style="color:green; text-decoration:underline">
인라인 스타일을 이용하여 적용하였습니다.
</h2>
</body>
인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.
태그에 직접 스타일을 지정할 때 용이하지만 HTML과 섞여 있으므로 인라인 스타일을 많이 사용할 경우 가독성 하락 및 유지보수가 용이하지 않습니다.
4. import
@import url("assets/css/style.css");
다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰입니다.
표준 CSS import 구문 규칙은 다른 모든 타입보다 먼저 작성되어야 합니다. 즉, 최상단에 위치해야 됩니다.
import 는 중첩 명령문이 아니기 때문에 조건부 그룹 규칙 내에 사용할 수 없습니다.
style 내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지 않아서 거의 쓰이지 않습니다.
이상 CSS 4가지를 알아봤습니다.
여전히 어려운거같습니다... 곧 익숙해지겠죠?