쥬벤 라이브러리
프로그래밍언어, 각종코드, 관련동향, 논문 등의 저장소
Programming/HTML/CSS (32)
[CSS]텍스트 편집하기

텍스트 편집시 활용될수 있는 몇 가지 스타일쉬트입니다.

 

1. 글자의 간격을 지정할 때(letter-spacing)

 

<P style="letter-spacing:0.5em;">글자의 간격을 0.5em으로 설정했으므로 반 칸씩 이동하게 됩니다. 1em 은 기본 글꼴 하나만큼의 간격입니다.</p>

 

2. 텍스트에 밑줄을 그어줄 때(text-decoration)

 

<p style="text-decoration:underline">글자에 밑줄을 그어줍니다.</p>

<p style="text-decoration:overline">글자에 윗줄을 그어줍니다.</p>

<p style="text-decoration:line-through">글자 중앙으로 줄을 그어줍니다.</p>

 

3. 텍스트의 줄 간격을 지정할 때(line-height)

 

<p style="line-height:15pt">텍스트의 내용이 두 줄 이상일때 한줄한줄의 줄 간격을 지정해줍니다. 여기서는 15pt로 지정되었네요..^^</p>

신고

'Programming > HTML/CSS' 카테고리의 다른 글

[CSS]텍스트 편집하기  (0) 2004.12.24
이미지와 글의 간격조정하기  (0) 2004.10.25
[css] 영문 자동 줄바꿈  (0) 2004.10.14
TABLE 넓이 고정하기  (0) 2004.08.06
TEXTBOX에 CSS 활용하기  (0) 2004.08.06
글자에니메이션 - 마퀴(MARQUEE)  (0) 2004.06.27
배경이미지 속성 지정하기  (0) 2004.05.25
0  Comments,   0  Trackbacks
댓글 쓰기
이미지와 글의 간격조정하기

글과 이미지를 한페이지에 함께 띄울때..

물론 테이블을 만드는 방법도 있겠지만..

어떤 정보를 보여주는데.. 글이 있고 그림이 삽입되어 있는 정도라면..

오히려 테이블을 만드는것이 더 불편할거라는 생각이 들죠..?^^

그럴때 사용하시면 좋을겁니다.

그림을 삽입하면서 글과 그림의 간격을 일정하게 유지해주면 깔끔해보이고

꼭 필요한 부분이기도 하지요..^_^

 

- 글과 그림의 일정간격 조정하기

 

<img src="image1.gif" border=0hspace=30>

 

글과 그림의 좌우여백 조정하는 태그입니다.

 

<img src="image2.gif" border=0vspace=30>

 

글과 그림의 상하여백 조정하는 태그입니다.

신고

'Programming > HTML/CSS' 카테고리의 다른 글

[CSS]텍스트 편집하기  (0) 2004.12.24
이미지와 글의 간격조정하기  (0) 2004.10.25
[css] 영문 자동 줄바꿈  (0) 2004.10.14
TABLE 넓이 고정하기  (0) 2004.08.06
TEXTBOX에 CSS 활용하기  (0) 2004.08.06
글자에니메이션 - 마퀴(MARQUEE)  (0) 2004.06.27
배경이미지 속성 지정하기  (0) 2004.05.25
0  Comments,   0  Trackbacks
댓글 쓰기
[css] 영문 자동 줄바꿈

td 안에서 width 값을 100으로 정하고 그 안에 글씨를 길게 쓰게 되면

 

width 값을 100으로 인식하고 글들은 자동 줄바꿈이 되게 된다..

 

그러나... 그것이 한글이 아니라 영문만 빼곡하게 써있다면 얘기가 달라진다.

 

자동 줄바꿈을 전혀 하지 않고 td의 width값을 글의 길이에 맞춰버린다는것...^^

 

익스플로러6.0 에서는 버그수정이 된걸로 알고있는데..

 

익스플로러5.5 이하를 사용하는 사람도 많으니 이건 해결해줘야 할 부분이다.

 

- TD 내에서의 영문 자동 줄바꿈 태그

 

<table>

<tr>

<td width=100 style="word-break:break-all">내용</td>

</tr>

</table>

 

내용부분에 영문을 길게 써서 테스트해보세요..

그리고 stylesheet 부분을 지우고 테스트해보세요..^^

신고

'Programming > HTML/CSS' 카테고리의 다른 글

[CSS]텍스트 편집하기  (0) 2004.12.24
이미지와 글의 간격조정하기  (0) 2004.10.25
[css] 영문 자동 줄바꿈  (0) 2004.10.14
TABLE 넓이 고정하기  (0) 2004.08.06
TEXTBOX에 CSS 활용하기  (0) 2004.08.06
글자에니메이션 - 마퀴(MARQUEE)  (0) 2004.06.27
배경이미지 속성 지정하기  (0) 2004.05.25
0  Comments,   0  Trackbacks
댓글 쓰기
TABLE 넓이 고정하기

<table width=100style="TABLE-LAYOUT: fixed;">
   <tr>
      <td>abcdefghijklmnopqrstuvwxyz1234567890</td>
   </tr>
</table>

 

 

테이블의 넓이(width) 값을 정해준다하더라도 td내의 내용에 따라

 

더 커져버리기도 하는것이 보통입니다.

 

그런경우를 방지하기 위해테이블의 넓이를 고정시키는 소스입니다. 
  

신고

'Programming > HTML/CSS' 카테고리의 다른 글

[CSS]텍스트 편집하기  (0) 2004.12.24
이미지와 글의 간격조정하기  (0) 2004.10.25
[css] 영문 자동 줄바꿈  (0) 2004.10.14
TABLE 넓이 고정하기  (0) 2004.08.06
TEXTBOX에 CSS 활용하기  (0) 2004.08.06
글자에니메이션 - 마퀴(MARQUEE)  (0) 2004.06.27
배경이미지 속성 지정하기  (0) 2004.05.25
0  Comments,   0  Trackbacks
댓글 쓰기
TEXTBOX에 CSS 활용하기

CSS 를 활용해 TEXTBOX들을 다른모양으로 꾸민 예제입니다.

어차피 같은 기능을 가지고 있는 TEXTBOX 들입니다.

 

 

 

1.

2.

3.

4.

5.

6.

7.

8. 단색 라인에 바탕색을 처리한것인데.. 붙여넣기가 다르게 들어오네요..^^;;

 

 

                                                                                                                                 

 

활용예제의 소스 -

 

 

1. <input type=text name="name" size="15">


2. <input type=text name="name" size="15" style="color:white; background-color=pink; padding-top:1px; border-width:1px; border-color:#ffffff; border-top-style:none; border-left-style:none; border-right-style:line;">
   

3. <input type=text name="name" size="15" style="color:black; background-color=white; padding-top:1px; border-width:1px; border-color:pink; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:dotted;">
   

4. <input type=text name="name" size="15" style="color:black; background-color=white; padding-top:2px; border-width:2px; border-color:pink; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:dotted;">
   

 

5. <input type=text name="name" size="15" style="color:black; background-color=white;padding-top:1px; border-width:1px; border-color:pink; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:line;">
   

6. <input type=text name="name" size="15" style="color:black; background-color=white; padding-top:2px; border-width:2px; border-color:pink; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:line;">
   

7. <input type=text name="name" size="10" style="color:yellow; background-color=white; padding-top:2px; border-width:2px; border-color:#55aaff; border-top-style:none; border-left-style:none; border-right-style:none; border-bottom-style:none;">

 

8. <input type=text name="name" size="10" style="border:1 solid #d7d7d7; background-color:#f4f4f4;">

 

 

테스트하신후 각 속성을 변환시켜보면 쉽게 소스를 파악할수 있습니다.

색상이나 사이즈를 수정하여 사용하세요~^_^

신고

'Programming > HTML/CSS' 카테고리의 다른 글

이미지와 글의 간격조정하기  (0) 2004.10.25
[css] 영문 자동 줄바꿈  (0) 2004.10.14
TABLE 넓이 고정하기  (0) 2004.08.06
TEXTBOX에 CSS 활용하기  (0) 2004.08.06
글자에니메이션 - 마퀴(MARQUEE)  (0) 2004.06.27
배경이미지 속성 지정하기  (0) 2004.05.25
CSS를 활용해 간격조정하기  (0) 2004.05.20
0  Comments,   0  Trackbacks
댓글 쓰기
글자에니메이션 - 마퀴(MARQUEE)

MARQUEE라는 태그를 이용하여 글자들을 애니메이션 시켜 볼수있답니다.

간단한 html 만으로 텍스트에 가벼운 움직임을 줄수 있습니다.

 

 

- 오른쪽에서 왼쪽으로 글씨가 쭈욱 지나가요...

<marquee>글자가 지나가요</marquee>

 

- width=600 값을주어 가로 600픽셀 내에서만 움직여요.height 나 퍼센트로 줄수도 있어요.

<marquee width=600>영역을 지정해주어요</marquee>

 

- behavior=alternate 라는 값을 주어 글자가 좌우로 왔따갔다 해요.

<marquee width=600 behavior=alternate>좌우로 움직여요</marquee>

 

- behavior=slide 라는 값을주어 오른쪽에서 왼쪽으로 한번만 오구 정지되요.

<marquee width=600 behavior=slide>글자가 멈춰요</marquee>

 

- direction=left/right/up/down 라는 값을 이용해 움직이는 방향을 지정해주어요.

<marquee width=600 direction=right>오른쪽으로 움직여요</marquee>

 : direction=up/down 을 적용시킬땐 height=100 정도의 세로값도 적용시켜 주세요~

 

-scrolldelay=1000 이라는 값을 주어 1초동안 멈췄다 지나가요... 계속....

<marquee width=600 scrolldelay=1000>글자가 멈췄다 다시 지나가요</marquee>

 : scrolldelay=1000 이 1초구요. 값을 많이 주면.. 점프하는것처럼 보여요..

 

-scrollamount 값을 변경시키며 속도를 지정해주어요.

<marquee width=600 scrollamount=50>글이 빨리지나가요</marquee>

 

 

이외에loop 를 이용해서 마퀴의 횟수를 지정해줄수 있어요..

기본 무한정 반복이니까.. loop=10 이라고 추가해주면 열번만 지나가면 사라져요.

bgcolor을 이용해서 글자가 지나가는 영역부분에 바탕색을 넣어줄수도 있어요.

 

 

 

 

*현재 테스트는 한줄 텍스트였지만...

실제에서 사용할땐 몇줄의 텍스트를 사용하는 경우가 많습니다.

그런 경우.. 글자가 위로 막~~ 지나가다가 놓치는 경우가 있겠죠..?

 

그럴때 읽는 사람의 편의를 위해올라가던 텍스트에 마우스를 올리면... 마퀴가 멈춥니다.마우스를 치우면.. 다시 움직이기 시작하게 하는 소스입니다.

 

 

onmouseover=stop() onmouseout=start()

 

marquee 소스안에 추가해주세요~

단. 이 소스는 자바스크립트이기때문에 html 소스만 적용되는 창말고..

자바스크립트도 적용이 가능한곳에서만 가능해요~ 대부분이 가능하죠~^^;;

 

 

 

 

* 모든 사항은 html 태그가 사용되는곳에서 테스트 해보시면 금방 차이를 알수가 있답니다.^^*

신고

'Programming > HTML/CSS' 카테고리의 다른 글

[css] 영문 자동 줄바꿈  (0) 2004.10.14
TABLE 넓이 고정하기  (0) 2004.08.06
TEXTBOX에 CSS 활용하기  (0) 2004.08.06
글자에니메이션 - 마퀴(MARQUEE)  (0) 2004.06.27
배경이미지 속성 지정하기  (0) 2004.05.25
CSS를 활용해 간격조정하기  (0) 2004.05.20
HTML 에서의 엔터!!(줄바꿈)  (0) 2004.05.16
0  Comments,   0  Trackbacks
댓글 쓰기
배경이미지 속성 지정하기

특정 부분에만배경 이미지들어갈때..(또는 제외할때 응용하세요.)

 

<style type="text/css">

   body(background-image:none} --> 요건 배경이미지가 없다는것입니다.

   .bgbox{background-image:url(back.gif)} --> 요건 배경이미지가 back.gif 이네요..^^

</style>

 

<body>

이부분엔 배경이미지가 없어요^^<br>

<p class="bgbox">이 부분에만 배경이미지가 있어요~~</p>

</body>

 

배경을 이미지로 깔아줬을때 보여지는 화면보다 이미지가 작을 경우 이미지는 바둑판 형태로

반복되게 화면을 채워줍니다.

그렇지만 계속된 반복으로 처리되면 안될 배경이미지도 있습니다.

아직까지 없으셨나용...?? 곧 생깁니다..^^;

 

- 배경 이미지 반복속성 변경시..

 

<style type="text/css">

   body{backgrond-image:url(back.gif); background-repeat:repeat-y;}

</style>

 

<body>

back.gif 이미지로 배경이 깔리게 되는데...

background-repeat:repeat-y 의 영향을 받아 계속된 반복으로 화면이 채워지는것이 아니라

세로 방향으로만 반복해서 나타납니다.

</body>

 

background-repeat:repeat(배경이미지가 가로세로 양방향으로 반복해서 나타나는 것인데..

기본으로 설정된 것이므로 이 속성을 원할땐 안 넣으셔도 됩니다.)

background-repeat:repeat-x(배경이미지가 가로 방향으로만 반복해서 나타납니다.)

background-repeat:repeat-y(배경이미지가 세로 방향으로만 반복해서 나타납니다.)

background-repeat:no-repeat(배경이미지가 반복되지 않고 한번만 나타납니다.)

 

- 배경 이미지의 시작위치 지정하기

(배경이미지는 기본설정되어있는것이 브라우저의 좌측상단부터 채워지게 됩니다.

그런데.. 이 시작위치를 바꾸는 것이지요...)

 

<style type="text/css">

   body{background-image:url(back.gif);background-position:30% 50%;}

</style>

 

이렇게 지정을 해주면 background-position:30% 50% 의 영향으로

배경이미지는 위에서 30% 그리고 좌측에서 50% 되는 위치에 반복되게 됩니다.

이값은 퍼센트로 지정해주었지만.. 픽셀로 지정해 줄수도 있습니다.

 

요건 조금 복잡해 보일수도 있겠네요.. 사용하는 일은 드물지요..^^;;

잘 쓰지두 않는거 왜 떠드느냐.. 알아두믄 유용하니까... 먼소린지..-.-ㅋ

 

 

* 스타일쉬트에서 배경색 지정하기

<p style="background-color:#999999">요렇게 배경색을 지정해줍니다.</p>

 

* 배경이미지 고정하기

html문서에서 텍스트가 많을 경우에는 자동적으로 스크롤 바가 생기게 되죠..?

또한 페이지를 스크롤하게 되면 자동으로 백그라운드 이미지도 같이 움직이게 됩니다.

그래서 백그라운드 이미지는 따라 움직이지 않고 멈춰 있게 만드는 소스입니다.

<style type="text/css">

   body{backgrond-image:url(back.gif); background-repeat:no-repeat;

         background-attachment:fixed;}

</style>

신고
0  Comments,   0  Trackbacks
댓글 쓰기
CSS를 활용해 간격조정하기

CSS를 활용해 간격을 조정해보지요~

보통 HTML 에서는 오른쪽, 왼쪽, 가운데.. 그럼.. 왼쪽에서 째금 더 들어가고.. 가운데긴 가운데인데.. 쫌 우측으로 기울고.. 그럴려면 CSS를 활용합시다..

 

- 좌측 들여쓰기(이미지도 가능)

 

<TDstyle="padding-left:10px;">내용이 쭈~~욱</TD>

 

해당 TD의 내용이 10PX 좌측에서 들여쓰기되요~

 

- 우측 들여쓰기(이미지도 가능)

 

<TD align="right" style="padding-right:10px;">내용이 쭈~~욱</TD>

 

해당 TD의 내용이 우측으로부터 10PX 띄여지게 되요~

내용은 기본 좌측으로 붙어있게 되니까.. 우측에서 떨어지게 할때만 align="right"를 넣어준거랍니다.

 

- 상단에서 째금 띄우기(이미지도 가능)

 

<TDvalign="top" style="padding-top:10px;">내용이 쭈~~욱</TD>

 

해당 TD의 내용이 valign="top" 이 적용되어 상단으로 딱 붙게 되구요..

 style="padding-top:10px;" 이 적용되어 상단으로부터 10px 떨어지게 됩니다.

 

- 하단에서 째금 띄우기(이미지도 가능)

 

<TDvalign="bottom" style="padding-bottom:10px;">내용이 쭈~~욱</TD>

 

해당 TD의 내용이 valign="bottom" 이 적용되어 하단으로 딱 붙게 되구요..

 style="padding-bottom:10px;" 이 적용되어 하단으로부터 10px 떨어지게 됩니다.

 

 

요기까지.. 간단하죠..?!^^*

신고
0  Comments,   0  Trackbacks
댓글 쓰기
HTML 에서의 엔터!!(줄바꿈)

HTML 에서의줄바꿈.. 즉, 엔터 역할을 하는것이지요..

HTML 모드에서 아무리 엔터를 수십번 쳐도 브라우저는 한줄도 안 띄어줍니다.ㅡㅡㅋ

즉, 엔터역할을 해줄 태그가 필요한것이지용..

 

<BR>.. 끝입니다.^^

엔터한번.. <BR> 태그 한번.. 엔터두번이면..?! <BR> 태그 두번을 써주면 됩니다.

 

<P>.. 요것도 있습니다.

요건 문단을 나누는 역할을 하는것인데요..

문단이라고 해봣자.. 엔터역할을 하는 <BR> 보다 조금 더 띄어준다고 생각하시면 됩니다.

단.<P> 태그는 두번세번써도 안먹어줍니다. 한번만..^^

 

 

 

잠깐~*

엔터를 아무리쳐도 브라우저는 못알아듣는것처럼 안들어 먹는게 하나 더 있죠..

바로 사이띄기..^^

두칸.. 세칸.. 이쁘게 띄어줘도 브라우저는 도통 알아듣질 않습니다.

바로 한칸만 인식하거든요.. 많이띄워도 오직 한칸..

이럴때사이띄기 역할을 해주는 태그&nbsp;요것입니다.

한번써주면 한칸.. 두번써주면 두칸.........열번써주면 열칸이겠죠..?!^^*

신고
0  Comments,   0  Trackbacks
댓글 쓰기
페이지 전체의 배경색 및 바탕화면

- 페이지 전체의배경색바꾸기

 

<body bgcolor="#996699">배경색을 채워줍니다.

 

<body background="back.gif">back.gif 그림파일을 배경으로 깔아줍니다.

 

 

- 배경 이미지 고정하기

 

<body background="back.gif"bgproperties="fixed">

 

* 배경 이미지 고정하기..??

배경을 이미지로 처리하였을경우, 페이지의 내용이 늘어나고 스크롤바가 생기게 될경우.

스크롤하게 되면 배경이미지와 내용이 함께 스크롤됩니다.

이런경우.. 배경이미지는 고정되어있고 내용만 스크롤이 되어지게 하는 팁입니다.

신고
0  Comments,   0  Trackbacks
댓글 쓰기
폰트 색상 바꾸기

+ 폰트 색상 HTML 로 바꾸기 +

 

<font face="돋움" color="#666666" size=2>폰트 색상은..??</font>

 

색상을 적용시킬 부분의 시작부분과 끝부분에 코딩해줍니다.

색상은 blue, green... 머 이렇게 적용해주어도 되지만 색상코드를 이용해서 더욱 다양한

색상연출을 할수 있답니다. 색상표는 여기 저기서 쉽게 구할수 있어요~

 

+ 폰트 색상 CSS 로 바꾸기 +

 

<style type="text/css">

     .type01{font:12px 돋움; color:#666666;}

     .type02{font:16px 돋움; color:#996699;}

</style>

 

스타일내에 위와 같은식으로 정의를 해두고 적당할때 꺼내서 사용합니다.

<tableclass="type01"....요렇게.. 그럼.. 해당 TABLE 에서 type01 로 정의된속성이 적용됩니다.

<tdclass="type02"........요렇게.. 그럼.. 해당 TD 에서 type02 로 정의된속성이 적용됩니다.

 

신고

'Programming > HTML/CSS' 카테고리의 다른 글

CSS를 활용해 간격조정하기  (0) 2004.05.20
HTML 에서의 엔터!!(줄바꿈)  (0) 2004.05.16
페이지 전체의 배경색 및 바탕화면  (0) 2004.05.16
폰트 색상 바꾸기  (0) 2004.05.15
&quot;HTML&quot; 로 내용 정렬하기  (0) 2004.05.10
테이블 만들기 05  (0) 2004.05.01
테이블 만들기 04  (0) 2004.05.01
0  Comments,   0  Trackbacks
댓글 쓰기
&quot;HTML&quot; 로 내용 정렬하기

내용 줄 맞추기~

 

- 사용 예..

(혼자서는 사용할수 없어요.. 아.. 사용할수 없는건 아니구 다른것들과 함께 사용해요~^^)

 

<P align="center">

내용........

</P>

 

P 태그안에 내용들만 가운데 정렬을 해줘요~

 

<TABLE align="right">테이블안의 내용

<TR align="right">TR 안의 내용

<TD align="right">TD 안의 내용

 

..... 등등 요렇게 다른 태그안에 함께 사용해주세요..

 

align="left" 는 구지 해주지 않아도 되요.. 기본설정이 좌측정렬이라 안해줘도 되거등요..

 

상하로 정렬할땐..

 

valign="top"    ---->    요건 상단으로 딱 붙게되구욤.

valign="bottom" --->  요건 하단으로 딱 붙게되구욤.

 

간단간단...^^*

 

 

신고

'Programming > HTML/CSS' 카테고리의 다른 글

HTML 에서의 엔터!!(줄바꿈)  (0) 2004.05.16
페이지 전체의 배경색 및 바탕화면  (0) 2004.05.16
폰트 색상 바꾸기  (0) 2004.05.15
&quot;HTML&quot; 로 내용 정렬하기  (0) 2004.05.10
테이블 만들기 05  (0) 2004.05.01
테이블 만들기 04  (0) 2004.05.01
테이블 만들기 03  (0) 2004.05.01
0  Comments,   0  Trackbacks
댓글 쓰기
테이블 만들기 05

- 테이블의 테두리 색

 

<table border=1 bordercolor="#CCCCCC" cellspacing=0>

   <tr>...............이하 생략^^

 

cellspacing 값에 0을 주지않으면.. 테두리가 두겹으로 안이쁘기때문에 준거랍니다.^^

 

- 테이블의 배경색

 

<table border=1bgcolor="#CCCCCC"cellspacing=0>

   <tr>

      <td>1-1셀</td>

      <td>1-2셀</td>

   </tr>

   <tr>

      <tdbgcolor="#000000">2-1셀</td>

      <td>2-2셀</td>

   </tr>

   <trbgcolor="#C0B15D">

      <td>3-1셀</td>

      <td>3-2셀</td>

   </tr>

</table>

 

table, tr,td 에 각각 배경색을 넣은것이구요.

색말고 배경을 이미지로 깔고 싶을땐..

bgcolor="칼라코드" 대신background="이미지주소"

이렇게 하시면 됩니다.^^

 

색상을 사용하실땐 색의 명칭을 직접입력해도 되요.. white, green, red 등등..

그렇지만.. 좀더 다양한 색표현은 칼라코드를 직접사용하는게 좋답니다.

칼라코드는 포토샾같은 그래픽툴에서 찾아볼수도 있고 제 블로그에 다른분 블로그에서 가져온

색상표도 있으니 참고하세요~^_^

 

잠깐...^^;

border=1 로 설정을 했을때 테이블의 테두리가 좀 뭉뚝하구 보기 안좋죠..?!

앏고 슬림한 선으로 표현하고 싶을땐.....

이렇게 해보세요.. 한 예일뿐.. 방법은 많답니다..^_^

 

<table border=0 cellpadding=0cellspacing=1 bgcolor="#ff9900">

   <tr bgcolor="#ffffff"><td>1-1셀영역</td></tr>

   <tr bgcolor="#ffffff"><td>2-1셀영역</td></tr>

</table>

신고

'Programming > HTML/CSS' 카테고리의 다른 글

페이지 전체의 배경색 및 바탕화면  (0) 2004.05.16
폰트 색상 바꾸기  (0) 2004.05.15
&quot;HTML&quot; 로 내용 정렬하기  (0) 2004.05.10
테이블 만들기 05  (0) 2004.05.01
테이블 만들기 04  (0) 2004.05.01
테이블 만들기 03  (0) 2004.05.01
부분영역에 링크걸기~  (0) 2004.04.27
0  Comments,   0  Trackbacks
댓글 쓰기
테이블 만들기 04

좀 더 깔끔한 테이블을 만들기 위한 필수소스~

어떤것이라는 설명보다는 소스를 보세요~^_^

cellpadding 과 cellspacing

 

기본 깔끔한 테이블을 만들기 위해선 두개다 '0'이란 값을 주어야 하며,

이값은 주지 않아도 설정되는 기본값이 아닙니다.

또, 필요에 다라 그 값을 조절해주는것도 필요하답니다.

 

cellpadding..이란?! 셀의 선과 내용과의 간격

cellspacing..이란?! 셀과 셀 사이의 간격

 

조금 까다로워보이지만.. 이건 몇번 테스트를 해보면 정확히 알 수 있을거에요~

 

<table border=1 cellpadding=0 cellspacing=0>

<tr>

   <td>1-1번셀</td>

   <td>1-2번셀</td>

</tr>

   <td>2-1번셀/td>

   <td>2-2번셀</td>

</tr>

</table>

 

사용예입니다. 이건 기본인데... 정확히 파악하기 위해서..

첫번째,  cellspacing=0 을 뺀것과 비교하세요.

두번째,  cellspacing=0 에서 0값을 늘려서 비교하세요.

세번째,  cellpadding=0 에서 0값을 늘려서 비교하세요.

정확히 이해가 가실겁니다.

 

- 사용 예제 샘플 -   

사용자 삽입 이미지

신고

'Programming > HTML/CSS' 카테고리의 다른 글

폰트 색상 바꾸기  (0) 2004.05.15
&quot;HTML&quot; 로 내용 정렬하기  (0) 2004.05.10
테이블 만들기 05  (0) 2004.05.01
테이블 만들기 04  (0) 2004.05.01
테이블 만들기 03  (0) 2004.05.01
부분영역에 링크걸기~  (0) 2004.04.27
깔끔하고 편리한 색상표~  (0) 2004.04.26
0  Comments,   0  Trackbacks
댓글 쓰기
테이블 만들기 03

테이블을 만들다 보면.. 사용되어 지고 또 사용되어야할 팁들에 관한 내용입니다.

테이블을 꾸미고 정렬하는 소스입니다.

 

1. 테이블을 크기정하기

 

<table border=1 width=500 height=400>

   <tr height=100>

      <td width=250>250*100size</td>

      <td width=150>150*100size</td>

   </tr>

   <tr height=300>

      <td>250*300size</td>

      <td>150*300size</td>

   </tr>

</table>

 

전체 테이블의 크기를width=500 (가로사이즈), height=400 (세로사이즈)이렇게 지정해줍니다.

또, tr의 세로값과 td의 가로값을 지정해줍니다. 따로 지정해주지않으면..

각 셀에 포함되어지는 내용에 따라 그냥 지멋대로 지정되게 됩니다.

또 전체 테이블의 가로값이 400이라면.. 그 안에 들어가는 tr의 세로값 또한 당연히 전부 합했을때

400이 넘지 않아야 하겠죠..

또 1행의 1열의 가로값이 250이라면.. 2행의 1열값은 물론 같은 열이므로 가로 250이 자동으로 주어지겠죠..^^

 

2. 테이블의 테두리 라인 지정하기

 

테이블의 테두리는 tr, td에 따로 지정되어 지지 않습니다. table 에 테두리를 지정할 수 있으며,

테이블의 테두리는 각 tr,td 에도 똑같이 지정됩니다.

 

<tableborder=1> 테이블의 테두리 1이 주어집니다.

<tableborder=0> 테이블의 테두리 0이 주어집니다. 즉, 보이지 않는거죠..

테두리 값은 0~ 큰 수를 넣어주면 됩니다.

그렇지만 이런 방법은 거의 사용하지 않습니다. 왜냐.. 두껍고 안이쁘니까요..^^;

 

얇은 테두리를 나타내는 방법은 많습니다. 그건 차차 테이블이 익숙해지면 자기만의 테크닉이 생길것입니다.^_^

신고

'Programming > HTML/CSS' 카테고리의 다른 글

&quot;HTML&quot; 로 내용 정렬하기  (0) 2004.05.10
테이블 만들기 05  (0) 2004.05.01
테이블 만들기 04  (0) 2004.05.01
테이블 만들기 03  (0) 2004.05.01
부분영역에 링크걸기~  (0) 2004.04.27
깔끔하고 편리한 색상표~  (0) 2004.04.26
설명글 띄우기~  (0) 2004.04.18
0  Comments,   0  Trackbacks
댓글 쓰기
부분영역에 링크걸기~

이미지같은걸 작업하다보면.. 이미지를 자르기 좀 애매한부분들도 있고..

가끔 구지 자르기 귀찮을때도 있고..^^;

 

통이미지의 부분 부분을영역으로 지정해서 링크하는 방법입니다.

 

<img usemap="#map1" src="imgTest.gif" border=0>

 

<map name="map1">

<area href="gogo1.htm" shape="rect" coords="5, 3, 20, 70" onfocus="this.blur()">

<area href="gogo2.htm" shape="rect" coords="50, 100, 120, 120" onfocus="this.blur()">

</map>

 

사용할 이미지의맵의 이름 "#map1"로 표기하고..

아랫줄에 map1 에 대한 정의들이 나옵니다.

맵에 대한 내용은 아래에 있어도 되고.. 위쪽에 있어도 상관없습니다.

coords="5, 3, 20, 70" 이 부분만 잘 활용하면 됩니다.

영역을 표시해주는데요..

5는 좌측시작 좌표점, 3은 상단시작 좌표점, 20은 우측끝 좌표점, 70은 하단끝 좌표점..

그럼.. 유용하게..^_^

신고

'Programming > HTML/CSS' 카테고리의 다른 글

테이블 만들기 05  (0) 2004.05.01
테이블 만들기 04  (0) 2004.05.01
테이블 만들기 03  (0) 2004.05.01
부분영역에 링크걸기~  (0) 2004.04.27
깔끔하고 편리한 색상표~  (0) 2004.04.26
설명글 띄우기~  (0) 2004.04.18
테이블 만들기 02  (0) 2004.04.15
0  Comments,   0  Trackbacks
댓글 쓰기
깔끔하고 편리한 색상표~
컬러 이름16진수             
red#FF0000  
crimson#DC143C  
firebrick#B22222  
maroon#800000  
darkred#8B0000  
brown#A52A2A  
sienna#A0522D  
saddlebrown#8B4513  
indianred#CD5C5C  
rosybrown#BC8F8F  
lightcoral#F08080  
salmon#FA8072  
darksalmon#E9967A  
coral#FF7F50  
tomato#FF6347  
sandybrown#F4A460  
lightsalmon#FFA07A  
peru#CD853F  
chocolate#D2691E  
orangered#FF4500  
orange#FFA500  
darkorange#FF8C00  
tan#D2B48C  
peachpuff#FFDAB9  
bisque#FFE4C4  
moccasin#FFE4B5  
navajowhite#FFDEAD  
wheat#F5DEB3  
burlywood#DEB887  
darkgoldenrod#B8860B  
goldenrod#DAA520  
gold#FFD700  
yellow#FFFF00  
lightgoldenrodyellow#FAFAD2  
palegoldenrod#EEE8AA  
khaki#F0E68C  
darkkhaki#BDB76B  
lawngreen#7CFC00  
greenyellow#ADFF2F  
chartreuse#7FFF00  
lime#00FF00  
limegreen#32CD32  
yellowgreen#9ACD32  
olive#808000  
olivedrab#6B8E23  
darkolivegreen#556B2F  
forestgreen#228B22  
darkgreen#006400  
green#008000  
seagreen#2E8B57  
mediumseagreen#3CB371  
darkseagreen#8FBC8F  
lightgreen#90EE90  
palegreen#98FB98  
springgreen#00FF7F  
mediumspringgreen#00FA9A  
teal#008080  
darkcyan#008B8B  
lightseagreen#20B2AA  
mediumaquamarine#66CDAA  
cadetblue#5F9EA0  
steelblue#4682B4  
aquamarine#7FFFD4  
powderblue#B0E0E6  
paleturquoise#AFEEEE  
lightblue#ADD8E6  
lightsteelblue#B0C4DE  
skyblue#87CEEB  
lightskyblue#87CEFA  
mediumturquoise#48D1CC  
turquoise#40E0D0  
darkturquoise#00CED1  
aqua#00FFFF  
cyan#00FFFF  
deepskyblue#00BFFF  
dodgerblue#1E90FF  
cornflowerblue#6495ED  
royalblue#4169E1  
blue#0000FF  
mediumblue#0000CD  
navy#000080  
darkblue#00008B  
midnightblue#191970  
darkslateblue#483D8B  
slateblue#6A5ACD  
mediumslateblue#7B68EE  
mediumpurple#9370DB  
darkorchid#9932CC  
darkviolet#9400D3  
blueviolet#8A2BE2  
mediumorchid#BA55D3  
plum#DDA0DD  
lavender#E6E6FA  
thistle#D8BFD8  
orchid#DA70D6  
violet#EE82EE  
indigo#4B0082  
darkmagenta#8B008B  
purple#800080  
mediumvioletred#C71585  
deeppink#FF1493  
fuchsia#FF00FF  
magenta#FF00FF  
hotpink#FF69B4  
palevioletred#DB7093  
lightpink#FFB6C1  
pink#FFC0CB  
mistyrose#FFE4E1  
blanchedalmond#FFEBCD  
lightyellow#FFFFE0  
cornsilk#FFF8DC  
antiquewhite#FAEBD7  
papayawhip#FFEFD5  
lemonchiffon#FFFACD  
beige#F5F5DC  
linen#FAF0E6  
oldlace#FDF5E6  
lightcyan#E0FFFF  
aliceblue#F0F8FF  
whitesmoke#F5F5F5  
lavenderblush#FFF0F5  
floralwhite#FFFAF0  
mintcream#F5FFFA  
ghostwhite#F8F8FF  
honeydew#F0FFF0  
seashell#FFF5EE  
ivory#FFFFF0  
azure#F0FFFF  
snow#FFFAFA  
white#FFFFFF  
gainsboro#DCDCDC  
lightgrey#D3D3D3  
silver#C0C0C0  
darkgray#A9A9A9  
lightslategray#778899  
slategray#708090  
gray#808080  
dimgray#696969  
darkslategray#2F4F4F  
black#000000  


이거 만들라믄 정말 손이 많이 갈텐데.. 대단함니당..^_^

저는 제이님 블로그에서 퍼온것인데.. 출처는 따로있네요..?!^^;

출처블로거님께도 감사~* 제이님께도 감사~*

우리모두 유용하게 사용해보자구용~^_^

신고

'Programming > HTML/CSS' 카테고리의 다른 글

테이블 만들기 04  (0) 2004.05.01
테이블 만들기 03  (0) 2004.05.01
부분영역에 링크걸기~  (0) 2004.04.27
깔끔하고 편리한 색상표~  (0) 2004.04.26
설명글 띄우기~  (0) 2004.04.18
테이블 만들기 02  (0) 2004.04.15
테이블 만들기 01  (0) 2004.04.13
0  Comments,   0  Trackbacks
댓글 쓰기
설명글 띄우기~

텍스트나 이미지에 마우스를 올리면설명글이 뜨게 되는 소스입니다.

 

보통 텍스트의 경우

<font title="텍스트에 설명글">나는 텍스트</font>

링크 텍스트의 경우

<a href="#" title="링크걸린 텍스트에 설명글">나는 링크텍스트</a>

이미지의 경우

<img src="img.gif" border=0 alt="이미지에 설명글">

폼인 경우

<inuput type="text" title="폼에 설명글">.. 버튼의 경우도 같습니다.

신고

'Programming > HTML/CSS' 카테고리의 다른 글

테이블 만들기 03  (0) 2004.05.01
부분영역에 링크걸기~  (0) 2004.04.27
깔끔하고 편리한 색상표~  (0) 2004.04.26
설명글 띄우기~  (0) 2004.04.18
테이블 만들기 02  (0) 2004.04.15
테이블 만들기 01  (0) 2004.04.13
링크된 글씨 색 바꾸기  (0) 2004.04.07
0  Comments,   0  Trackbacks
댓글 쓰기
테이블 만들기 02

테이블을 사용할때 첨에 이해가 잘 안가시면..엑셀을 생각하시면 편합니다.

셀이란 의미가 많이 비슷하거든요..^^

또 테이블을 만들때 1행에서는 1열만 있어야 하고 2행에선 2열이 있어야 하는경우..

를 그린다 생각해보면.. 당연히 필요한 일이겠죠..?!

 

테이블에서 열을 합쳐주는 소스입니다.

 

3행 3열의 테이블이 있습니다. 긍데 1행은 뻥 뚫어서 1열로 만들고..

2행에서 2열까지를 하나로 만들고 1열은 그대로 두려고 합니다.

소스를 보세요.

 

<table border=1>

   <tr>

      <tdcolspan=3>3열에서 벽을 허물고 1열로 합침!</td>

   </tr>

   <tr>

      <tdcolspan=2>2열에서 벽을 허물고 1열로 합침!</td>

      <td>기존의 1열</td>

   </tr>

   <tr>

      <td>기존 첫번째 열</td>

      <td>기존 두번째 열</td>

      <td>기존 세번째 열</td>

   </tr>

</table>

 

여기에서 새로운 소스 'colspan' 이것이 열을 합쳐주는 역할을 합니다.

열 두개를 합쳐준것이니까 colspan=2 라고 코딩해줍니다.

 

  ▼ 테이블 보기

사용자 삽입 이미지

신고

'Programming > HTML/CSS' 카테고리의 다른 글

부분영역에 링크걸기~  (0) 2004.04.27
깔끔하고 편리한 색상표~  (0) 2004.04.26
설명글 띄우기~  (0) 2004.04.18
테이블 만들기 02  (0) 2004.04.15
테이블 만들기 01  (0) 2004.04.13
링크된 글씨 색 바꾸기  (0) 2004.04.07
입력폼에서 자동 한글/영어 입력모드 맞추기~  (0) 2004.04.05
0  Comments,   0  Trackbacks
댓글 쓰기
테이블 만들기 01

한 페이지에서 내용을 쓸때는 그냥 쓰는것보다는테이블을 이용해서 쓰는것이 효과적입니다.

텍스트와 이미지.. 등등이 섞여 있는 내용에선 더욱 그렇죠..

정렬하는것에서 특히 유용하기도 하고.. 방법이 이것뿐이기도 하구요..

 

테이블의 기본유형은..

<table border="1">                                                                  ▼ 기본 테이블 모

사용자 삽입 이미지

  <tr>

    <td>한 칸짜리 테이블</td>                        

  </tr>

</table>

 

여기에서tr 은 행을 의미하는것이구요..td 는 열을 의미합니다.

행이 없는 열은 존재할수 없고, 꼭!!열은 행안에 들어있어야 한다는 것입니다.

table 에서 border="1" 은 눈에 보이게 하기위해 테두리를 준것입니다.

즉, 테이블의 테두리를 1로 준것입니다.

 

두번째 유형..

<table border="1">

  <tr>

    <td>1행의 1열</td>

    <td>1행의 2열</td>                                                              ▼ 두번째 테이블 모

사용자 삽입 이미지

  </tr>

  <tr>

    <td>2행의 1열</td>

    <td>2행의 2열</td>

  </tr>

</table>

 

두개의 행으로 이루어져 있으며, 한개의 행에 각 두개의 열로 나누어져 있습니다.

여기에서 알아둘것은.. 큰박스(table) 안에는 행과 열로 이루어져 있으며,

각 행의 열의 갯수는 동일해야 한다는 것입니다.

즉, 첫번째 행의 열이 두개이고 두번째 행의 열이 한개가 될수 없다는 것입니다.

 

내용을 정리해보자면..?!

1. 테이블을 만들땐 시작부분에 <talbe>로 시작됨을 정의하고

   끝나는 부분에 </table> 로 끝을 정의합니다.

2. <table>, <tr>, <td> 모두 시작되는것이 있고 끝나는 부분에서 닫아주어야 합니다.

    (</table>, </tr>, </td>.. 이런식으로..)

3. 테이블 안에는 행과 열이 한개이상은 꼭 존재해야 합니다.

4. 열은 독립될수 없으며, 행 안에서 열이 존재해야 합니다.

5. 1 행에서의 열의 갯수는 2열,3열,,, 테이블 끝까지 동일해야 합니다.

신고

'Programming > HTML/CSS' 카테고리의 다른 글

깔끔하고 편리한 색상표~  (0) 2004.04.26
설명글 띄우기~  (0) 2004.04.18
테이블 만들기 02  (0) 2004.04.15
테이블 만들기 01  (0) 2004.04.13
링크된 글씨 색 바꾸기  (0) 2004.04.07
입력폼에서 자동 한글/영어 입력모드 맞추기~  (0) 2004.04.05
스크롤바 강제로 숨겨두기~  (0) 2004.04.05
0  Comments,   0  Trackbacks
댓글 쓰기