[펌] 17개의 CSS 초보 소스

태그: CSS 소스

17개의 CSS 초보 소스

1. form 문에서 여백없애기

<form …..> 이런 문은 기본적인 여백이 있습니다.
그럴때마다 style=”margin:0px;padding:0px;” 라고 쓰기는 상당히 귀찮은 일일겁니다.
항상 읽어 들이는 style.css 가 있다면 다음과같이 추가 합니다.

form {padding:0px; margin:0px}

라고 추가 해 놓으면 어떠한 문장에서든지 form 문은 여백이 없어집니다.

2. 셀렉트 박스에서 내용 우측정렬시키기

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

5. 자주 사용하는 css 속성

– 글꼴장식.
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. 문자열 자르기

가로크기가 지정되어 있는 경우에 사용할 수 있다.

7 . 둥근모서리 구현

.r1 { margin: 0 5px; background: #DEDEDE; height: 1px; }
.r2 { margin: 0 3px; background: #FFFFFF; border: solid #DEDEDE; border-width: 0 2px; }
.r3 { margin: 0 2px; background: #FFFFFF; border: solid #DEDEDE; border-width: 0 1px; }
.r4 { margin: 0 1px; background: #FFFFFF; border: solid #DEDEDE; border-width: 0 1px; height: 2px; }

.r5 { margin: 0 2px; background: #DEDEDE; height: 1px; }
.r6 { margin: 0 1px; background: #FFFFFF; border: solid #DEDEDE; border-width: 0 1px; height: 1px; }

.rc { background:#FFFFFF; border: solid #DEDEDE; border-width: 0 1px; }
</style>

<div style=”width:400px;”>
<b class=”rtop”><b class=”r1″></b><b class=”r2″></b><b class=”r3″></b><b class=”r4″></b></b>
<div class=”rc” style=”text-align:center;”>Round Table type 1</div>
<b class=”rbottom”><b class=”r4″></b><b class=”r3″></b> <b class=”r2″></b><b class=”r1″></b></b>
</div>
<br />
<div style=”width:400px;”>
<b class=”rtop”><b class=”r5″></b><b class=”r6″></b></b>
<div class=”rc” style=”text-align:center;”>Round Table type 2</div>
<b class=”rbottom”><b class=”r6″></b><b class=”r5″></b></b>
</div>

8. CSS 만으로 구현하는 롤오버 이미지

<head> 와 </head> 사이에 아래의 구문을 삽입합니다.

그리고 <body>의 적당한 위치에 아래의 형식을 응용하여 이미지를 삽입하면 됩니다.

9. 일반적인 텍스트에 롤오버 적용하기

10. 스타일을 이용한 링크에 여러가지 효과 주기

위와 같은 기본적인 스타일 소스에서 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; top:2; left:2}

11. 스타일을 중복 적용하자

.daerew { color:black;}
.daerew_bold { font-weight:bold; }

위의 스타일 두 개를 적용시킬 때 일반적으로 아래와 같이 사용합니다.

이것을 보다 편하게 아래와 같이하면 여러개를 손 쉽게 적용할 수 있습니다.

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”>

● 위의 소스가 적용이 안된다면 아래처럼해보세요

14. 자동 줄바꿈을 통한 테이블 크기 고정

테이블 작업을 하다가 글의 내용이 길어지면 지정된 테이블의 크기가 늘어나는 현상이 있을 수 있습니다. 이럴 때 테이블의 크기를 고정시키고 자동으로 줄바꿈을 해주는 기능입니다.

<table> 태그의 아래의 구문을 넣습니다.

style=”table-layout:fixed;”

[ —————————— 예문 —————————— ]
<table style=”table-layout:fixed;”>

● 적용 시키고자 하는 셀에 아래의 구문을 넣습니다.

style=”word-break:break-all;”

[ —————————— 예문 —————————— ]
<td style=”word-break:break-all;”>

15. 점선 테이블 만들기

2라는 숫자는 점선테이블의 두께를 정합니다.
boder-style:dotted는 선의 종류를 점선으로 하라는 명령이죠.

16. 홈페이지 이중 링크 시키기

한 화면에서 두가지 형태의 링크를 주고 싶은경우가 있죠.

서로 색을 달리하거나 폰트크기도 달리한다든지..
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>

17. 웹폰트 적용시키기

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 [새창에서 열기])의 티티체를 많이 사용하더군요.