새우의 세상사

'소스'에 해당되는 글 2건

  1. 2008.07.26 [펌] 윈도우용 CVS 설치
  2. 2007.08.06 [펌] 17개의 CSS 초보 소스

원문 링크 : [펌] 윈도우용 CVS 설치


[펌] 윈도우용 CVS 설치

1. 사용할 CVSNT 를 다운 받습니다.

  - 이곳에서 http://www.cvsnt.org 다운 받으면 됩니다.

  - 여기서는 cvsnt-2.5.03.2383.msi 버전을 기준으로 설명.

2. 더블클릭하여 설치 시작합니다.

사용자 삽입 이미지

3. 라이센스 동의 하시고

사용자 삽입 이미지

4. 설치타입 선택을 선택하신 다음

사용자 삽입 이미지

5. 인스톨 시작합니다.

사용자 삽입 이미지

6. 인스톨 진행

사용자 삽입 이미지

7. 인스톨 완료

사용자 삽입 이미지

8. 시스템 재부팅을 반드시 하시고요.

사용자 삽입 이미지

9. 프로그램 메뉴에서 CVSNT > CVSNT Control Panel 메뉴를 클릭하신 다음

 - CVS Server setting 을 합니다.

 - location : 설정 파일 위치

 - name : cvs 이름 (사용자 등록시 사용) - 프로젝트명

사용자 삽입 이미지

10. 해당 프로젝트 폴더를 만든다.

사용자 삽입 이미지

Temporay : 소스파일이 저장되는 곳이 아니다. 사용자별 로그가 싸이는 곳임

11. 환경을 설정한신 후 서비스를 잠시 Stop 하신후 -> 다시 Start 합니다.

 *  Running이 안될 경우 작업관리자 -> 프로세스 에서 해당 프로세스를 죽인 후 다시 하면 됩니다.

사용자 삽입 이미지

12. Dos 커맨드 창을 띄우시고..

  - 아래와 같이 CVSROOT를 설정하시고

  - 필요하면 사용자를 추가합니다.

set CVSROOT=:pserver:IP:/cvsroot <- 위쪽 name 과 같게

 > cvs login

윈도우 계정으로 로그인한 패스워드 입력

 > cvs passwd -a -r 계정 등록아이디

사용자 삽입 이미지

그 다음은 Eclipse 를 띄우시고 아래와 같이 CVS Repository 를 설정합니다.

13. Eclipse 설정

  - Windows > Show View > Other > CVS Repositories 선택

  - 마우스 오른쪽버튼 > New > Repository Location 선택

14.  Add CVS Repository 설정

사용자 삽입 이미지
Posted by 새우날다 Trackback 0 Comment 0

댓글을 달아 주세요

원문 링크 : 17개의 CSS 초보 소스


17개의 CSS 초보 소스

1. form 문에서 여백없애기

<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

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. 문자열 자르기

<style="overflow:hidden; text-overflow:ellipsis;"><nobr>

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

7 . 둥근모서리 구현

<style type="text/css">
.rtop, .rbottom{ display:block; background: #FFFFFF; }
.rtop *, .rbottom *{ display: block; height: 1px; overflow: hidden; }

.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> 사이에 아래의 구문을 삽입합니다.

<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; 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;">

15. 점선 테이블 만들기

<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는 선의 종류를 점선으로 하라는 명령이죠.

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>

<a href="http://startdesign.net" class="blue"> blue</a>

<a href="http://startdesign.net" class="red"> red</a>
</body>
</html>

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

Posted by 새우날다 Trackback 0 Comment 0

댓글을 달아 주세요