HTML문서에서 직접 요소에 지정하는 방법을 이용할때는 요소에 직접 스타일을 입력하면 된다. 예) <p style="font-family:돋움">글꼴이 돋움으로 바뀜</p>
HTML문서의 HEAD에 두는 방법이나 외부에 CSS파일를 만들어 링크로 연결하는 방법을 이용하고자 할때는 스타일트를 선언하고 사용한다. 스타일시트를 선언하는 기본 형식은 선택자 { 선언 } 으로 대소문자를 구별하지 않는다. 예1) P {margin-left:20mm} 예2) P {margin-left:20mm;color:blue;background:yellow} - 여러개의 속성적용
선택자는 선언부분에서 지정해주는 속성값에 영향을 받아 웹페이지에서 스타일을 변경해준다. 선언은 속성(color)과 값(blue)으로 이루어지며, 속성과 값을 콜론(:)로 구별한다. 한 선택자에 여러가지 속성을 사용하려면 세미콜론(;)을 구분으로 속성값을 이어 적어주면 된다.
▶ 글자와 관련된 스타일(직접 요소에 적용한 방법사용)
글꼴 지정하기 : font-family를 이용하여 지정해준다. 글자의 크기 지정하기 : font-size로 지정해준다. 글자 색상 지정하기 : color로 지정하고 속성값은 컬러이름, 걸러 코드를 사용한다.
영문자의 대소문자 <p style="text-transform: capitalize">첫번째 영문자만 대문자 : This site is motifdn</p> <p style="text-transform: uppercase">모두 대문자 : This sitem is motifdn</p> <p style="text-transform: lowercase">모두 소문자 : This site is motifdn</p>
자간과 조절하기 : letter-spacing를 이용하여 지정하며 - 값도 지정할 수 있다. 들여쓰기 : text-indent로 지정할 수 있으며, 단위는 PT, PX, % 등의 거리단위이다. 문단의 여백조절하기 : margin-left(왼쪽),margin-right(오른쪽)등 상하좌우로 조절할수 있다. 문단 정렬하기 : text-align으로 지정할 수있으며, 정렬방법은 left, center, right, justify이다.
<html> <head> <title>문장, 문단와 관련된 스타일</title> </head> <body>
줄바꿈하기 않기 <p style="white-space: nowrap">위쪽여백이 50px로 지정됨</p>
그리드 적용하기 <style type="text/css"> p { layout-grid-type: fixed; layout-grid-char: 20px; layout-grid-line: 20px; background-image:url("그림이미지") } p#a { layout-grid-mode: both } p#b { layout-grid-mode: line } p#c { layout-grid-mode: char } </style> <p id="a"> 그리드(격자)에 전부 맞추어 배치할 수 있게 됩니다. </p> <p id="b"> 리드(격자)의 줄에 맞추어 배치할 수 있게 됩니다. </p> <p id="c"> 그리드(격자)의 세로글자에 맞추어 배치할 수 있게 됩니다. </p>
<p style="layout-grid: fixed 30px 30px both;background-image:url("이미지")> 그리드정용을 한꺼번에 하기 </p>
04) 링크(link)와 관련된 스타일시트
HTML문서에서 링크(link)를 걸어서 페이지의 이동을 유도할때 일반적으로 밑줄이 그어진 상태로 링크를 표시하기도 하지만 필요에 따라 한 페이지에서 다양하게 링크를 표현할 수도 있다. 링크에 스타일을 적용하는 기본형식은 아래와 같다.
A:link {속성선언} ----.------------------------> 방문하지 않은 링트 A:visited {속성선언}-..------------------------> 이미 방문한 링크 A:active {속성선언}---------------------------> 활성화된 링크 A:hover {속성선언} --.------------------------> 링크 위에 마우스가 있는 상태
▶ 페이지 전체에 링크 스타일 설정하기
스타일시트에 링크에 관련된 스타일을 지정해주면 그 페이지에 한하여 전체적으로 같은 스타일의 링크로 표현된다.
<html> <head> <title>링크와 관련된 스타일</title> <style type="text/css"> A:link {color:blue} A:visited {color:green} A:active {color:red} A:hover {color:aqua} </style> </head> <body> <a href="http://www.jungle.co.kr" target="_blank">디자인정글로 이동 </a><br> <a href="http://www.cyworld.com/" target="_blank">싸이월드로 이동 </a> </body> </html>
▶ class를 이용하여 다양하게 링크 스타일 설정하기
class는 스타일을 더 세부적으로 제어할수 있는 속성으로서 해당하는 요소에 클래시를 지정하고 원하는 스타일을 적용할 수 있다. 스타일시트에서 class를 지정하는 방법은 요소 다음에 마침표(.)를 찍고 이름을 지정하면 된다. ex) A.new:link {color:blue;text-decoration:none} P.new2 {margin-left:20mm;color:blue;background:yellow}
스타일시트에서 형식대로 class를 지정한 다음 class를 적용할 요소에 class이름을 적어주면 된다. ex) <a href="#" class="new">링크</a>
<html> <head> <title>.. </title> <style type="text/css"> <!-- body,td {font-family:"굴림"; font-size: 9pt} #scrollbox {width:400; height:100; overflow:auto; padding:10px; border:1; border-style:solid; border-color:black} --> </style> </head> <body bgcolor="#FFFFFF"> <table width=400 height=100 border="0" cellspacing="0" cellpadding="0"> <tr> <td> <DIV id="scrollbox"> 모든사람이 나를 에워싸고 조여들며<br> 세상이 마치 작은 새장처럼 보일때<br> 좀 더 자라도록 <br> 내게 여유를 주십시오.<br> 내 주변세계가 <br> 나에게 변치말고 그냥 있으라고 할때<br> 좀 더 자라도록 <br> 내게 여유를 주십시오.<br> 당신이 가지고 있는 <br> 나에 대한 이미지에서 풀어주시어<br> 좀 더 자라도록 <br> 내게 여유를 주십시오.<br> 내안에 깊이 자리잡은 <br> 내모습 그대로 자랄수 있도록 <br> 좀 더 여유를 주십시오.<br> </DIV> </td> </tr> </table> </body> </html>
06) INPUT 을 다양하게 표현하기
▶ [TYPE="text"]의 테두리를 선으로 표현하기
<html> <head> <title>..</title> </head> <body> <input type="text" maxlength="8" size="20" name="motifdn" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; FONT-FAMILY: gulim; FONT-SIZE: 9pt;HEIGHT:16px;"> </body> </html>
웹사이트의 컨셉에 맞게 스크롤바의 색상을 CSS를 이용하여 수정할수 있다. 유틸리티에서 소개한 "Cool Web Scrollbars"이라는 간단한 웹 악세서리 프로그램을 이용하여 CSS를 구할수도 있고, 프로그램을 사용하지 않고 직접 CSS를 넣어줄 수도 있다. 스크롤바를 수정하는 CSS소스를 HEAD와 /HEAD사이에 넣어주면 수정된 스크롤바를 확인할 수 있는데 단, 이것은 익스플로러 5.0이상에서만 확인되며 익스플로러 5.0 이하버전이나 넷츠케이프에서는 수정되지 않는 상태의 원래 스크롤바로 표현된다.
웹사이트의 컨셉에 맞는 분위기를 만들기 위해서 배경색을 사용하거나 패턴을 이용하여 배경이미지를 꾸며줄 수 있다. 그리고 스타일시트를 이용한다면 스크롤바와 관계없이 배경색을 고정시키고 웹페이지의 내용만 스크롤 시킬 수 있다.
배경이미지와 관련된 속성은 background-image : url(배경이미지의 위치) background-repeat : 배경이미지의 반복 설정 ............................9반복없음(no-repeat;) ,가로축만 반복(repeat-x;), 세로축만 반복(repeat-y;) background-position : 배경이미지의 위치 ................................가로축(left, center, right) ,세로축(top, center, bottom) ................................%값이나 길이단위값(px)을 쓸 수 있다. background-attachment : 배경이미지의 고정 여부(fixed;)
