728x90
관련 출처 :
CSS
종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, 마크업 언어가 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있다. 즉, CSS는 웹 페이지를 꾸며주는 언어로서 HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다.
웹이 성장하면서 HTML의 기술 역시 중요해지고 이 정보를 잘 표현하는 것이 중요해지기 시작했다. CSS는 디자인에 더욱 효율적인 문법 체제를 가지고 있기 때문에 HTML에서 디자인을 빼고 정보에만 집중, 대신 디자인을 담당하는 새로운 문법을 가지고 있는 CSS가 생기게 되었다.
아래와 같이 HTML만으로 정의된 것을,
<li><font color="red">HTML</font></li>
<li><font color="red">CSS</font></li>
디자인에 해당되는 서체(font)만 따로 CSS로 떼어내었다.
<style>
li {
color: red;
}
</style>
<li>HTML</li>
<li>CSS</li>
정보와 디자인이 엄격히 분리됨으로써, 디자인 변경이 쉬워졌다.
HTML에 CSS를 삽입하는 방법
sytle은 HTML 표준에 약속이 되어 있다. HTML 내에 속성 sytle 또는 태그 style을 통해 해당 부분은 CSS 문법에 맞춰 해석됨을 알린다.
(1) 인라인(IN LINE) 방식
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:red">Hello World</h1>
</body>
</html>
가장 이해하기 쉬운 방식으로 직접 디자인을 설정한다.
(2) CSS 사용
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: blue;
}
</style>
</head>
<body>
<h1 style="color:red">Hello World</h1>
<h2>Hello World</h2>
</body>
</html>
style 태그를 통해 CSS를 따로 정의시켜놓았다.
728x90
'Study > WEB' 카테고리의 다른 글
| [추가] CSS Diner (0) | 2018.08.19 |
|---|---|
| CSS 문법 (0) | 2018.08.19 |
| HTML 태그 종류 (0) | 2018.08.10 |
| HTML 요소 (0) | 2018.08.09 |
| WEB (0) | 2018.07.27 |
댓글