CSS 스타일 적용 방식

개발하는지호 2023. 11. 26. 22:05

CSS에는 크게 3가지 스타일 적용 방식이 존재한다.

1. Inline

2. Internal

3. External

1. Inline style

'한 줄로 늘어선' 이라는 의미의 inline, 태그 내부에 style attribute 속성으로 직접 스타일을 길게 늘어써서 적용하는 방식

<p style="color:red;"> 안녕하시오~</p>

2. Internal style

'내부의'라는 의미의 internal, HTML 파일 상단에 별도의 <style></style> 태그 내부에 CSS코드를 모아서 작성해서 스타일을 적용하는 방식

<html>
	<head>
	...
	<style>
		p { color: red; }
	</style>
	</head>
	<body>
		<p>안녕하세요</p>
	</body>
</html>

3. External Style

'외부의'라는 뜻을 가진 external, 별도의 CSS 파일을 생성하여, 외부에서 작성한 스타일을 적용하는 방식

<!-- index.html -->
<html>
	<head>
		...
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<p>안녕하세요</p>
	</body>
</html>

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