form 문에서 여백없애기 ################### 1
<form .....> 이런 문은 기본적인 여백이 있습니다.
그럴때마다 style="margin:0px;padding:0px;" 라고 쓰기는 상당히 귀찮은 일일겁니다.
항상 읽어 들이는 style.css 가 있다면 다음과같이 추가 합니다.
form {padding:0px; margin:0px}
라고 추가 해 놓으면 어떠한 문장에서든지 form 문은 여백이 없어집니다.
셀렉트 박스에서 내용 우측정렬시키기 ################### 2
<SELECT style="direction:rtl;">
<OPTION>내용</OPTION>
<OPTION>내용</OPTION>
</SELECT>
간단히 링크점선 없애기 ################### 3
보통 링크의 점선을 없애기위해 자바스크립트를 이용하거나 onfocus=this.blur(); 이런식으로 처리를 하시죠?
css 한 줄로 텍스트링크, 이미지링크 모두 처리가 가능합니다.
a { selector-dummy : expression(this.hideFocus=true);}
셀렉트박스(풀다운)에 색깔 넣기 ################### 4
<select style="font-size:9pt;">
<option>select color
<option style="background-color:000000;color:white" value="#000000">black
자주 사용하는 css 속성 ################### 5
글꼴장식
text-decoration : 장식 글꼴 장식을 지정한다.(none,underline,overline,line-through,blink)
none : 장식 제거
underline : 밑줄
overline : 윗줄
line-through : 문자 중간에 선 첨가
blink : 문자 깜빡임
글씨굵기
font-weight : 굵기 글꼴의 굵기를 설정한다.
normal : 보통 글씨
bold : 굵은 글씨
lighter : 한단계 가는 폰트
bolder : 한단계 굵은 폰트
수치 : 100 ~ 900 (normal : 400, bold : 700에 해당)
font-style : (normal,italic,oblique)
글씨체
font-family : 글꼴 이름, 글꼴 이름, … 글꼴 종류를 지정할 때 사용한다.
serif : 명조체 (예 : Times New Roman, 바탕체)
sans-self : 고딕체 (예 : Helvetaca, Arial, 돋움체)
cursive : 필기체 계열 (예 : Caflisch Script, Adobe Poetica)
fantasy : 장식 글꼴 (예 : Critter, Cottonwood )
monospace : 고정 비례 폭 글꼴(예 : Courier New)
글꼴의 이름은 하나만 지정할 수도 있고 컴마(,)로 구분해서 여러 개를 한꺼번에 지정할 수도 있다. 여러 개를 지정할 경우는 지정되어 있는 글꼴 중 앞에서부터 시스템에 설치되어 있는 글꼴이 적용된다.
문자간격
Spacing
letter-spacing : 문자간격
text-indent : 문자 들여쓰기
line-height : 줄과 줄사이의 간격을 지정하기 위해 사용
word-spacing : 단어간격 문자와 문자간의 간격이나 단어와 단어의 간격을 설정할 때 사용한다.
normal : 표준 글자간격 설정 (Default)
실수값 + 단위 : 표준간격에서 늘어나거나 줄어들게 된다.
text-align속성으로 양쪽 정렬(justify)로 설정하면 지정한 결과가 나오지 않는 경우도 있다.
링크걸기
A:link { 스타일 } 보통상태의 링크를 의미한다.
A:visited { 스타일 } 이미 방문한 링크를 의미한다.
A:active { 스타일 } 클릭했을 때의 링크를 의미한다.
A:hover { 스타일 } 커서가 올라갔을 때의 링크를 의미한다.
자주사용되는 글씨...
한글 | "굴림체","돋움체","바탕체","궁서체"
영어 | "Arial","tahoma","verdana","Impact","times","sans-serif","geneva","courier"
Filter
FILTER: shadow(color=navy,direction=135);
FILTER: glow(color=navy,direction=135);
writing-mode:tb-rl
글씨를 세우는 역활을 하는것 입니다
문자열 자르기 ################### 6
<style="overflow:hidden; text-overflow:ellipsis;"><nobr>
가로크기가 지정되어 있는경우에 사용할 수 있다.
둥근모서리 구현 ################### 7
<style>
.rtop, .rbottom{display:block; background: #FFFFFF;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: #9BD1FA;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
</style>
<div id="container" style="background: #9BD1FA" align=center>
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<p>대류커뮤니티 CSS로 둥근 모서리 구현하기</p>
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
CSS 만으로 구현하는 롤오버 이미지 ################### 8
<head> 와 </head> 사이에 아래의 구문을 삽입합니다.
<style type="text/css">
a.rollover img { border-width:0px; display:inline; }
a.rollover img.over { display:none; }
a.rollover:hover { border:0px }
a.rollover:hover img { display:none; }
a.rollover:hover img.over { display:inline; }
</style>
그리고 <body> 의 적당한 위치에 아래의 형식을 응용하여 이미지를 삽입하면 됩니다.
<a href="주소" class="rollover"><img src="기본이미지"><img src="마우스 오버시 보여줄 이미지" class="over"></a>
일반적인 텍스트에 롤오버 적용하기 ################### 9
<span OnMouseOver="this.style.color='#blue'" OnMouseOut="this.style.color=''">내용</span>
스타일을 이용한 링크에 여러가지 효과 주기 ################### 10
<style type="text/css">
<!--
A:link {color:#666666; text-decoration:none}
A:visited {color:#666666; text-decoration:none}
A:active {color:#666666; text-decoration:none}
A:hover {color:#blue; text-decoration:none}
-->
</style>
위와 같은 기본적인 스타일 소스에서 A:hover 를 잘 이용하면 다양한 링크효과를 줄 수 있습니다.
밑 줄 A:hover {color:#blue; text-decoration:underline}
굵 게 A:hover {color:#blue; text-decoration:none; font-weight:bold}
크 게 A:hover {color:#blue; text-decoration:none; font-size:11pt}
배경색 A:hover {color:#blue; text-decoration:none; background-color:#blue; padding:2 2 0}
테두리 A:hover {color:#blue; text-decoration:none; border:1 solid #blue; padding:2 3 0}
점선테두리 A:hover {color:#blue; text-decoration:none; border:1 dotted #blue; padding:2 3 0}
누르는효과 A:hover {color:#blue; text-decoration:none; position:relative; top:2; left:2}
스타일을 중복 적용하자 ################### 11
.daerew { color:black;}
.daerew_bold { font-weight:bold; }
위의 스타일 두 개를 적용시킬 때 일반적으로 아래와 같이 사용합니다.
<span class=daerew>내용</span></span></font>
이것을 보다 편하게 아래와 같이하면 여러개를 손 쉽게 적용할 수 있습니다.
<span class='daerewdaerew_bold'>내용</span>
스타일시트를 이용한 글씨 세로로 쓰기 ################### 12
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="writing-mode:tb-rl;">
내용을 적어주세요^^
</div>
</td>
</tr>
</table>
</center>
가로 스크롤바만 없애기 ################### 13
<body> 에 아래의 구문을 추가해주면 됩니다.
style="overflow-x:hidden;overflow-y:scroll"
[ ------------------------------ 예문 ------------------------------ ]
<body style="overflow-x:hidden;overflow-y:scroll">
● 위의 소스가 적용이 안된다면 아래처럼해보세요
<body scroll=auto style="overflow-x:hidden">
자동 줄바꿈을 통한 테이블 크기 고정 ################### 14
테이블 작업을 하다가 글의 내용이 길어지면 지정된 테이블의 크기가 늘어나는 현상이 있을 수 있습니다. 이럴 때 테이블의 크기를 고정시키고 자동으로 줄바꿈을 해주는 기능입니다.
<table> 태그의 아래의 구문을 넣습니다.
style="table-layout:fixed;"
[ ------------------------------ 예문 ------------------------------ ]
<table style="table-layout:fixed;">
● 적용 시키고자 하는 셀에 아래의 구문을 넣습니다.
style="word-break:break-all;"
[ ------------------------------ 예문 ------------------------------ ]
<td style="word-break:break-all;">
점선 테이블 만들기 ################### 14
<fieldset style="line-height:15pt; padding:20; border-width:2; border-style:dotted; width:200; height:70; border-color: red;">
내용
</fieldset>
2라는 숫자는 점선테이블의 두께를 정합니다.
boder-style:dotted 는 선의 종류를 점선으로 하라는 명령이죠.
홈페이지 이중 링크 시키기 ################### 15
한 화면에서 두가지 형태의 링크를 주고 싶은경우가 있죠. 서로 색을 달리하거나 폰트크기도 달리한다든지..
CSS에서 링크하는 것들은 pseudo-classes 라고 합니다.
pseudo-classes는 활용에 따라 다양하게 적용을 할 수 있습니다.
아래는 간단한 예제입니다.
<html>
<head>
<style type="text/css">
A.blue:link {color: blue}
A.red:link {color: red}
A.foot:active {color: purple}
A.foot:visited {color: blue}
</style>
</head>
<body>
<a href="http://startdesign.net" class="blue"> blue</a>
<a href="http://startdesign.net" class="red"> red</a>
</body>
</html>
웹폰트 적용시키기 ################### 16
1. 웹폰트파일을 서버에 올린다.
(웹폰트는 확장자가 *.eot파일이나 mwf 등이 있습니다)
2. 인클루드할 스타일 시트를 작성한다.
ex) 작성예.
'daerew.css' 라는 파일이 있다고 가정하면 그 내용은 아래와 비슷할겁니다.
@font-face { font-family:WEB정; src:url(웹정주소) }
body, table, tr, td, select, input, div, form, textarea { background:#ffffff; color:#000000; font-size:9pt; font-family:WEB정; line-height:100% }
3. css를 적용할 html페이지의 head 사이에 다음의 소스를 적용합니다.
<style type="text/css">
@import url(daerew.css);
</style>
이렇게 소스가 적용이 되면 body, table, tr, td, select, input, div, form, textarea 가 들어가는 모든 부분의 텍스트가 웹정체로 나타나게 되는것이죠 ..
※ 일반적으로 폰트피아(http://www.fontpia.co.kr [새창에서 열기])의 웹정체를 많이 사용하지만 유료라는 단점이 있죠....
무료 웹폰트도 많은데요 검색사이트에서 웹폰트 치면 많이 나온답니다.
무료 웹폰트 중에는 오늘과내일(http://ttcgi.com [새창에서 열기])의 티티체를 많이 사용하더군요.
CSS Background
The CSS background properties define the background effects of an element.
1. Set the background color (배경화면 색 조정)
This example demonstrates how to set the background color for an element.
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
2. Set an image as the background (배경화면 지정하기)
This example demonstrates how to set an image as the background.
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg')
}
</style>
</head>
<body>
</body>
</html>
3. How to repeat a background image (배경화면 반복)
This example demonstrates how to repeat a background image.
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat
}
</style>
</head>
<body>
</body>
</html>
4. How to repeat a background image only vertically (배경화면을 세로로 한 줄만 반복)
This example demonstrates how to repeat a background image only vertically.
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
</body>
</html>
5. How to repeat a background image only horizontally (배경화면을 가로로 한 줄만 반복)
This example demonstrates how to repeat a background image only horizontally.
<html>
<head>
<style type="text/css">
body
{
background-image:
url('bgdesert.jpg');
background-repeat: repeat-x
}
</style>
</head>
<body>
</body>
</html>
6. How to display a background image only one time (배경화면 반복하지 않게)-<왼쪽 제일 윗 구석에 위치>)
This example demonstrates how to display a background image only one time
<html>
<head>
<style type="text/css">
body
{
background-image: url('bgdesert.jpg');
background-repeat: no-repeat
}
</style>
</head>
<body>
</body>
</html>
7. How to place the background image (배경화면을 가운데에 고정)
This example demonstrates how to place the image on the page.
<html>
<head>
<style type="text/css">
body
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-position:
center;
}
</style>
</head>
<body>
</body>
</html>
8. How to position a background image using % (배경 그림 고정과 배경 그림 위치를 %로 조절)
This example demonstrates how to position an image on the page using percent.
<html>
<head>
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 30% 20%;
}
</style>
</head>
<body>
</body>
</html>
9. How to position a background image using pixels (배경 그림 고정과 배경 그림 위치를 픽셀로 조절)
This example demonstrates how to position an image on the page using pixels.
<html>
<head>
<style type="text/css">
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>
</head>
<body>
</body>
</html>
10. How to set a fixed background image (배경화면을 왼쪽 제일 윗 구석에 고정)
This example demonstrates how to set a fixed background image. The image will not scroll with the rest of the page.
<html>
<head>
<style type="text/css">
body
{
background-image:
url('smiley.gif');
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>
<body>
<p>내용</p>
</body>
</html>
11. All the background properties in one declaration (배경화면 색깔,배경화면 가운데에 고정)
This example demonstrates how to use the shorthand property for setting all of the background properties in one declaration.
<html>
<head>
<style type="text/css">
body
{
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
</style>
</head>
<body>
<p>내용</p>
</body>
</html>
