Style Sheet... 웹문서 작성에 있어 기본이 된지 이미 오래다.

얘를 나름대로 정의하자면 HTML 은 TAG 로 구성되고 TAG는 속성을 가진다는 걸 알고 있다. 여기서 말하는 [속성] 을 다른 말로 하면 STYLE 이다!

이 STYLE 을 정의하는 방법을 따로 모아서 CSS(Cascading Style Sheet)라고 부른다.

기존의 태그가 가진 스타일을 따로 떼어낸 정도가 아닌 기존 스타일에 없던 많은 기능을 추가하고 있다는 것이 매력적이다!!!

기존의 HTML방식의 스타일을 적용하려면 해당 태그마다 직접 스타일을 주어왔다!!!
CSS를 사용하게 되면 모든 문서내 태그 스타일에 공통된 스타일을 한방에 줄 수가 있어서 웹사이트 제작 시간을 단축시키고 무엇보다 유지 보수를 훨~~~씬 쉽게 해준다.

그래서 꼭 사용을 해야한다는 얘기! 사용법은 너무나 간단합니다~~~

* 진짜 나름대로입니다. 용어도 다를 수 있고... 정의도 좀 차이가 날 수가...ㅎㅎ

font 스타일 ................................................. CSS에서 가장 유용한 부분이 바로 텍스트를 일률적으로 스타일을 지정할 수 있다는 점이다. 기존 HTML에서 색상과 사이즈를 준다면 곳곳에 <font>~</font> 태그를 남발했어야 했다. CSS 를 이용한다면 <font> 태그를 사용하지 않고도 size와 색상을 줄 수 있다. 예를 들면 주로 텍스트는 테이블의 td 태그에 포함되므로... td {font-size:9pt ; font-color:#333333; } 처럼 해주면 테이블에 든 모든 텍스트가 적용받게 된다. 물론 다르게 가고 싶은 부분은 그 부분만 <font color=red> 처럼 이전의 방법이나 사용자 정의 스타일 사용방법인 <font class="myfont"> 나 <font style="font-color:red"> 를 사용하면 된다. * 편의상 모든 예제는 태그에 직접 정의합니다

■ color , font-size (가장 기본적인 스타일)

color:tomato; font-size:12pt;

<font style="color:tomato; font-size:12pt; ">드래곤</font> 드래곤

* 문서의 내용을 구성하는 텍스트 사이즈는 9pt 를 주로 사용한다. (현재 이 사이즈) * 텍스트 칼라는 완전 검정이 아닌 #333333 ~ #555555 사이의 색상을 많이 사용한다. 이는 배경색으로 흰색을 많이 사용하는 문서에서 사용자의 눈부심을 덜어주려는 배려인듯!!! * 텍스트 사이즈 단위는 여러가지가 있지만 주로 pt(1/72인치), px(픽셀) 을 많이 사용하므로 소개하지 않습니다.

■ font-family, font-style

font-family:굴림	<font style="color:tomato; font-family:궁서">드래곤</font> 드래곤
font-style:italic	<font style="color:tomato; font-style:italic">드래곤</font> 드래곤 <font style="color:tomato; font-style:oblique">드래곤</font> 드래곤

* 사용자 컴에 있을 윈도우 글꼴을 사용하는게 좋다. 여러개를 지정하면 첫째글꼴이 없을 경우 두번째 글꼴이.. font-family:굴림,돋움 * 기본이 normal,italic(기울임),oblique(기울임)

■ font-variant (영문에서 소문자를 좀 작은 대문자로)

font-variant:small-caps

<font style="color:tomato; font-variant:small-caps"> DRAGONeye</font> DRAGONeye

* 기본이 normal

■ font-weight (굵기를 3가지 형식으로 다양하게!)

font-weight:100~900	<font style="color:tomato; font-weight:100">드래곤</font> 드래곤Eye <font style="color:tomato; font-weight:400">드래곤</font> 드래곤Eye <font style="color:tomato; font-weight:700">드래곤</font> 드래곤Eye <font style="color:tomato; font-weight:900">드래곤</font> 드래곤Eye
font-weight:bold	<font style="color:tomato; font-weight:bold">드래곤</font> 드래곤Eye
font-weight:bolder font-weight:lighter	<font style="color:tomato; font-weight:bolder">드래곤</font> 드래곤Eye <font style="color:tomato; font-weight:lighter">드래곤</font> 드래곤Eye

* 기본이 normal , bold만 알면될 듯! (아직 세세한 지원안됨)

■ line-height (행강 간격 조절)

line-height:25px

<font style="color:tomato; line-height:25px;"> 기존 태그를 최대한 활용하여 스타일을 잡고 사용자 정의는 최소화한다. 그래야 일을 줄일 수 있다.</font> 기존 태그를 최대한 활용하여 스타일을 잡고 사용자 정의는 최소화한다. 그래야 일을 줄일 수 있다.

* 한 라인이 25px 로!!!

테이블,이미지 테두리 스타일 ................................................. 테이블 태그나 이미지등 테두리선에 대한 스타일을 ! 특히 점선이나 한편을 다르게 표현하고자 할 때는 CSS를 사용할 수 있다.

■ border-style

border-style:none
border-style:dotted
border-style:dashed
border-style:solid
border-style:double
border-style:groove
border-style:ridge
border-style:inset
border-style:outset

* 4개의 태두리선을 모두 다르게 적용하려면 border-top-style border-bottom-style border-left-style border-right-style 를 따로 따로 지정해야한다.

■ border-color

border-color:#006699 border-style:dotted
border-color:tomato border-style:dashed
border-color:orange border-style:solid

* 4개의 태드리선을 모두 다르게 적용하려면 border-top-color border-bottom-color border-left-color border-right-color 를 따로 따로 지정해야한다.

■ border-width

border-width:1px border-color:#006699 border-style:dotted	1px 3px
border-width:1px border-color:tomato border-style:dashed	1px 3px
border-width:1px border-color:orange border-style:solid	1px 3px

* 4개의 태드리선을 모두 다르게 적용하려면 border-top-width border-bottom-width border-left-width border-right-width 를 따로 따로 지정해야한다.

■ margin (바깥쪽 여백)

margin:3px border-width:1px border-color:#006699 border-style:dotted

margin 없이 margin:3px margin:10px

* 4개의 태드리선을 모두 다르게 적용하려면 margin- top margin-bottom margin-left margin-right 를 따로 따로 지정해야한다.

■ width, height

width=300 height=40 border-width:1px border-color:#006699 border-style:dotted

width=300 height=40

■ padding (안쪽 여백)

padding:5px width=300px border-width:1px border-color:#006699 border-style:dotted

내용물 주위로 여백이...

* 4개의 태드리선을 모두 다르게 적용하려면 padding-top padding-bottom padding-left padding-right 를 따로 따로 지정해야한다.

■ 이미지에 적용하기

border-style:dotted; border-color:orange; border-width:3px	border-style:dashed; border-color:orange; border-width:3px	border-style:outset; border-color:orange; border-width:3px

폼요소 스타일 ................................................. 폼전송에 사용되는 폼요소를 위한 스타일 지정방법을 간단히 알아봅니다. 폼요소를 구성하는 태그는 <input>,<slelect>,<textarea> 등으로 구성되어 있죠. 이를 재정의하여 사용하는 방법입니다.

<input> 태그 재정의
<select> 태그 재정의	선택하세요
<textarea> 태그 재정의
box1 사용자 정의	체크 라디오
box2 사용자 정의

체크박스,라디오 박스는 <input> 태그지만 테두리가 있으면 별로 모양이 좋지 않다. 그래서 사용자정의 box1을 따로 준비했다. 버튼도 <input> 태그지만 입력상자와 따로 정의할 필요가 있다. 그래서 사용자 정의box2를 따로 준비했다. <textarea> 에는 스크롤바 처리를 위한 스타일을 추가했다. 스크롤바는 따로 정의하지 않았을 때 만약 body태그에 정의되는 스크롤바 스타일이 있다면 이 스타일이 적용된다 <select> 상자의 오른쪽 화살표 부분은 아직 바꿀 수 있는게 없다.

<style type="text/css"> <!-- input {font-size: 9pt; color:#555555; border:1 solid #cccccc; background-color:#ededed} select {font-size: 9pt; color:#555555; border:1 solid #cccccc; background-color:#ededed} select {font-size: 9pt; color:#555555; border:1 solid #cccccc; background-color:#ededed ; scrollbar-face-color: #cccccc; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #ededed; scrollbar-highlight-color: #ededed; scrollbar-shadow-color: #ededed; scrollbar-darkshadow-color: #ededed; scrollbar-3dlight-color: #ededed; } .box1 {font-size: 9pt; color:#555555; border:0; background-color:#ffffff} .box2 {font-size: 9pt; color:#555555; border:1 solid #ededed; background-color:#ededed} --> </style>

스크롤바 스타일 ................................................. 브라우저에서 스크롤은 전체 창, iframe, textarea, 레이어에서 생길 수 있다. 이에 대한 스타일을 어떻게 정하는지 알아보자. 물론 전체 창에 스타일을 적용하려면 body 태그에 정의해야 하며, 전체 창에 정의된 스타일을 따르지 않으려면 해당태그에서 따로 정의하면 된다. 전체창의 스크롤은 곤란하므로 <textarea> 를 가지고 살펴보자.

CSS를 쓰면 통일된 문서 양식을 만들 수 있다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀 에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만 CSS를 이용하면 그러한 번거로움이 사라진다.

scrollbar-face-color: #ffffff; scrollbar-arrow-color: #00ff00; scrollbar-track-color: #cccccc; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #ffff00; scrollbar-shadow-color: #0000ff; scrollbar-darkshadow-color: #ff0000;

흰색 녹색 갈색 검정색 노랑 파랑 빨강

■ 스크롤바 색상 스타일 (익스플로러 5.5 이상) 스크롤바는 아래처럼 크게 4부분으로 나눠 색상을 정의할 수 잇다.

scrollbar-face	세군데 있으며 위쪽,아래쪽 화살표 있는 부분과 가운데 이동하는 부분이며 위에서 흰색으로 처리된 부분
scrollbar-arrow	화살표 부분이며 아래, 위의 두군데에 있다.
scrollbar-track	스클로바가 이동하는 길이다.
scrollbar-highlight scrollbar-3dlight scrollbar-shadow scrollbar-darkshadow	face부분의 좌측 과 상단 face부분의 좌측 과 상단의 바깥쪽 효과 * 검정밖으로 약간의 노랑이 보임 face부분의 우측 과 하단 face부분의 우측 과 하단의 바깥쪽 효과 * 파랑밖으로 약간의 빨강이 보임

face 의 외곽선을 결정하는 ...... * 4가지 색상은 가급적 같은 색상을 주고 * 4가지 색상을 face와 같이 주면 커보이고 * 4가지 색상을 track과 같이 주면 작아보인다

링크 관련 스타일 ................................................. <a> 태그로 링크를 걸면 디폴트 스타일이 font size=3이고 색상은 파랑이며, 방문후에는 이상하게 풀죽은 색으로 바뀌는 걸 알고 있다. 이에 대한 재정의도 필수적이다.

■ 랑크관련 color, size, decoration 스타일

A:link { color: #666666; font-size: 9pt; text-decoration: none } A:visited { color: #666666; font-size: 9pt; text-decoration: none } A:hover { color: #3399ff; font-size: 9pt; text-decoration: underline } A:active { color: #3399ff; font-size: 9pt; text-decoration: underline }

먼저 text-decoration은 밑줄이 있느냐 없느냐를 정의하는 것이다. A:link 는 모든 링크에 대해서 A:visited 는 링크중에 방문한 사이트인 경우에 대해 A:hover 는 마우스를 올린 링크에 대해 A:active 는 현재 방문중인 링크애 대해 (프레임 구조에서 효과 있음) 에 대해 스카일을 정하는 것이다. 순서는 위의 순서로 해주는 게 좋다. A:visited 를 A:hover 보다 아래두면 클릭한 링크는 A:hover가 적용되지 않고 A:visited 가 적용된다.

필수 CSS ................................................. 앞에서 부터 CSS는 꼭 사용해야한다고 말해왔다. 그러면 이 많은 걸 어떻게 사용하지??? 어려운 문제다. 여기서 꼭 필요한 CSS 를 살펴봄으로써 초보자에게 방향을 제시하고자 한다. 아래는 외부문서로 만들어야 하는것을 정해본 것이다.

<style type="text/css"> <!-- body {background-color:#ffffff} td { font-size: 9pt; color:#555555} A:link { COLOR: #666666; FONT-FAMILY: 굴림; FONT-SIZE: 9pt; TEXT-DECORATION: none } A:visited { COLOR: #666666; FONT-FAMILY: 굴림; FONT-SIZE: 9pt; TEXT-DECORATION: none } A:hover { COLOR: #3399ff; FONT-FAMILY: 굴림; FONT-SIZE: 9pt; TEXT-DECORATION: underline } .f8 { font-size: 8pt} .f12 { font-size: 12pt} --> </style>

1. 문서의 배경색을 한방에 변경 2. 모든 텍스트의 사이즈와 색상 3. 링크관련 재정의도 필수 4. 기준보다 작은 폰트 사이즈 준비 5. 기준 보다 큰 폰트 사이즈 준비

이정도 CSS만으로도 문서 제작에 엄청난 비용 절감을 가져온다. 이제라도 웹문서를 만들 때 꼭 적용하도록 해보자. 나머지는 어떤 생각을 가지고 만들어야 하며 사용하다 보면 노하우가 쌓이게 마련이다

배경이미지를 위한 CSS ................................................. HTML 로 배경이미지를 넣고 싶은 경우 background="url" 로 사용한다. 특정위치에 가로로만 또는 세로로만, 또는 특정위치에 한번만 배경이미지를 표현하고 싶을 경우 CSS를 사용할 수 있다. BODY,TABLE,TD 등의 태그에 주로 적용할 수 있다.

background-image:url(1.jpg) ;	배경이미지의 url
background-repeat:no-repeat ; background-repeat:repeat ; background-repeat:repeat-x ; background-repeat:repeat-y ;	반복적으로 표현하지 않음 반복적으로 표현(디폴트) repeat-x : x 방향으로만 반복 repeat-y : y 방향으로만 반복
background-position: bottom 100px ;	표현하고자 하는 위치(상하 좌우) - left,top,right,bottom - 100px, 200px - 10%,20%
background-attachment: fixed ;	배경을 고정 시키기(스크롤시) 생략하면 스크롤됨 body 태그나 iframe,레이어 같은 스크롤이 생기는 곳에서 사용할 수 있다

아래는 여러칸에 배경을 걸쳐야 하는 경우, 특정위치에 항상 고정시켜야 하는 경우임

	공부를 시작하기 전에............ 여러분이 인터넷을 하려고 인터넷 익스플로러를 누르는 일! 그 건 바로 내가 어떤 웹문서를 볼거라고 멀리있는 서버라는 컴퓨터에 요청을 한 것입니다. 여러분은 요청한 일이 없다구요. 여러분이 꾸~욱 누른 익스플로러라는 브라우저가 대신 해준거지요. 브라우저에는 "홈페이지"라는 것을 설정할 수 있어 처음 요청할 문서를 정해 둘 수도 있습니다.
	HTML문서는 텍스트 파일입니다. 그렇다고 txt 로 저장하면 안됩니다. html 또는 htm 확장자로 저장해야 브라우저가 제대로 보여줍니다. 이런건 약속이니까 지켜주기만 하면 됩니다. 쉽게 메모장에서도 작성이 가능하고, 에디터라고 불리는 전문 프로그램을 이용할 수도 있습니다. 이러한 프로그램으로는 나모,프론트페이지,드림위버등이 있습니다.

TABLE태그에 스타일 (특히 여러칸에 걸쳐 배경이미지를 적용하고자 할때)

<table border=1 width=480 style="background-image:url(http://www.dragoneye.co.kr/NEWIMG/weare.gif) ; background-repeat:no-repeat ; background-position: bottom 100px ;">

TABLE태그와는 다른 스타일을 적용하고자 할 때

<td style="background-image:url(http://www.dragoneye.co.kr/NEWIMG/study.gif) ; background-repeat:no-repeat ; background-position: top right ;">

아래는 스크롤이 있는 경우 배경이미지는 제외하고 스크롤을 적용하고 싶은 경우임

HTML문서는 텍스트 파일입니다. 그렇다고 txt 로 저장하면 안됩니다. html 또는 htm 확장자로 저장해야 브라우저가 제대로 보여줍니다. 이런건 약속이니까 지켜주기만 하면 됩니다. 쉽게 메모장에서도 작성이 가능하고, 에디터라고 불리는 전문 프로그램을 이용할 수도 있습니다. 이러한 프로그램으로는 나모,프론트페이지, 드림위버등이 있습니다.

스크롤이 있는 경우 배경이미지는 스크롤시키지 않고 싶을 때

<div id="Layer99" style="position:absolute; width:400px; height:100px; z-index:1; visibility: visible; overflow-x:hidden; overflow-y:scroll; background-image:url(http://www.dragoneye.co.kr/NEWIMG/study.gif); background-repeat:no-repeat; background-position: top left; background-attachment: fixed;">