CSS 정리

장점

 - html의 기능을 보완한다.

 - 홈페이지의 관리가 쉬워진다.

 - 브라우저 종류에 상관없이 제작한 그대로의 모습을 보여줄 수 있다.

 - 로딩시간이 적게 걸린다.

정의하기

 - 각각의 html문서별로 <head>부분에 스타일시트를 정의한다.

 - 각 html 문서별로 <body> 안에서 스타일시트를 적용할 태그에 직접 정의 한다(inline방식).

 - 여러 html 문서의 공동으로 사용하는 스타일시트를 별도의 파일에 정의한다. 별도의 파일에는 스타일스트에 대한 정의만을 기록한다. 이를 사용할 html 문서에서 이들을 임포트(import)시켜 사용한다.

<head> 부분에 정의 하는 방법

 html 문서의 <head>...</head> 부분에 <style>이라는 태그를 사용해서 스타일의 내용을 정의한다. <style>태그에 type이라는 속성을 사용해서 스타일의 형식을 설정한다. type라는 속성값은 text/css를 가지는데 type속성을 사용하지 않고 <Style>태그만 사용해도 관계없다.

<body> 부분에 정의 하는 방법
 html 문서의  <body> 부분에 스타일을 설정하기 위해서는 스타일이 적용될 태그에 style 이라는 속성을 사용해서 해당 스타일 내용을 설정한다. 인라인 방식으로 해당 태그에 스타일 속성을 입력하려면 해당 스타일 속성과 값을 ':' 로 표시하고(예: "font-size:14pt"), 여러 속성을 설정하기 위해서는 스타일속성과 속성을 ';' 를 이용하여 구분한다. 그리고 설정 전체를 큰따음표(" ")로 묶어준다.

외부 파일 임포트 방법
 여러 html 문서에서 사용하는 스타일이 공통적인 경우에 각각의 html 문서에 개별적으로 정의하는 것보다 하나의 파일에 스타일을 정의하고 각각의 html 문서에서 이 파일을 임포트하여 사용하는 방법.
 스타일시트 파일에는 스타일에 대한 정의만 기록된다. 즉, <head> 부분에 스타일을 정의하는 부분을 그대로 새로운 문서에 입력한 다음 css 확장자를 가지는 파일을 만드는 것이다.
단, <style>태그는 쓰지 않고 그안의 스타일 내용만 입력한다.
 해당 스타일시트 파일을 사용할 html 문서는 <link>태그를 사용하여 임포트하면 된다.
<link rel=stylesheet type="text/css" href="스타일시트 파일이름">

단위
절대값 - in (인치 : 1in=2.54cm)
           cm (센티미터)
           mm (밀리미터)
           pt (포인트 : 1pt=1/72in)
           pc (파이카 : 1pc=12pt)
상대값 - em (해당 범위에서 유요한 폰토의 높이를 1로 하는 단위)
            ex (해당 범위에서 유효한 폰트의 소문자x의 높이를 1로 하는 단위)
            px (1필셀을 1로 하는 단위)
            % (다른 기준이 되는 크기에 대한 비율)

글자에 대한 속성
글자에 대한 속성 중에서 많이 사용되는 것으로는
font-family (글꼴의 종류),
font-size (글자크기),
font-style (글자체 스타일-normal, italic, oblique),
font-weight (글자 굵기),
line-height (글자를 쓸 때 그 줄의 높이),
text-decoration (글자에 밑줄[underline], 윗줄[overline], 가운데줄[line-throught], 깜빡이게[blink], 아무효과없는[none]) 등이 있다.

문서에 대한 속성
문서와 관련된 스타일스트 속성으로는
color, background-color (컬러값),
background-image, background-repeat (배경이미지 반복여부 no-repeat, repeat, repeat-x, repeat-y),
background-attachment (스크롤 이동시 설정 fixed[배경 고정], scroll[배경 같이 이동]),
background-position (배경을 특정 좌표에 위치시킴),
background,
margin-left, margin-right, margin-top, margin-bottom (문서 여백 설정),
width (너비),
height (높이)
등이 있다.

|문법|

<style type="text/css">
 <!--
      스타일내용
 //-->
</style>

<태그 style="속성:속성값; 속성:속성값; 속성:속성값">

스타일이름 { 속성:속성값; }

태그이름 { 속성:속성값; }

태그1, 태그2 { 속성1:속성값; 속성2:속성값; }

.스타일시트 이름 { 속성:속성값; } -- <태그 class = 스타일시트 이름>

#스타일시트 이름 { 속성:속성값; } -- <태그 id = 스타일시트 이름>

|사용 예|
<html>
<head>
<style type="text/css">
<!--
 body { color:red; font-size:12px; font-family:돋움체; }
 h1 { color:blue; font-size:30px; }
 p { color:green; font-size:20px; }
 p.love { color:black; font-size:15px; }
 p.story { color:skyblue; font-size:25px; }

 .ulsan { color:red; font-size:18px; font-family:돋움체; font-weight:border; line-height:2; }
 .busan { color:green; font-size:18px; font-style:italic; }

 .text1 { color:blue; font-size:20px; }
 #text2 { color:green; font-size:20px; }
//-->
</style>
</head>
<body>
<h1>html의 스타일시트<h1>
<h1 class="ulsan">html의 스타일시트 class=ulsan 적용중</h1>
<h1 class="busan">html의 스타일시트 class=busan 적용중</h1>
<br>스타일 시트에서의 class사용법
<p>p 태그사용중</p>
<p class="love">p 태그에서 class=love 사용</p>
<p class="story">p 태그에서 class=story 사용</p>

스타일 시트에서의 class사용법(여긴 body 부분)<br>
<font size=4 style="text-decoration:underline">
스타일 시트에서의 class사용법(여긴 body 부분) </font>

<br> <span class="text1">span태그에 class=text1 사용</span>
<br> <span id="text2">span태그에 id=text2 사용</span>
</body>
</html>