<--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>



◀옆을 보면 h1-h4까지는 CSS가 동일하게 적용된 것을 볼 수 있다.


<--태그안에 있는 태그 지정하기-->

-위 예제를 <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

,