1.CSS 스타일 적용 방법

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

inline_internal_external

Img Ref

1. inline style

‘한 줄로 늘어선’이라는 의미의 inline

태그 내부에 style attribute로 직접 스타일을 길게 늘어써서 적용하는 방식

index.html


<p style="color:red;">안녕하세요</p>

TailwindCSS 의 사용방식

‘내부의’라는 의미의 internal

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

index.html


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

‘외부의’라는 뜻을 가진 external

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

style.css


p { color: red; }

index.html


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