[CSS] HTML문서에 CSS 적용 방법

728x90

CSS?

CSS란 Cascading Style Sheets의 줄임말로 문서의 스타일을 지정해 주는 언어입니다.

여기서 문서(document)란 markup language(html, xml,...)를 말합니다.

CSS를 적용하는 방법에는 3가지 방법이 있습니다.

1. 인라인 태그 안에서 적용

<태그 style=“속성=‘값’;”>

태그 안에서 스타일 시트를 적용하는 방법입니다.

<li><font color=“red”>HTML</font></li>
<li><font color=“red”>CSS</font></li>

이와 같이 적용할 수 있지만 <li>는 정보 태그이며 <font>는 시각적인 효과입니다.

이렇듯 정보와 디자인이 혼합이 되어 있어서 보기에 좋지 않다는 단점이 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>인라인 스타일 시트</title>
</head>
<body>

	<h1>css 기본 문법</h1>
	
	<h3>1. 인라인 스타일 시트</h3>
	
	<b style="color:gray;">1. 인라인 스타일시트 : 우선순위 높다!</b>

</body>
</html>

2. 내부 스타일 시트

이 방법은 내부에 있는 <head>코드 안에 작성해 주는 방법을 말합니다.

<head>태그 안에 <style>...</style>에 스타일 시트를 지정해 줍니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 스타일 시트</title>

<style type="text/css">
	p {
		background-color: cornflowerblue;
	}
</style>

</head>
<body>

	<h1>css 기본 문법</h1>
	
	<h3>2. 내부 스타일 시트</h3>
	
	<p>
		<span>내부 스타일시트 : html 내부에 간단하게 작성</span>
	</p>

</body>
</html>

3. 외부 스타일 시트

외부에 CSS 파일을 작성한 후 head에 해당 파일을 불러오는 방법입니다.

(CSS 파일의 경로 매우 중요합니다!)

실제로 외부 스타일 시트를 따로 만들어 불러오는 방식으로 가장 많이 사용합니다.

<link href=”파일.css” rel=“stylesheet” type=“text/css”>

*.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>외부 스타일 시트</title>

<link href="css01.css" rel="stylesheet" type="text/css">

<!-- 
	href : 파일 경로
	rel : 연결 대상의 속성 (stylesheet -> 스타일과 관련된 파일)
	type : 해당 파일의 정보 (text로 이루어져 있으며 / css기능을 한다.)
 -->

</head>
<body>

	<h1>css 기본 문법</h1>
	
	<h3>3. 외부 스타일 시트</h3>
	
	<p>
		<b>외부 스타일시트 : css파일을 만든다.</b>
	</p>

</body>
</html>

css01.css

b{
	color : Magenta;
}

728x90

'Web > CSS' 카테고리의 다른 글

[CSS] 상자(box) (0)	2021.12.12
[CSS] 배경(background) (0)	2021.12.11
[CSS] 단락(paragraph) (0)	2021.12.10
[CSS] 폰트(font) (0)	2021.12.09
[CSS] 선택자(selector) (0)	2021.12.08

'Web > CSS' 카테고리의 다른 글

티스토리툴바