반응형
CSS 스타일 적용 3가지(인라인 스타일/내부 스타일시트/외부 스타일시트) 방법
인라인 스타일 / 내부 스타일 시트 / 외부 스타일 시트는 스타일 시트의 내용이 어느 곳에 위치하느냐에 분류됩니다.
인라인 스타일(Inline Style)
- HTML 파일 태그 안에 직접 지정하여 사용합니다.
- 태그에 직접 스타일을 지정할 때 용이합니다.
- HTML과 섞여 있으므로 인라인 스타일을 많이 사용할 경우 가독성 하락 및 유지보수가 용이하지 않습니다.
Ex)
<div>
<span style="background-color:#00 f;"> 좋은 하루
</div>
내부 스타일 시트(Internal Style Sheet)
- HTML 파일 안에 별도의 영역으로 스타일을 정의합니다. 일반적으로 <head> </head> 사이에 style을 적용합니다.
- <style> 태그를 사용하여 지정합니다.
- HTML 페이지 안에 위치하므로 영향을 주는 범위는 페이지 안의 전체 태그에 영향을 줍니다.
Ex)
<! doctype html>
<html>
<head>
<style type='text/css>
h1 {font-family:'돋움체' font-size:30px; }
</style>
</head>
</html>
외부 스타일 시트(External Style Sheet)
- 스타일 내용을 별도의 페이지로 만들어서 사용합니다.
- 하나의 스타일로 다수의 HTML 페이지에 적용하여 사용하고자 할 때 유용합니다.
- 하나의 스타일 페이지만 바꾸면 연결된 HTML 페이지에 적용되므로 유지, 보수에 용이합니다.
- 스타일 시트 파일의 확장자는. css입니다.
Ex) Style.css
h1 {
font-family:'돋움체' font-size:30px;
}
반응형
'프로그래밍 > 웹개발(WEB)' 카테고리의 다른 글
| 서비스형 소프트웨어 Sass(Software-as-a-Service) 란? (0) | 2021.09.13 |
|---|---|
| 렌더링 최적화방법 (0) | 2021.08.26 |
| CSSOM(CSS Object Model) 이란? (0) | 2021.08.24 |
| 렌더링 이란? (0) | 2021.08.23 |
| CSRF(Cross-Site Request Forgery)는 무엇일까요? (0) | 2021.08.12 |
댓글