| 공지 |
HTML
HTML 기초 다지기
 4
|
오작교 | 207505 | | 2008-06-17 | 2010-08-19 13:08 |
| 공지 |
HTML
HTML과 CSS의 종합 정리
1
|
오작교 | 223303 | | 2007-10-01 | 2010-08-19 12:45 |
| 공지 |
일반
스타일시트의 총정리
|
오작교 | 222320 | 14 | 2006-09-14 | 2010-08-19 12:45 |
| 74 |
CSS
움직임이 부드러운 슬라이딩 탑버튼
|
오작교 | 14640 | 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) || (...
|
| 73 |
CSS
레이어를 원하는 곳에 고정하기
|
오작교 | 11749 | 22 | 2006-04-16 | 2006-04-16 21:14 |
|
다음을 헤드나 바디에 넣으세요. <script language="JavaScript"> <!-- self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; action = window.setInterval("heartBeat()",1); function heartBeat() { // combowid...
|
| 72 |
CSS
브라우져의 스크롤 없애기
|
오작교 | 14511 | 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...
|
| 71 |
CSS
"페이지 로딩 중" 넣기
|
오작교 | 12706 | 33 | 2006-04-16 | 2006-04-16 21:23 |
|
로딩이 길어지는 문서에 페이지가 다 뜨기전에 '로딩중' 이라는 글씨를 나오게 합니다. 헤드부분에 <script language=javascript> n = document.layers ie = document.all function hide() { if (ie || n) { if (n) document.Load.visibility = "hidden" else ...
|
| 70 |
CSS
"즐겨찾기에 추가" 버튼 만들기
|
오작교 | 11719 | 32 | 2006-04-16 | 2006-04-16 21:23 |
|
헤드부분에 <script language="JavaScript1.2"> var url="즐겨찾기에 추가할 주소" var title="즐겨찾기에 표시할 타이틀" function addfavorites() { if (document.all) window.external.AddFavorite(url,title) } </script> 클릭할 버튼이나 이미지,텍스트에...
|
| 69 |
CSS
스크롤바 따라 움직이는 레이어
|
오작교 | 13208 | 36 | 2006-04-16 | 2006-04-16 21:24 |
|
헤드부분에.... <script language="JavaScript"> <!-- self.onError=null; currentX = currentY = 0; whichIt = null; lastScrollX = 0; lastScrollY = 0; NS = (document.layers) ? 1 : 0; IE = (document.all) ? 1: 0; <!-- STALKER CODE --> function heart...
|
| 68 |
CSS
현재 문서의 소스를 메모장에 보여줍니다
|
오작교 | 12587 | 25 | 2006-04-16 | 2006-04-16 21:38 |
|
현재 문서의 소스를 메모장을 띄워서 보여 줍니다. <p align="center"> <input type="button" name="formbutton1" value="소스를 보아요" onclick="gogo()"> </p> <script language="JavaScript"> <!-- function gogo(){ location.href="view-source:" + locat...
|
| 67 |
CSS
여러방법의 창닫기
|
오작교 | 11220 | 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...
|
| 66 |
CSS
글자정렬
|
오작교 | 12327 | 24 | 2006-04-17 | 2006-04-17 14:11 |
|
웹상에서 문서를 작성하다 보면 좌측 뿐만 아니라 우측에도 반듯하게 정렬이 되었으면 할 때가 있습니다. 그럴 때 사용할 수 있는 간단한 CSS입니다. <div style='text-align:justify'> 글내용 </div>
|
| 65 |
CSS
마우스를 올리면 변하는 색상
|
오작교 | 15880 | 41 | 2006-04-17 | 2006-04-17 14:58 |
|
위의 테이블 위에 마우스커서를 각각 올려보세요. 마우스커서가 테이블에 올라가면 셀이나 줄, 혹은 테이블 전체의 색이 변해서 선택되어진 곳을 명확하게 해 줍니다. 의 테이블 안(td, tr, table 중 선택)에 아래 소스를 추가합니다. onmouseover="this.style...
|
| 64 |
CSS
배경그림 고정하기
|
오작교 | 12322 | 21 | 2006-04-17 | 2006-04-17 15:04 |
|
스크롤바를 내려도 배경그림이 움직이지 않고 글씨만 올라갑니다. <body>안에 bgproperties="fixed" 만 추가하면 배경 이미지가 고정됩니다. <body bgproperties="fixed"> 간단하죠? 스타일시트로 배경그림 고정시키기 에서는 이것보다 다양한 방법으로 배경그...
|
| 63 |
CSS
이미지에 효과를 주어보자
|
오작교 | 11916 | 24 | 2006-04-17 | 2006-04-17 15:35 |
|
img src="https://loveking.co.kr/img/rose1.gif" style="Filter: Alpha (Opacity=20, Style=0)"> img src="https://loveking.co.kr/img/rose1.gif" style="Filter: Alpha (Opacity=80, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=...
|
| 62 |
CSS
텍스트에 MouseOver적용하기
|
오작교 | 12022 | 35 | 2006-04-17 | 2006-04-17 15:50 |
|
텍스트에 MouseOver 적용하기 span OnMouseOver="this.style.color='#529CFF'" OnMouseOut="this.style.color=''">오작교의 홈/span> #529CFF 는 마우스가 올라갔을 때 변하는 글자색 span OnMouseOver="this.style.fontSize='15pt'" OnMouseOut="this.style....
|
| 61 |
CSS
투명한 아이프레임 만들기
|
오작교 | 10787 | 28 | 2006-04-17 | 2006-04-17 15:53 |
|
iframe 으로 페이지를 삽입하게 되면 기본적으로 전체 페이지 속에 또 다른 페이지가 삽입됩니다. 물론 그 페이지에 배경이 있었다면.. iframe 때문에 가려지게 됩니다. 그런데..꼭 그렇지만두 않다는 사실..~!! 즉.. 투명한 아이프레임을 만들수도 있다는... ...
|
| 60 |
CSS
CSS란 무엇인가?
|
오작교 | 11755 | 13 | 2006-04-17 | 2006-04-17 15:59 |
|
CSS 는 Cascading Style Sheets 의 약자로 일반적으로 CSS 내지는 스타일 시트 라고 불리어 집니다. 이것이 하는 주된 기능(?)은 문서의 글자모양, 크기, 링크형식 결정, 행간 길이 조절, 여러종류의 문자종류 설정, 마진값 조절, 문자에 간단한 효과주기 등입...
|
| 59 |
CSS
스타일시트 -1
|
오작교 | 11224 | 17 | 2006-04-17 | 2006-04-17 16:03 |
|
스타일 시트란 ? 홈페이지 만드실때 이런 생각들 해보셨을 겁니다. 한글 문서 작성하듯이 서식과 양식 스타일등을 자유자재로 쓸수 있음 얼마나 좋을까... 자, 이러한 불편을 덜어주기 위해서 나온것이 css(cascading style sheet) 이랍니다. html 4.0의 가장 ...
|
| 58 |
CSS
스타일 시트 (2) - 예제를 통해 감을 잡자
|
오작교 | 11361 | 15 | 2006-04-17 | 2006-04-17 16:04 |
|
앞에서도 살펴보았듯이 스타일 시트는 양식과 구조를 분리하는 특징을 가지고 있습니다. 여기에서는 한 문서내에 스타일 시트를 적용하는 예를 보여 드렸지만 스타일시트를 사용하면 사이트에 모든 페이지를 하나의 CSS 문서로 컨트롤 할 수도 있습니다. 지금...
|
| 57 |
CSS
스타일 시트 활용(1) - 문서의 가독성을 높여 보자
|
오작교 | 11127 | 25 | 2006-04-17 | 2006-04-17 16:08 |
|
여기에서는 행간과 글자크기 그리고 폰트 조절로 홈페이지의 가독성을 높이는 방법을 알아볼까 합니다. 글의 행간을 조절하면 홈페이지에 가독성이 좋아집니다. 글이 따닥따닥 붙어 있는것 보다두 말이지요 자 이부분의 글자 간격을 보세요 너무 글이 딱딱 붙...
|
| 56 |
CSS
스타일 시트 활용(2) - 레이아웃을 원하는 대로
|
오작교 | 14641 | 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> 이렇게 하...
|
| 55 |
CSS
스타일 시트 활용(3) - 문서내에 작은 스크롤상자 만들기
|
오작교 | 12176 | 14 | 2006-04-17 | 2006-04-17 16:10 |
|
css의 overflow 속성을 이용하면 깔쌈한 스크롤 박스를 만들수 있습니다. 이 효과를 쓰시면 html 문서내에 iframe을 적용한 효과 비슷하게 나오지만 더욱더 활용도가 높습니다. iframe처럼 문서 하나 더 들어가지도 않고 스타일시트로 효과도 줄 수 있으니까요...
|
