[CSS] 기본 문법 - 스타일시트를 불러오는 방법들 정리

CSS 기본 문법

CSS 정의 방법에는 내부 스타일시트, 외부 스타일시트, @import 방식, 인라인 스타일시트 총 4가지가 있다.
이 중 외부 스타일시트가 많이 사용되며 CSS 코드가 적은 경우 내부 스타일시트가 사용된다.
인라인 스타일시트는 잘 사용되지 않지만 우선순위를 높여야 할 때 간혹 사용된다.
또한 CSS에서의 주석 처리는 /* */ 로 한다.

이번 포스팅에서는 4가지 CSS 정의 방법에 대해 살펴보고자 한다.

01. 내부 스타일시트

CSS를 HTML 문서 내에 <style> 태그로 기재하여 사용하는 방법으로 코드 양이 적을 때 사용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>내부 스타일시트</title>
    <style type="text/css">
        p { color : red; }
    </style>
</head>
<body>
    <p>안녕1</p>
</body>
</html>

결과 보기

안녕1

02. 외부 스타일시트

스타일 속성을 따로 저장하여 HTML 문서에 파일명으로 연결하는 방법. 스타일 속성은 *.css 확장자 파일로 저장하고 HTML에서는 <link> 태그를 이용해 가져오도록 한다. 가장 많이 쓰이는 방법.

내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되지만, 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용된다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>외부 스타일시트</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>안녕2</p>
</body>
</html>

외부 CSS 파일(style.css) 내용

@charset "utf-8";
p { color : red; }

결과보기

안녕2

03. @import

CSS 안에 다른 CSS 파일을 불러들일 때 사용하는 방식이다. 웹 폰트를 import 방식으로 불러올 때에도 사용되는 방법. 하지만 CSS 파일을 너무 여러개로 분리하면 복잡해지고 유지보수하기 힘들어지기 때문에 적당히 쓰도록 하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>스타일시트 포함</title>
    <!-- CSS 영역 안에 또 다른 CSS 파일을 불러옴 -->
    <style type="text/css">
        @import url ("style.css");
    </style>
</head>
<body>
    <p>안녕3</p>
</body>
</html>

결과 보기

안녕3

04. 인라인 스타일(inline style)

태그에 직접 CSS를 정의해주는 방법. 해당 요소(태그)에 직접 style=" " 형식으로 기술한다.
잘 쓰이지 않는 방법이지만 부득이하게 우선순위를 절대적으로 높여야 할 요소가 있을 경우 사용한다.
요소마다 일일이 인라인 스타일을 사용하게 되면 나중에 한꺼번에 수정할 때 피눈물 흘리게 될 것이니 남용은 금물!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>인라인 스타일</title>    
</head>
<body>
    <!-- 만약 p의 color를 blue로 설정한 CSS 파일이 이 문서에 사용됐다고 해도
    인라인 방식을 쓰면 우선순위가 가장 높아지기 때문에 빨간 글씨로 출력됨 -->
    <p style="color:red;">안녕4</p>
</body>
</html>

결과 보기

안녕4

'CSS' 카테고리의 다른 글

[CSS] SCSS & Pug 활용 - 강아지 애니메이션 만들기🐶 (10)	2022.08.18
[CSS] Sass(SCSS) 알아보기 (3)	2022.08.18
[CSS] 미디어 쿼리 활용하기 (7)	2022.08.14
[CSS] 비트맵 방식과 벡터 방식 알아보기 (11)	2022.08.09
[CSS] 레이아웃 배치 유형 3가지 알아보기 (6)	2022.07.25

코딩공책📚

[CSS] 기본 문법 - 스타일시트를 불러오는 방법들 정리