| 공지 |
HTML
HTML 기초 다지기
 4
|
오작교 | 222302 | | 2008-06-17 | 2010-08-19 13:08 |
| 공지 |
HTML
HTML과 CSS의 종합 정리
1
|
오작교 | 282859 | | 2007-10-01 | 2010-08-19 12:45 |
| 공지 |
일반
스타일시트의 총정리
|
오작교 | 239484 | 14 | 2006-09-14 | 2010-08-19 12:45 |
| 54 |
CSS
여러방법의 창닫기
|
오작교 | 22358 | 23 | 2006-04-16 | 2006-04-16 21:41 |
|
<HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=ks_c_5601-1987"> <STYLE>BODY { FONT-SIZE: 12px } TD { FONT-SIZE: 12px } </STYLE> <META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD> <BODY> <TABLE cellSpacing=1 cel...
|
| 53 |
CSS
단어와 글자 여백을 조정하는 스타일
|
오작교 | 22338 | | 2009-07-07 | 2009-07-07 16:40 |
|
<style type="text/css"> <!-- h1 { word-spacing:5px; } h2 { letter-spacing:7px; } --> </style> <body> 오작교의 스타일 시트 <h1>word-spacing 속성은 단어사이의 여백 조정</h1> <h2>letter-spacing 속성은 글자사이의 여백 조정 </h2> </body>
|
| 52 |
CSS
background-image
|
오작교 | 21561 | | 2009-07-07 | 2010-04-13 13:29 |
|
background-images 와 background-repeat 에 대한 예제를 보도록 하겠습니다. <style type="text/css"> <!-- body { background-image : url(https://tagmania.net/img/jang.jpg) ; background-repeat : repeat-y ; } .love { font-size : 13px; color : green...
|
| 51 |
CSS
컬러와 관련된 속성들 -1
|
오작교 | 20448 | | 2009-07-07 | 2009-07-07 17:04 |
|
컬러와 관련된 스타일 시트 속성으로는 color , background-color , background-image , background-repeat , background-attachment , background-position , background 등이 있습니다. 모두 다 색상, 배경색과 배경이미지에 대한 것들인데요. ☞ color , bac...
|
| 50 |
CSS
Text Border 속성
|
오작교 | 20304 | | 2009-07-07 | 2009-07-07 17:01 |
|
border속성은 해당요소의 테두리의 스타일을 지정하는 기능을 합니다. margin보다는 좁은 영역을 가지는 데요. border-width 속성은 테두리의 굵기를 지정해주고, border-color 속성은 색상을 , border-style 속성은 스타일을 지정해주는 기능을 합니다. <styl...
|
| 49 |
CSS
스타일 시트 위치조정과 레이어 조정
|
오작교 | 20206 | | 2009-07-07 | 2009-07-07 17:18 |
|
이번 장에서는 스타일 시트 위치지정과 레이어에 대해서 알아보겠다. ☞ position , left , top 스타일 시트의 요소의 위치를 조절해주는 속성이다. h2 { position: absolute; left: 100px; top:40px; } 대충 이렇게 사용됩니다. position 속성의 경우 absolute...
|
| 48 |
CSS
background-image - 2
|
오작교 | 19245 | | 2009-07-07 | 2010-04-13 13:31 |
|
☞ background-position 배경 이미지의 위치를 조절해주는 속성입니다. 속성값은 키워드식 , 픽셀방식 , 퍼센트(%) 방식이 있습니다. 키워드 방식 body { background-position: top left; } 픽셀방식 body { background-position: 40px 50px } 퍼센트 방식 body...
|
| 47 |
CSS
글자 반전시키기
|
오작교 | 18871 | 18 | 2006-04-17 | 2006-04-17 16:15 |
|
이번에는 이미지가 아닌 글자 자체를 반전시켜 나타내는 법을 알려드리겠습니다. 아래를 보시면 글자가 뒤집어져서 보여지는걸 보실수 있으실 겁니다. N+gine N+gine 위처럼 두 문자가 반전된 효과를 보실수 있으실 겁니다. 사용은 별로 어렵지 않습니다. 위의...
|
| 46 |
CSS
margin의 속성
|
오작교 | 18864 | | 2009-07-07 | 2009-07-07 16:57 |
|
마진(margin).....이란..? 설명하자면 여백을 조절하는 속성이라고 할 까요? 이건 예제를 보면서 익히면 금방 이해하실 수 있을 겁니다. 예제를 보기 전에 참고적으로 , margin속성의 수치단위는 px , pt , in ,cm를 사용할 수 있고요... 마이너스(-)값도 사용...
|
| 45 |
CSS
칼라에 관한 스타일시트-3
|
오작교 | 18573 | 22 | 2006-05-06 | 2006-05-06 10:20 |
|
☞ background-position 배경 이미지의 위치를 조절해주는 속성입니다. 속성값은 키워드식 , 픽셀방식 , 퍼센트(%) 방식이 있습니다. 키워드 방식 body { background-position: top left; } 픽셀방식 body { background-position: 40px 50px } 퍼센트 방식 body...
|
| 44 |
CSS
div 태그의 위치속성에서 relative와 absolute 차이
1
|
오작교 | 18335 | | 2008-01-09 | 2008-01-09 13:33 |
|
포지션에 대한 속성에서 absolute와 relative를 보면 absolute(절대적 위치) 브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에 있다면 그 곳을 기준으로 합니다. 즉, 레이어 속성인 z-index를 쓸경우 top, left, right, bottom을 통...
|
| 43 |
CSS
마우스를 올리면 변하는 색상
|
오작교 | 18128 | 41 | 2006-04-17 | 2006-04-17 14:58 |
|
위의 테이블 위에 마우스커서를 각각 올려보세요. 마우스커서가 테이블에 올라가면 셀이나 줄, 혹은 테이블 전체의 색이 변해서 선택되어진 곳을 명확하게 해 줍니다. 의 테이블 안(td, tr, table 중 선택)에 아래 소스를 추가합니다. onmouseover="this.style...
|
| 42 |
CSS
텍스트를 정열하는 css
|
오작교 | 18002 | | 2009-07-07 | 2009-07-07 16:43 |
|
text-align 속성은 뭘 까요? 그냥 척 보면 알겠죠.... 정렬해주는 기능이죠. 뭘 정렬해주냐고요? 글자뿐만 아니라 이 속성에 포함된 요소의 정렬방식을 결정해주는 기능을 합니다. text-indent속성은 들여쓰기의 길이를 정해주는 기능을 합니다. 들여쓰기가 뭔...
|
| 41 |
CSS
스크롤바 디자인 하기
1
|
오작교 | 17468 | | 2021-01-09 | 2022-02-02 11:30 |
|
scroll bar 디자인::-webkit-scrollbar { width: 5.2px; } /* 스크롤 바 */ ::-webkit-scrollbar-track { background-color:#fff; } /* 스크롤 바 밑의 배경 */ ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; } /* 실질적 스크롤 바 */...
|
| 40 |
CSS
이미지 위에 마우스가 올라가면 색상 변화하기
|
오작교 | 17119 | | 2008-09-08 | 2008-09-08 13:54 |
|
.
|
| 39 |
CSS
브라우져의 스크롤 없애기
|
오작교 | 17064 | 28 | 2006-04-16 | 2006-04-16 21:22 |
|
브라우저창의 스크롤 트랙을 없애서 트랙사이즈인 20픽셀만큼을 더 사용하기입니다,, 다음을 헤드나 바디에 넣으세요,, <script language="JavaScript"> function get_IEscroll(choice) { if (document.all) { document.body.scroll = choice; } } //--> </scr...
|
| 38 |
CSS
하이퍼 링크 점선 없애기 2가지 팁
|
오작교 | 16886 | | 2008-02-23 | 2008-02-23 12:00 |
|
1. 특정한 한부분에만 적용시키기 아래의 소스는 <BODY>와 </BODY> 사이에 들어가는 예제 입니다. <A HREF="링크될 경로" onfocus='this.blur()'><img src="이미지경로" border="0"><A> ※ 예제 설명 : 빨간색 부분만 수정해 주시면 됩니다. -----------------...
|
| 37 |
CSS
움직임이 부드러운 슬라이딩 탑버튼
|
오작교 | 16880 | 22 | 2006-04-16 | 2006-04-16 21:10 |
|
문서가 아주 길 경우, 탑버튼을 넣어주어 한번에 위로 올려주는 버튼 만드는 방법 입니다. 우선 아래 소스를 복사하여 js파일을 만듭니다. function back_top() { x = document.body.scrollLeft; y = document.body.scrollTop; step = 2; while ((x != 0) || (...
|
| 36 |
CSS
스타일 시트 활용(2) - 레이아웃을 원하는 대로
|
오작교 | 16656 | 11 | 2006-04-17 | 2006-04-17 16:10 |
|
먼저 스타일을 안쓰고 문서의 여백을 0으로 만들고자 할때는 <html> <head> <title>여백 0 만들기</title> <body bgcolor="White" text="black" leftMargin=0 topMargin=0 marginheight="0" marginwidth="0"> <img src="test.jpg" > </body> </html> 이렇게 하...
|
| 35 |
CSS
특정링크 색상 다르게 지정하기
|
오작교 | 16345 | 12 | 2006-06-03 | 2006-06-03 21:13 |
|
아 이거 안된다고 한참 고민했습니다 -_- A:link {color:#3E4773;text-decoration:none;} A:visited {color:#3E4773;text-decoration:none;} A:active {color:#3E4773;text-decoration:none;} A:hover {color:#636FAC;text-decoration:none;font-weight:bold} ...
|
