03) 스타일시트 입력형식 및 기본활용(text에 적용)
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로 지정하고 속성값은 컬러이름, 걸러 코드를 사용한다
.
<html>
<head>
<title>글자와 관련된 스타일</title>
</head>
<body>
글자꾸밈
<p style="font-family:돋움">글꼴이 돋움으로 바뀜</p>
<p style="font-size:9pt">글자 크기가 9pt로 바뀜</p>
<p style="color:blue">글자 색상이 파란색으로 표현</p>
<p style="border-bottom: 1px dashed silver;">글자에 점선 밑줄이 생김</p>
<p style="border-bottom: 1px solid silver;">글자에 밑줄이 생김</p>
<p style="text-decoration: line-through;">글자에 취소선이 생김</p>
<p style="text-decoration: overline underline;">위선,밑선이 생김</p>
영문자의 대소문자
<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>
문자의 수직위치
<p style="vertical-align: baseline">보통글자</p>
<p style="vertical-align: super">윗첨자</p>
<p style="vertical-align: sub">아래첨자</p>
이미지의 윗쪽에 글자위치, 이미지에 스타일적용<img src="" style="vertical-align: top">
이미지의 중간에 글자위치, 이미지에 스타일적용<img src = "" style="vertical-align: middle">
이미지의 아래에 글자위치, 이미지에 스타일적용<img scr= "" style="vertical-align: bottom">
</body>
</html> |
▶
문단와 관련된 스타일(직접 요소에 적용한 방법사용)
자간과 조절하기 : letter-spacing를 이용하여 지정하며 - 값도 지정할 수 있다.
들여쓰기 : text-indent로 지정할 수 있으며, 단위는 PT, PX, % 등의 거리단위이다.
문단의 여백조절하기 : margin-left(왼쪽),margin-right(오른쪽)등 상하좌우로 조절할수 있다.
문단 정렬하기 : text-align으로 지정할 수있으며, 정렬방법은 left, center, right, justify이다.
|
<html>
<head>
<title>문장, 문단와 관련된 스타일</title>
</head>
<body>
문자간격
<p style="letter-spacing:-5px">자간이 -5px로 지정됨</p>
<p style="letter-spacing:0px">자간이 0px으로 지정됨</p>
<p style="letter-spacing:-0.04em;">자간이 지정됨</p><br>
단어간격
<p style="word-spacing:-5px">자간이 -5px로 지정됨</p>
<p style="word-spacing:0px">자간이 0px으로 지정됨</p>
<p style="word-spacing:5px">자간이 5px로 지정됨</p>
들어쓰기
<p style="text-indent:0px">들여쓰기가 0px로 지정됨</p>
<p style="text-indent:20px">들여쓰기가 20px로 지정됨</p><br>
여백주기
<p style="margin-top:50px">위쪽여백이 50px로 지정됨</p>
<p style="margin-bottom:50px">아래쪽여백이 50px로 지정됨</p>
<p style="margin-left:50px">왼쪽여백이 50px로 지정됨</p>
<p style="margin-right:50px">오른쪽여백이 50px로 지정됨</p> <br>
정렬하기
<p style="text-align:left">왼쪽정렬</p>
<p style="text-align:center">가운데정렬</p>
<p style="text-align:right">오른쪽정렬</p>
<p style="text-align:justify">양쪽정렬</p><br>
공백그대로 표헌하기
<style type="text/css">
code { white-space: pre;}
</style>
<code> (공백그대로 표현하기)</code>
줄바꿈하기 않기
<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">
A:link {color:blue}
A:visited {color:green}
A:active {color:red}
A:hover {color:aqua}
A.new:link {font-family:verdana; font-size:11px ;text-decoration: none; color:black}
A.new:visited {font-family:verdana; font-size:11px; text-decoration: none; color:black}
A.new:active {font-family:verdana; font-size:11px ;text-decoration: none; color:black}
A.new:hover {font-family:verdana; font-size:11px; text-decoration: none; color:blue}
A.new1:link {text-decoration: underline; color:black}
A.new1:visited {text-decoration: none; color:black}
A.new1:active { text-decoration: none; color:black}
A.new1:hover {text-decoration: overline; color:blue;background-color: lavenderblush;}
P.new2 {margin-left:20mm;color:blue;background:yellow}
</style>
</head>
<body>
<a href="http://www.jungle.co.kr" target="_blank">디자인정글로 이동 </a><p>
<a href="http://www.daum.net" target="_blank" class="new" >다음으로 이동 </a><p>
<a href="http://www.cyworld.com/" target="_blank" class="new1">싸이월드로 이동 </a>
<p>스타일적용되지않은 상태</p>
<p class="new2">스타일적용된 상태</p>
</body>
</html> |
05) 테이블(table)와 관련된 스타일 시트
▶ table border 1px로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<table border="1" widht=200 height=200 style="border-collapse:collapse;">
<tr>
<td>스타일이 적용됩니다. </td>
</tr>
</table>
</body>
</html> |
▶ table border 다양한게 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
점선으로 표현
<table border="0" widht=20 height=20
style="border-width:1; border-color:#777777; border-style:dotted;">
<tr><td>점선으로</td> </tr> </table>
스티치선으로 표현
<table border="0" widht=20 height=20
style="border-width:1; border-color:#777777; border-style:dashed;">
<tr><td>스티치선으로</td> </tr> </table>
액자처럼으로 표현
<table border="0" widht=20 height=20
style="border-width:1; border-color:#777777; border-style:ridge;">
<tr><td>액자처럼</td> </tr> </table>
두가지 선으로 표현
<table border="0" widht=20 height=20
style="border-width:1; border-color:#777777; border-style:double;">
<tr><td>두가지 선섬으로</td> </tr> </table>
</body>
</html> |
▶ table에 링크걸기
<html>
<head>
<title>..</title>
</head>
<body>
<table width=100 height=100 >
<tr>
<td style=cursor:hand;
onClick="location.href='링크주소" onMouseOver="window.status='링크주소'" onMouseOut="window.status=''">링크 </td>
</tr>
</table>
</body>
</html> |
▶ table에 마우스 오버시 색바꾸기
<html>
<head>
<title>..</title>
</head>
<body>
<table width=100 height=100 >
<tr bgcolor="#FFFFFF" onMouseOver="this.style.backgroundColor='#EEF1F6'"
onMouseOut="this.style.backgroundColor='#FFFFFF'">
<td>스타일이 적용됩니다. </td>
</tr>
</table>
</body>
</html> |
▶ table을 스타일시트로 제어하기
<html>
<head>
<title>..</title>
<style type="text/css">
.table1
{
border-top:solid 1px gray;
border-right:solid 1px gray;
border-left:solid 1px gray;
border-left:solid 1px gray;
border-bottom:solid 1px gray;
BACKGROUND-COLOR: green;
font-size : 9pt;
font-family : "돋움", "Arial", "sans-serif";
COLOR: #ffffff;
}
</style>
</head>
<body>
<table width=100 height=100 class="table1">
<tr>
<td>스타일이 적용됩니다.
</td>
</tr>
</table>
</body>
</html> |
▶ table로 아이프레임 효과만들기
<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> |
▶ [TYPE="text"]의 테두리 점선으로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<input type="text" maxlength="30" name="motifdn" size="20"
style="BORDER-BOTTOM: 1px dashed; BORDER-LEFT: 1px dashed;
BORDER-RIGHT: 1px dashed; BORDER-TOP: 1px dashed">
</body>
</html> |
▶ [TYPE="text"]의 테두리 밑선으로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<input type="text" name="motifdn" size="20"
Style = "BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #ffffff 1px solid;
BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid">
</body>
</html> |
▶ [TYPE="text"]의 배경색 바꾸고 마우스오버시 색바꾸기
<html>
<head>
<title>..</title>
</head>
<body>
<input type="text" name="motifdn" size="20" style="BACKGROUND-COLOR: #999999"
onMouseOver = "this.style.backgroundColor = 'gold'"
onMouseOut = "this.style.backgroundColor = '#999999'">
</body>
</html> |
▶ [TYPE="button"]의 테두리를 선으로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<input type="button" name="mybn" value="ok"
style="width:50;height:18;background-color:#d0d0d0;border:1 solid #999999;color:silver">
</body>
</html> |
▶ [TYPE="button"]에 배경이미지 넣기
<html>
<head>
<title>..</title>
</head>
<body>
<input type="button"
STYLE="width:100; height:25; cursor:hand; background:url(이미지파일); color:black;font-weight:bold">
</body>
</html> |
▶ [TYPE="button"]에 마우스오버시 색바꾸기
<html>
<head>
<title>..</title>
</head>
<body>
<input type="button" name="mybn" value="ok"
onMouseOver = "this.style.backgroundColor = 'white'"
onMouseOut = "this.style.backgroundColor = ''">
</body>
</html> |
▶ select의 옵션 전체 배경색 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<select style="background#B9FD6F;>
<option value="1">선택1</option>
<option value="2">선택2</option>
<option value="3">선택3</option>
</select>
</body>
</html> |
▶ select의 옵션 한줄씩 교대로 배경색 바꿔서 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<Select >
<option value="1" style="background-color: #B9FD6F">선택1</option>
<option value="2">선택2</option>
<option value="3" style="background-color: #B9FD6F">선택3</option>
<option value="4">선택4</option>
<option value="5" style="background-color: #B9FD6F">선택5</option>
</Select>
</body>
</html> |
▶ select의 옵션 전부 다른색으로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<Select style="font-size:8pt">
<option value="1" style="background:navy;color:white">선택1</option>
<option value="2" style="background:yellow;color:black">선택2</option>
<option value="3" style="background:red;color:white">선택3</option>
<option value="4" style="background:navy;color:white">선택4</option>
</Select>
</body>
</html> |
▶ TextArea을 라인선 없이 배경색으로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<TEXTAREA rows=10 cols=60 style="background-color:#B9FD6F;border-width:0;" >
내용</TEXTAREA>
</body>
</html> |
▶ TextArea을 배경이미지으로 표현하기
<html>
<head>
<title>..</title>
</head>
<body>
<TEXTAREA style="background-image:url(이미지파일);
background-repeat:no-repeat; background-attachment:fixed;" rows=10 cols=60>
내용</TEXTAREA>
</body>
</html> |
07) 스타일시트 예제 - 이미지에 다양한 필터적용하기
웹페이지에 이미지를 사용할때는 포토샵(Photoshop)등 이미지 편집기를 이용하여 원하는 컨셉에
맞춰 작업을 해야한다.
하지만 컨셉에 관계없이 단순히 이미지의 변화만 필요하다면 스타일시트를 이용하여
이미지에 다양한 효과를 낼수 있다.
필터적용 기본형식
<img src="이미지파일" width="150" height="150" style="filter='필터이름'">
▶ 이미지표현샘플
 |
|
| | 원본이미지 |
이미지의 좌우가 바뀜
Filter='fliph' |
이미지의 위아래가 바뀜
Filter='flipv' | |
|
| 직선그라데이션적용
Filter:alpha
(opacity=60,Style=1,
FinishOpacity=0)
|
원형그라데이션적용
Ffilter:alpha
(opacity=80,Style=2,
FinishOpacity=0) |
다야몬드그라데이션적용
Filter:alpha
(opacity=60,Style=3,
FinishOpacity=0) | |
|
| 이미지에 xray를 적용됨
Filter='xray' |
이미지에 gray를 적용됨
Filter='gray' |
이미지에 invert를 적용됨
Filter='invert' | |
|
| 이미지에 효과를 적용됨
Filter=
progid:DXImageTransform.
Microsoft.Pixelate
(maxquar=10)
|
이미지에 효과를 적용됨
Filter=
progid:DXImageTransform.
Microsoft.Pixelate
(maxquar=1) |
이미지에 효과를 적용됨
Filter=
progid:DXImageTransform.
Microsoft.Pixelate
(maxquar=5) |
▶ 이미지에 다양한 필터적용하기
<html>
<head>
<title>..</title>
</head>
<body>
<img src="이미지파일" width="150" height="150" style="filter='필터이름'">
</body>
</html> |
▶ 이미지에 링크걸고 마우스오버될때 필터적용이미지로 보이기
<html>
<head>
<title>..</title>
</head>
<body>
<a href="#"> <img sre="이미지파일"
onmouseover="this.style.filter='필터이름'" onmouseout="this.style.filter=''"></a>
</body>
</html> |
08) 스타일시트 예제 - 스크롤바를 사이트분위기에 맞게 수정하기
웹사이트의 컨셉에 맞게 스크롤바의 색상을 CSS를 이용하여 수정할수 있다.
유틸리티에서 소개한 "Cool Web Scrollbars"이라는 간단한 웹 악세서리 프로그램을 이용하여
CSS를 구할수도 있고, 프로그램을 사용하지 않고 직접 CSS를 넣어줄 수도 있다.
스크롤바를 수정하는 CSS소스를 HEAD와 /HEAD사이에 넣어주면 수정된 스크롤바를 확인할 수 있는데
단, 이것은 익스플로러 5.0이상에서만 확인되며 익스플로러 5.0 이하버전이나 넷츠케이프에서는
수정되지 않는 상태의 원래 스크롤바로 표현된다.
▶ 스크롤바 스타일 예제1
<html>
<head>
<title>..</title>
<style type="text/css">
body {
scrollbar-face-color:#FFC4E1;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FF95CA;
scrollbar-darkshadow-color:#FFB5DA;
scrollbar-shadow-color:#FF6AB5;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#FFDDEE;
}
</style>
</head>
<body>
사이트분위기에 맞는 스크롤바1
</body>
</html> |
▶ 스크롤바 스타일 예제2
<html>
<head>
<title>..</title>
<style type="text/css">
body {
scrollbar-3dlight-color:#595959;
scrollbar-arrow-color:#FFFFFF;
scrollbar-base-color:#CFCFCF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-face-color:#CFCFCF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#595959;
}
</style>
</head>
<body>
사이트분위기에 맞는 스크롤바2
</body>
</html> |
08) 스타일시트 예제 - 웹페이지의 배경이미지 고정시키기
웹사이트의 컨셉에 맞는 분위기를 만들기 위해서 배경색을 사용하거나 패턴을 이용하여
배경이미지를 꾸며줄 수 있다. 그리고 스타일시트를 이용한다면 스크롤바와 관계없이
배경색을 고정시키고 웹페이지의 내용만 스크롤 시킬 수 있다.
배경이미지와 관련된 속성은
background-image : url(배경이미지의 위치)
background-repeat : 배경이미지의 반복 설정
............................9반복없음(no-repeat;) ,가로축만 반복(repeat-x;), 세로축만 반복(repeat-y;)
background-position : 배경이미지의 위치
................................가로축(left, center, right) ,세로축(top, center, bottom)
................................%값이나 길이단위값(px)을 쓸 수 있다.
background-attachment : 배경이미지의 고정 여부(fixed;)
▶ 배경이미지 고정시키기 예제
<html>
<head>
<title>..</title>
<style type="text/css">
body {background-color: #FFFFFF; background-image: url(배경그림 주소); background-repeat: no-repeat; background-attachment:fixed; background-position: right center}
</style>
</head>
<body>
배경이미지 고정시키기
배경이미지 고정시키기
</body>
</html> |
▶ 테이블애
배경이미지 고정시키기 예제
<html>
<head>
<title>..</title>
<style type="text/css">
.bg1 {background-image:url(이미지주소); no-repeat;background-repeat: no-repeat; background-position: right bottom}
</style>
</head>
<body>
<table>
<tr><td class="bg1">
<p> 테이블 안에배경이미지 고정시키기</p>
<p> 테이블 안에배경이미지 고정시키기</p>
<p> 테이블 안에배경이미지 고정시키기</p>
<p> 테이블 안에배경이미지 고정시키기</p>
</td></tr>
</table>
</body>
</html> |
출처 : http://www.motifdn.pe.kr |
