<--CSS란?-->
CSS는 HTML을 꾸미기 위한 언어이다.
CSS를 이용하면 HTML만 이용했을 때 보다 훨씬 멋지게 웹을 만들 수 있다.
Ex)
<body>
<h2><font color="blue">CSS is nice!</font></h2>
<p>
<h4><font color="#ff9900">Hello CSS3 World</font></h4>
CSS3 can change the color, size , background , etc. taeduri !!!
</p>
<p>
<h4><font color="#ff9900">CSS3 very good!</font></h4>
CSS3 is very good and amazing!!!!!
</p>
</body>
=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=
<head>
<title>Meta tag</title>
<style type="text/css">
h2 {color: blue;}
h4 {color: #ff9900;}
</style>
</head>
<body>
<h2><font>CSS is nice!</font></h2>
<p>
<h4><font>Hello CSS3 World</font></h4>
CSS3 can change the color, size , background , etc. taeduri !!!
</p>
<p>
<h4><font>CSS3 very good!</font></h4>
CSS3 is very good and amazing!!!!!
</p>
CSS is nice!
Hello CSS3 World
CSS3 can change the color, size , background , etc. taeduri !!!
CSS3 very good!
CSS3 can change the color, size , background , etc. taeduri !!!▲위 code 2개는 똑같은 효과를 냅니다.
△하지만 CSS를 사용하면, HTML만 사용할 때 보다 간결하게 사용가능합니다.
<--CSS의 이점-->
-웹 문서를 자유롭게 편집이 가능하다.
-문서를 통일감 있게 만들 수 있다.
-문서를 관리하기가 편하다.
<--CSS를 적용하는 여러 가지 방법-->
1. <link rel= "stylesheet" type = "text/css" herf="CSS_FILE_NAME.css"
>첫번째 방법인 link를 사용해서 .css파일을 불러오는 방법입니다.
2. 두번째 방식은 위 코드에있는 <style>태그를 이용하는 것 입니다.
<--style방식 2가지-->
1. Embedded style )
웹 문서의 내부 보통 <head>영역에 스타일 시트를 정의하여 문서 전체에 특정한 효과를 주고자 할 때 사용한다.
Ex)
<head><stlye type = "text/css">
태그 이름 & 클래스 명 { 스타일 속성 : 값 ; }
</stlye>
</head>2. inline style )
특정 태그에만 스타일 시트를 정의하고 싶을 때 사용한다.
Ex)
<태그 style = "스타일 속성" : 값>
>> <body style = "font-size:15pt; color:blue;">
※inline, Emebedded, inked방식 중 어느 것이 많이 사용되냐면, 바로 linked방식이다. 왜냐하면 CSS만들어 사용하면 여러 웹문서에 동일한 스타일을 적용하기가 쉽기 때문이다.
<--CSS3의 기본 형식-->
(스타일을 적용하려는 대상){스타일 속성 : 값;}
>>doby {color : blue; font-size : 12pt;}
특정 태그에 지정하기
태그{스타일 속성:값....}
>>body{font-size:15pt;color:blue;};
->body태그 전체에 저 스타일 시드가 적용된다.Ex)
<head>
<title>Meta tag</title>
<style type="text/css">
body{font-size: 40pt ; color: #3366CC}
img{border : 10px solid #D8D8D8; }
h1{color: #FF9900}
td{font-size: 12pt; color: #FF9900}
</style>
</head>
<body>
LITTELE BEAUTY
<tr>
<td>
<h1>LITTLE BEAUTY</h1>
<img src="https://t1.daumcdn.net/cfile/tistory/207BDE244A409AAE2B" width="100" align="left">
<p>Littele gorealra is very cute!<br></p>
</td>
</tr>
▲위 처럼 적용이 된다.
<--한번에 지정하기-->
<head>
<title>Meta tag</title>
<style type="text/css">
body h1, h2, h3, h4{font-size: 15pt ; color: #FF9900}
</style>
</head>
<body>
<h1>Hello h1</h1>
<h2>Hello h2</h2>
<h3>Hello h3</h3>
<h4>Hello h4</h4>
<h5>Oh... h5</h5>
</body>
<--태그안에 있는 태그 지정하기-->
-위 예제를 <style>을 보면, <body>안에 있는 h1-h4를 선택하라는 뜻 이다.
-다른 예제를 하나 더 보자.
<head>
<title>Meta tag</title>
<style type="text/css">
body nav li{font-size: 15pt ; background-color: #FF9900 ;}
</style>
</head>
<body>
<nav>
<li>Menu01</li>
<li>Menu02</li>
<li>Menu03</li>
</nav>
</body>
▲Background는 오렌지색, 폰트 사이즈는 15pt로 수정되었다.
△위치는 body->nav->li에만 적용된다. 만약 body->nav->li->li라면 적용되지 않는다.
<--Class & id 사용하기-->
Class&id는 이름이라고 생각하면 간단하다. 일단 사용하는 법을 보자!
<div class = "nav"></div>
<div id = "nav"></div>
<style type="text/css">
.nav {padding: 10px;}
#nav {padding: 10px;}
</style>▲Class는 .을 사용해서 표현을하고 id는 #을 사용해서 표현을 합니다.
id와 class의 차이점 )
클래스와 아이디의 차이점은 클래스는 여러개를 사용할 수 있지만 아이디는 고유성을 가지므로 한 문서에 한번만 사용할 수 있습니다.
'Programming > Html5 + CSS' 카테고리의 다른 글
| CSS3 여러 스타일 시트 (0) | 2015.12.03 |
|---|---|
| 여러 태그03 (0) | 2015.12.02 |
| 여러 태그02 (0) | 2015.11.29 |
| HTML5 시멘틱 구조 및 여러 태그 (0) | 2015.11.25 |
| HTML5기본 구조 & Meta 테그 (0) | 2015.11.25 |
KimMinSung
