[2023.03.02] 2. CSS 적용하기

[2023.03.02] 2. CSS 적용하기

2023. 3. 2. 17:35ㆍDev./CSS

🔍CSS를 적용하는 다양한 방법들을 알아보자

1. 인라인 방식

<p style="color: red; background-color: blue;">Hello world</p>

태그 자체에 style 속성으로 스타일을 주는 방식.
가상 요소(:hover, ::before, ::after 등)에 스타일을 줄 수 없어 사용에 제한이 있다.

2. 내부 스타일

	...
<head>
	...
	<style>
    p {
    	color: red;
        background-color: blue;
    }
    </style>
</head>
<body>
	<p>Hello World</p>
</body>
	...

html 파일 안의 head 태그 내에서 style 태그를 정의하여 스타일을 적용하는 방식
코드가 길어질수록 html 파일 길이가 길어지므로 비효율적

3. 외부 스타일

/* style.css */
p {
	color: red;
    background-color: blue;
}

<!-- index.html -->
	...
<head>
	...
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<p>Hello World</p>
</body>
	...

HTML과 CSS를 분리하여 코드의 가독성과 효율성을 높이는 가장 권장되는 방식.

link

현재 문서와 외부 리소스의 관계를 명시하는 태그.
빈 태그로 속성만을 포함.
head 태그 안에만 위치할 수 있다.
rel : 관계, css 파일은 stylesheet
href : 경로, 연결 시 참조할 파일의 위치

4. 다중 스타일 시트

<!-- 여러 개의 스타일시트를 불러올 수 있다. -->
	...
<head>
	...
	<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>
	...

<!-- index.html -->
	...
<head>
	...
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<p>Hello world</p>
</body>
	...

/* style.css */
@import url("reset.css");
@import url("font.css");
@import url("layout.css");
@import url("main.css");

css 파일 안에 css를 포함할 수 있다.
성능 측면에서 css 파싱 시간이 증가하므로 권장되지는 않는다.
번들러를 사용하여 css 파일을 합치거나 분리하여 필요한 상황에서만 로딩할 수 있도록 최적화 필요.

'Dev. > CSS' 카테고리의 다른 글

[2023.03.03] 6. CSS 텍스트 속성 (0)	2023.03.03
[2023.03.02] 5. CSS 단위 정리 (0)	2023.03.02
[2023.03.02] 4. CSS 상속 (0)	2023.03.02
[2023.03.02] 3. CSS 선택자(기본) (0)	2023.03.02
[2023.03.02] 1. CSS 기본 (0)	2023.03.02

Astin's Storage

Astin's Storage

태그

최근글

댓글

공지사항

아카이브

1. 인라인 방식

2. 내부 스타일

3. 외부 스타일

4. 다중 스타일 시트

'Dev. > CSS' 카테고리의 다른 글

관련글

티스토리툴바