Script / CSS + 한줄짜리 웹소스

카페 > 웹 프로그래머 모임 | 시로 http://cafe.naver.com/error79/165 01) 이벤트 팝업창 - 띄우기 / 페이지이동하기 / 자동닫기 02) 이벤트 팝업창 - 하루동안 팝업창 띄우지 않기 03) 팝업창을 화면 가운데에 띄우기 / 같은 브라우져에서 띄우지 않기 04) 브라우저를 원하는 크기로 열기 - 지정사이즈 / 해상도에 따른 전체창 05) 이미지 클릭시 html문서없이 큰이미지로 새창띄우기 06) 몇초후 웹페이지이동하기 / 자동새로고침하기 07) 해상도에 따라 다른 웹페이지 열기 08) 크롬리스윈도우(CHROMELESS WINDOWS)로 새창띄우기 09) 상위메뉴 클릭시 하위 메뉴 나오는 스크립트_(해당하는 하위메뉴만 보임) 10) 상위메뉴 클릭시 하위 메뉴 나오는 스크립트_(하위메뉴가 전부 보임) 11) 사용자의 윈도우 화면배색에 따라 변하는 버튼 메뉴 12) 마우스 오버시 스크롤이 적용되는 메뉴바 13) 상태표시줄에 URL 감추기 14) 상태표시줄에 다양하게 글자표현하기 15) 상태표시줄에 시계표시하기/ 머물고 있는 시간 표시하기 16) 체크박스 선택횟수를 제한하기 / 한번에 모두 선택하기(체크박스, 버튼) 17) 체크박스클릭시 하위 체크박스 나타내기 18) 콤보박스에서 선택해서 사이트 이동하기(버튼없이 바로이동 / 버튼클릭시 이동) 19) 홈페이지방문시 로그인부분에 커서가 미리 깜박이게하기 20) 사용자 E-mail주소를 스크립트로 검증, 메일계정 옵션 추가하기 21) 그림에만 마우스 오른쪽버튼 막기 22) 마우스 오른쪽버튼, 텍스트 드래그 막기 23) 오른쪽마우스를 누르면 새로운 메뉴가 나타내기 24) 원하는 프레임만 프린트하기 / 인쇄미리보기 및 페이지설정버튼 만들기 25) 웹페이지에 삽입한 동영상 스크립트로 옵션 제어하기 26) 스크롤바 따라다니는 이미지(top버튼) 27) 웹 페이지의 특정부분만 파일로 저장하기 28) 마우스 포인트를 따라다니는 이미지 29) 특정 텍스트나 이미지 깜박이게하기 30) 이미지에 블렌드(서서히 교체) 효과주기 31) 시간에 따라 메세지 바꿔주기 32) 새로고침(재접속)할때마다 다른 이미지 보여주기 33) 일괄적으로 링크된 이미지,글씨 점선 없애기

 

 

-------------------------------------------------------------------------

 

 

CSS [Cascading Style Sheets]

01) 스타일 시트란? 02) HTML문서에 스타일시트 적용하기 - 요소에 직접지정/HEAD에 지정/ 외부파일 링크 03) 스타일시트 입력형식 및 기본활용(text에 적용) 04) 링크(link) 스타일시트의 이해 05) 스타일시트 예제 - 테이블(table) 06) 스타일시트 예제 - INPUT을 다양하게 꾸며보기 07) 스타일시트 예제 - 이미지에 다양한 필터적용하기 08) 스타일시트 예제 - 스크롤바를 사이트분위기에 맞게 수정하기 09) 스타일시트 예제 - 웹페이지의 배경이미지 고정시키기

WebTip

01) 한줄짜리 웹소스 02) 아이프레임(iframe)을 활용하기 03) 메일링크 적용시 MAILTO의 적절한 옵션 활용하기 04) 좋아하는 음악을 홈페이지의 배경음악으로 사용하기 05) 웹페이지에 동영상을 삽입하고 옵션 알아보기 06) FAVICON 만들어서 적용해보기 07) META를 이용한 화면전화효과 및 다양한 활용 08) 테이블 대신 필드셋(fieldset)을 이용하기

 

 

 

출처: http://www.motifdn.pe.kr

 

-------------------------------------------------------------------------------

 

 

 

 

 

01) 한줄짜리 웹소스

▶ 해상도에 따라 스크롤바가 생기지 않는 최대영역
   1024×768 : (1004 × 617) / 800×600 : (780×449)
   윈도우의 테두리 + 세로스크롤바의 크기는 총 28px
   세로의 영역은 개인의 윈도우에 따라 가변이 크나 일반적으로(주소창,도구창)있는 경우에만 해당함

▶ 링크걸어서 팝업창 띄우기
   <a href="#" ONCLICK="window.open
    ('팝업주소','팝업이름','width=80,height=60,toolbar=yes,resizable=no,scrollbars=no,left=0,top=0')">

▶ 그림에서 링크 표식 없애주기
   <a href="#" onfocus='this.blur()'><img src="motifdn.gif"></a>
   css로 일괄처리하기 -> <style> a { onfocus : "this.blur();" } </style>

▶ HTML에서 점찍기
   &middot /&#149을 이용
   · 잘 · 찍 · 히 · 나
   • 해봅시다

▶ 클릭하면 자동으로 창 닫기
   <a href="javascript:window.close()">이미지나.. 글자</a>

▶ 텍스트에 풍선말 달기
   <font color="#CC00FF" TITLE="풍선말" STYLE=" cursor:hand;">[여기에 마우스를]</font>

▶ 풍선말에 엔터적용시키기
   <img src="/images/test.gif" alt="설명1&#13;설명2&#13;설명3">

▶ 이미지 반투명처리하기
   <img src="그림주소" style="filter:alpha(opacity=100,style=2,finishopacity=0)">

▶ 소스그대로 보이게 하기
   <xmp><h1>태그입니다.</h1><font color=red>태그가 잘 보이시죠?</font></xmp>

▶ 즐겨찾기 추가
   <a href="javascript:window.external.AddFavorite('http://www.nate.com','네이트');">
  즐겨찾기에 추가</a>

▶ 링크로 윈도우 이동하기
   <a href="#" onClick="parent.close()">창닫기</a>
   <a href="#" onClick="history.back()">이전페이지로</a>
   <a href="#" onClick="history.forward()">앞 페이지로</a>
   <a href="#" onClick='top.location="javascript:location.reload()"'>새로고침</a>

▶ input 고정시키기
<INPUT TYPE="text" SIZE=40 VALUE="모디의 집입니다." readonly>
<INPUT TYPE="button" VALUE="START" disabled>
<INPUT TYPE=text name="test" value="test" disabled>

▶ input와 textarea에 글자 보이게 하고 커서위치시 사라지게하기
<INPUT TYPE="text" SIZE=40 VALUE="모디의 집입니다." onfocus="this.value''">
<TEXTAREA name="test" onfocus="this.value''">모디의 집입니다.</textarea>

▶ 글자흐르는 태그
   <marquee direction=right>오른쪽으로 </marquee>
   <marquee direction=left>왼쪽으로 </marquee>
   <marquee direction=up>위쪽으로 </marquee>
   <marquee direction=down>아래쪽으로 </marquee>
   <marquee direction=up height=50 scrollAmount=1.5 size="300">내용</maquee>

▶ 마우스 커서 모양 바꾸기
   <font style="cursor:hand">hand</font>
   <font style="cursor:auto">auto</font>
   <font style="cursor:default">default</font>
   <font style="cursor:move">move</font>
   <font style="cursor:e-resize">e-resize</font>
   <font style="cursor:ne-resize">ne-resize</font>
   <font style="cursor:nw-resize">nw-resize</font>
   <font style="cursor:n-resize">n-resize</font>
   <font style="cursor:se-resize">se-resize</font>
   <font style="cursor:sw-resize">sw-resize</font>
   <font style="cursor:w-resize">w-resize</font>
   <font style="cursor:wait">wait</font>
   <font style="cursor:help">help</font>
   <font style="cursor:crosshair">crosshair</font>

▶ 팝업 창을 항상 앞에 나오게 하는 방법
   <BODY onBlur="window.focus()">
   - 무조건 항상 앞에 나오으로 사용시 유의해야함
   <BODY onBlur="setTimeout('window.focus()',5000)">
   - setTimeout()은 적당한 시간 간격마다 특정 함수를 호출할 수 있는 기능으로 5초에 한번씩 호출한다.

 

 

 

출처: http://www.motifdn.pe.kr/aboutweb/aboutweb_webtip_01.php