반응형
HTML 문서를 작성하고 스타일을 입히기 위해선
CSS를 적용해야 한다.
CSS를 적용하는 방법에는 크게 3가지가 있다.
1. 인라인 방식
태그에 직접 style="" 속성을 사용하여 스타일을 적용하는 방법이다.
<div style="text-align:center;">
<p style="font-size:13px;">Hello World</p>
<span style="color:#999; font-size:11px;">안녕하세요</span>
</div>
2. 내부 스타일 방식 (style태그)
<style> 태그를 사용해서 css를 작성한다.
주로 <head></head> 태그 안에 작성한다.
그리고 HTML5 이전엔 <style> 태그에 type 속성을 사용하였다.
<style type="text/css"> 라는 style 태그가 text/css의 타입으로 작성 되었다는 명시가 필요했지만
HTML5 이후론 더 이상 필요하지 않다.
<head>
<style>
div{text-align}
p{font-size:13px;}
span{color:#999; font-size:11px;}
</style>
</head>
3. 외부 스타일 방식 (link태그)
<head>태그 안에 <link> 태그를 사용해서 별도의 css파일을 불러온다.
| 속성 | 설명 |
| rel |
연결된 문서와의 관계 |
| type |
연결된 문서의 타입 |
| href |
연결된 문서의 위치 (css파일의 위치) |
<head>
<link rel="stylesheet" type="text/css" href="./css/layout.css">
</head>
반응형
'Frontend > CSS' 카테고리의 다른 글
| [css 속성] display (block, inline, inline-block, table) (0) | 2020.03.06 |
|---|---|
| 가상 클래스 vs 가상 요소 (0) | 2020.03.06 |
| CSS 우선순위 (0) | 2020.03.04 |
| CSS 적용을 위한 또 다른 방법, @import (0) | 2020.03.03 |
| CSS Reset (초기화) (0) | 2020.02.19 |