Web/CSS
[CSS] HTML문서에 CSS 적용 방법
씨네
2021. 12. 7. 09:15
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