CSS사용법
CSS를 사용하는 방법에는 몇가지 방법이 있습니다.
CSS를 사용하는 방법 - style 태그, style속성, CSS파일 link
-요약설명
- <style></style>태그를 이용하여 사용하는 방법 / HTML내부에 <head>태그 사이에 <style></style>를 주고 사용하시면 됩니다.
- HTML안의 Inline style속성을 이용한 방법 / <tag style="color: red"></tag> 이런식으로 태그내부에 style을 주고 사용하면 됩니다.
- CSS파일을 HTML문서 내 <head></head>태그 내에 링크시키는 방법 / <head>태그 내에 link를 주고 경로를 성정해주시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
li{
color: red;
}
</style>
</head>
<body>
<ul>
<li>Hello world!</li>
<li>Hello world!</li>
<li>Hello world!</li>
</ul>
</body>
</html>
· HTML의 내부의 <tag>안의 Inline style속성을 이용한 방법
// 사용법 : <tag style=""></tag> / 이름 : (인라인 스타일시트(Inline Style Sheet))
인라인 스타일의 경우 꾸미는데 한계가 있으며 재사용이 불가능하다는 단점이 있습니다.
하지만 CSS을 주는 3가지중에서 가장 우선순위가 적용되어 사용된다는 장점이 있습니다.
예제:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<ul>
<li style="color: red">Hello world!</li>
<li style="color: blue">Hello world!</li>
<li>Hello world!</li>
</ul>
</body>
</html>
· CSS파일을 HTML문서 내 <head></head>태그 내에 링크시키는 방법
// 이름: (외부 스타일 시트(External Style Sheet))
따로 파일을 css확장자로 저장하여, 스타일시트 파일을 생성하고, 이 파일을 HTML문서에 경로를 연결하여 사용하는 방법입니다.
이 방법은 홈페이지 전체의 스타일을 일관성 있게 유지하며, HTML을 보다 깔끔하고 HTML의 목적 그 자체로 사용할수 있게끔 만들어 줍니다.
코드의 재사용이 매우 용이하고 모듈화도 가능합니다. 특히 여러문서에 link나 @import만 해주면 .class나 #id값만 동일하게 써주면 사용할 수 있어서 가장 많이 사용되는 방법입니다. // @import는 <style>태그 사이에 들어가 있어야 합니다.
예제:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/abc/css/tetestet.css">
<style> @import url("/abc/css/tetestet.css"); </style> </head> <body> <ul> <li id="abc">Hello world!</li> <li>Hello world!</li> <li>Hello world!</li> </ul> </body> </html> |
li{ color: red; } #abc{ color: blue; |
※특징:
CSS의 기본 문법(Syntax)
*Selctor: 선택자, Declaration : 선언, Property: 속성, value: 값
보시는 바와같이 CSS를 사용할 수 있습니다.
먼저 스타일을 꾸미려는 선택자를 선택후 중괄호로 선언해니다.
그리고 주려는 스타일의 주체인 속성값을 선택하고 그 속성을 어마나 줄건지 값을 정해주시면 됩니다.
하나의 선택자에 여러개의 스타일을 주고싶다면, 속성과 속성값사이에 ;(세미톨론)으로 구분지어 사용해주시면 됩니다.
'Rich Venveis의 연구노트 > CSS' 카테고리의 다른 글
| [CSS속성][font] font-style (0) | 2018.03.11 |
|---|---|
| [CSS속성][font] (0) | 2018.03.11 |
| [CSS 속성][font] font-family (0) | 2018.03.10 |
| [CSS 속성][font] font-size (0) | 2018.02.28 |
| CSS란? (0) | 2018.02.26 |