Html,Jsp,Css_10 Html/Jsp/Javascript 2011. 10. 21. 17:12
* 스크롤 배너 만들기

<html>
 <head>
  <title> 스크롤 배너 만들기 </title>
  <style>
	#banner {position:absolute;width:100px;height:100px;
			 top:100px;left:100px;
			 border:1px solid #000000;} 
                        /*본문내용과 관계 없이 위치설정:absolute*/
  </style>
  <script>// 화면크기등이 바뀌어도 같은 값을 유지해야 하므로 함수 생성
  function bannerScroll(){
	// document 크기(윈도우크기)
	winSizeWidth = document.body.clientWidth; // 너비
	winSizeHeight = document.body.clientHeight; // 높이
	// 스크롤바의 위치구하기
	scrollTop = document.body.scrollTop; // X좌표
	scrollLeft = document.body.scrollLeft; // Y좌표

	// 배너의 div 좌표변경
	banner.style.top = winSizeHeight - 220 + scrollTop;
	banner.style.left = winSizeWidth - 140 + scrollLeft;
	setTimeout("bannerScroll()",1);
  }
  </script>
 </head>

 <body onLoad="bannerScroll()"><!--본문 대충-->
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <!--배너 만들기-->
  <div id="banner"><!--div태그내 이미지는 백그라운드가 없을시 투명하게 보임-->
  <a href="#">
  <img src="../html/img/1.jpg" border="0" width="100"></a><br>
  <a href="#">
  <img src="../html/img/1.jpg" border="0" width="100"></a><br>
  </div>
 </body>
</html>

# 결과

 



* div를 이용한 본문내 삽입되는 팝업창 만들기

<html>
 <head>
  <title> Div를 이용한 팝업 </title>  
  <script>
 /* function Close(){
	document.all['pop'].style.visibility="hidden";}
    △ 닫기버튼 클릭시 div가 닫히도록 할때 ② : img에 함수선언 */
moveX=0; moveY=0; // moveXX=0; moveYY=0; 변수선언 없이 바로 입력했으므로 얘도 없앰
divX=100; divY=100;
  function mouseDrag(){
	// 현재 마우스 좌표 (클릭했을 때)
	moveX = event.clientX; // 이동전
	moveY = event.clientY; // 이동전
	// 현재 div의 좌표
	divX = pop.style.pixelLeft; // left 라 치면 오류 pixelLeft로 수정
	divY = pop.style.pixelTop; // top 이라 치면 오류 pixelTop으로 수정
	// 이동이 일어나야만 움직이도록 설정▽
	// document에서 event처리
	document.onmousemove = mouseDragDrop; // document에서 마우스 이동이 일어나면..
	// document로 하면 빨리 움직여도 잘 따라오지만 오른쪽 마우스 클릭 후 왼쪽마우스로
	// 아무영역이나 선택하면 창이 이동해버리는 버그(?)가 있어
	// document를 pop으로 바꾸면 버그는 없으나 클릭 후 조금만 빠르게 움직여도
	// 영역을 벗어나는지 컨트롤이 되지 않는다.
	// 또하나, 본문에 아무 영역이나 마구잡이로 클릭하다 보면 팝업창이 따라온다;;
	// 또.. 팝업안에 이미지를 클릭후 놓지 않고 다른영역으로 포인터 이동시
	// 무작위로 이동한다.
	// mouseDragDrop 호출 : document에서의 함수 호출에는 ()가 없어도 된다
	}

	function mouseDragDrop(){
	if (event.button == 1) // 왼쪽버튼 확인(1:왼쪽,2:오른쪽)
	{
	// 마우스 이동 후 좌표 이걸 변수에 안넣고 바로 적용해보면 오류 해결?
	// moveXX = event.clientX;
	// moveYY = event.clientY;
	// 움직인 거리를 구하여 Div에 Setting
	pop.style.pixelLeft = event.clientX - moveX + divX; 
	// left 라 치면 오류 pixelLeft로 수정
	pop.style.pixelTop = event.clientY - moveY + divY; 
	// top 이라 치면 오류 pixelTop으로 수정
	
	// left=움직이고 난 후의 클릭좌표 moveXX-처음 클릭 좌표 moveX + 현재 div의 좌표 divX
	}}
	
	
  </script>
 </head>

 <body>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <img src="../html/img/dog.jpg"><br>
  <!--최초에 뜨는 팝업의 좌표 및 속성-->
<div id="pop" style="position:absolute; width:300; height:300; top:100; left:100;
	 border:1px solid #33660">
<table width="300" border=0 cellpadding="0" cellspacing="0">
	<tr>
	<td width="300" bgcolor="white" onMouseDown="mouseDrag()"></td>
	<!--△ 마우스 누른상태(onMouseDown)로 이동
		클릭좌표, 이동좌표 체크
		자바스크립트에 이벤트라는 내장 좌표가 있다
		event.clientX=X ..이런식 -->
	<td align="right" bgcolor="white"><img src="x.gif" 
                 onClick="pop.style.visibility='hidden'"></td>
	<!--△ 닫기버튼 클릭시 div가 닫히도록 할때 ①-->
	</tr>
	<tr>
	<td colspan="2"><a href="http://www.hrd.go.kr/jsp/HRDV/index.jsp">
	<img src="1.gif" border="0"></a></td>
	</tr>
	</table>
</div>
  
 </body>
</html>


# 결과

 



* 이미지 클릭하여 큰 이미지 나오는 갤러리 만들기

<html>
 <head>
  <title> 갤러리 </title>  
  <script>
 /* function Close(){
	document.all['pop'].style.visibility="hidden";}
    △ 닫기버튼 클릭시 div가 닫히도록 할때 ② : img에 함수선언 */
moveX=0; moveY=0; // moveXX=0; moveYY=0; 변수선언 없이 바로 입력했으므로 얘도 없앰
divX=100; divY=100;
  function mouseDrag(){
// 현재 마우스 좌표 (클릭했을 때)
moveX = event.clientX; // 이동전
moveY = event.clientY; // 이동전
// 현재 div의 좌표
divX = pop.style.pixelLeft; // left 라 치면 오류 pixelLeft로 수정
divY = pop.style.pixelTop; // top 이라 치면 오류 pixelTop으로 수정
// 이동이 일어나야만 움직이도록 설정▽
// document에서 event처리
document.onmousemove = mouseDragDrop; // document에서 마우스 이동이 일어나면..
// document로 하면 빨리 움직여도 잘 따라오지만 오른쪽 마우스 클릭 후 왼쪽마우스로
// 아무영역이나 선택하면 창이 이동해버리는 버그(?)가 있어
// document를 pop으로 바꾸면 버그는 없으나 클릭 후 조금만 빠르게 움직여도
// 영역을 벗어나는지 컨트롤이 되지 않는다.
// 또하나, 본문에 아무 영역이나 마구잡이로 클릭하다 보면 팝업창이 따라온다;;
// 또.. 팝업안에 이미지를 클릭후 놓지 않고 다른영역으로 포인터 이동시
// 무작위로 이동한다.
// mouseDragDrop 호출 : document에서의 함수 호출에는 ()가 없어도 된다
}
function mouseDragDrop(){
if (event.button == 1) // 왼쪽버튼 확인(1:왼쪽,2:오른쪽)
{
// 마우스 이동 후 좌표 이걸 변수에 안넣고 바로 적용해보면 오류 해결?
// moveXX = event.clientX;
// moveYY = event.clientY;
// 움직인 거리를 구하여 Div에 Setting
pop.style.pixelLeft = event.clientX - moveX + divX; 
// left 라 치면 오류 pixelLeft로 수정
pop.style.pixelTop = event.clientY - moveY + divY; 
// top 이라 치면 오류 pixelTop으로 수정
	
// left=움직이고 난 후의 클릭좌표 moveXX-처음 클릭 좌표 moveX + 현재 div의 좌표 divX
}}
	
function pIC(n){
	// div의 이미지 파일명 변경 eval 잊지 말자...
	// 일전에 eval 안넣고 왜 안되지 왜 안되지 했네 -_-
	// 경로에 document.ID를 하면 오류가 난다.
	// ID.src = ........
	eval("changeImg.src='img_0"+n+"_big.jpg'");
	pop.style.pixelLeft = event.clientX; 
	// 현재 발생한 이벤트에 X좌표를 입력해서 대입하라
	pop.style.pixelTop = event.clientY
	// 현재 발생한 이벤트에 Y좌표를 입력해서 대입하라
	pop.style.visibility = "visible";
	// pop을 보여라
	}
	
  </script>
 </head>

 <body>
 <!--이미지리스트-->
  <img src="img_01_small.jpg" onClick="pIC('1')">
  <img src="img_02_small.jpg" onClick="pIC('2')">
  <img src="img_03_small.jpg" onClick="pIC('3')">
  <img src="img_04_small.jpg" onClick="pIC('4')"><br>
  <img src="img_05_small.jpg" onClick="pIC('5')">
  <img src="img_06_small.jpg" onClick="pIC('6')">
  <img src="img_07_small.jpg" onClick="pIC('7')">
  <img src="img_08_small.jpg" onClick="pIC('8')">
  <!--최초에 뜨는 팝업의 좌표 및 속성-->
<div id="pop" style="position:absolute; width:300; height:200; top:60; left:60;
	 border:1px solid #33660; visibility:hidden"> <!-- 초기값: 이미지 숨김 -->
	<table width="300" border=0 cellpadding="0" cellspacing="0">
		<tr>
		<td width="300" bgcolor="white" onMouseDown="mouseDrag()"></td>
		<!--△ 마우스 누른상태(onMouseDown)로 이동
			클릭좌표, 이동좌표 체크
			자바스크립트에 이벤트라는 내장 좌표가 있다
			event.clientX=X ..이런식 -->
		<td align="right" bgcolor="white"><img src="../x.gif" 
                        onClick="pop.style.visibility='hidden'"></td>
		<!--△ 닫기버튼 클릭시 div가 닫히도록 할때 ①-->
		</tr>
		<tr height="200">
			<td colspan="2">
			<img src="img_01_big.jpg" border="0" id="changeImg"></td>
			<!-- 함수에서 제어를 위해 changeImg라는 id 부여 -->
		</tr>
	</table>
</div>  
 </body>
</html>

# 결과

작은 사진을 클릭하면 마우스포인터의 현재 위치에 큰 사진이 div팝업창으로 뜨고 그 창의 윗부분을 잡고 움직일 수 있도록 구현
하고 X버튼을 눌러 창을 끌 수 있다. 웹 호스팅 계정이 없어 구현에 이미지 링크를 통한 소스 재작성으로도 어려움이 있어
스크린샷으로 대체함


 

'Html/Jsp/Javascript' 카테고리의 다른 글

[Javascript] 배열 최대값 / 최소값  (0) 2013.01.23
jQuery.ajax(options)  (0) 2013.01.22
Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
Html,Jsp,Css_09 Html/Jsp/Javascript 2011. 10. 20. 19:12
* Windows객체 (파일없이 새창띄우기) 

<html>
 <head>
  <title> Windows객체(파일없이 새창띄우기) </title>
 <script>  // 새창, 내용
  win = window.open("","w","width=300 height=300");
  // △파일명을 안썼다고해서 에러가 나지 않는다.
 
  win.document.open(); // ◁ win 안에 쓰겠다 : 내용이 대상 시작태그 역할?
     win.document.write("홍길동<br>");
     // △ win 이라는 객체에 홍길동을 출력
     win.document.write("<img src=../html/img/1.jpg>")
  win.document.close(); // ◁ 다 썼다 : 끝 태그 역할?
 
  function winClear(){
    win.document.open();
        // ▽ 팝업창의 내용 지우기 : 기존 파일이 있는 팝업이어도 그 내용까지 삭제
        win.document.clear();
    win.document.close();
  }

  function winClose(){ // 창 자체를 컨트롤 하므로 open/close 필요 없음
        // ▽ 팝업창 닫기
        win.window.close();
  }

  // window.status = "우와 신기하다" // 텍스트만 가능
 
  // 상태표시줄 텍스트가 오른쪽에서 왼쪽으로 움직이듯 보이게 출력하기
  // 텍스트 앞에 공백을 두고 공백을 한칸씩 줄여가며 글자가 오른쪽에서
  // 왼쪽으로 들어오는 것처럼 보이도록 하고 전일 했었던
  // setTimeOut("함수명",밀리초)를 이용하여 속도 조절.

  statusMsg = "☆우★와☆신★기☆하★다☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★하☆하★"
  space = "";
  for (i=1; i<82; i++)
  {
    space += " ";
  }
  statusMsg = space + statusMsg;
 
  // 반복처리를 위한 함수생성
  ndx = 0;
  function winStatus(){
 
      window.status = statusMsg.substring(ndx);
      if(ndx>statusMsg.length)ndx=0; // index가 글자의 크기보다 크면 초기화 시킨다.
      // 계속 반복되면 글자수보다 큰 값의 위치를 지정하게 되어 에러→그래서 if문삽입
      ndx++;
      setTimeout("winStatus()",100) // 밀리초만큼 대기 후 함수 재 호출=반복 
  }  
    </script>
 </head>

 <body onLoad="winStatus()">
 <img src="../html/img/2.jpg" onClick="winClear()">
 <input type="button" value="팝업창닫기" onClick="winClose()">
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)


이미지 클릭시 팝업창 내용 삭제
팝업창닫기 버튼 누를시 창 사라짐



* 스크롤바 자동이동하기

<html>
 <head>
  <title> ScrollMove.html </title>
<script>
function timer(){
date = new Date(); // 변수=생성 클래스(). 시스템의 날짜를 구하는 객체
 y = date.getYear(); // date라는 객체 안에서 Year(년도)를 얻어내(get)라.
// get은method - 정보를 얻어내는 기능

 // date.setYear(2012) : 객체의 년도만 2012년으로 셋팅해라.
 m = date.getMonth()+1; // 월구하기: 0-1월 ~ 11-12월)
 d = date.getDate(); // 일구하기
 h = date.getHours(); // 시간 구하기: 자바에는 s가 없다
 mm = date.getMinutes(); // 분 구하기: 자바에는 s가 없다
 ss = date.getSeconds(); // 초 구하기: 자바에는 s가 없다

window.status = y+"년 "+m+"월 "+d+"일 "+h+"시 "+mm+"분 "+ss+"초"
}

window.setInterval("timer()",1000); // 1초에 한번씩 timer()함수를 실행하여 초가 바뀌도록
   
     // 스크롤바 자동이동하기
     i=0
     function ScrollDelay()
     {
        i++;
        if(i>700){
            clearTimeout("ScrollDelay()");
            i=0; // 다시 위로 갔을 때 작동되도록 i값 초기화
        }
        else{
        window.scrollBy(0,2); // (x,y)
        setTimeout("ScrollDelay()",15);
        }
     }  
</script>
 </head>

 <body onLoad="timer()"><center>
 <input type="button" value="이동" onClick="ScrollDelay()">
 <!-- 이동을 누르면 스크롤바가 움직이도록 하는 함수 이벤트 만들기 △-->
  
 <br><br><br><br><br><br>
<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00' align='center'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219090085/20111019071001477945621006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br>

<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219077554/20111017181001469645991006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<object id='skplayer' name='skplayer' width='640' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219069655/20111016181001518942131006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='640' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<object id='skplayer' name='skplayer' width='480' height='384' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9.0.115.00'><param name='movie' value='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' /><param name='allowFullscreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='wmode' value='transparent' /><embed src='http://v.nate.com/v.sk/movie/0|219072376/20111016221001448724141006' wmode='transparent' allowScriptAccess='always' allowFullscreen='true' name='skplayer' width='480' height='384' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object><br><br><br><br><br><br>

<a href="#">위로</a>
 </center> 
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

스크롤바 이동효과를 보기 위해 <body> 소스에 잡다한 것을 많이 넣었다.
이동 버튼을 누르면 아래로 이동하고 이동 후 위로 올라가 다시 한번 이동버튼을
눌렀을 때 재작동이 용이하도록 if문에 i값을 초기화 시키는 소스를 넣었다.



* Document 객체

<html>
 <head>
  <title> Document 객체 </title>
 </head>

 <body bgcolor="#ff9900">
 <script>
    // document.write(document.속성명) : 속성값 출력
    // document.속성명='색상명' : 속성 적용

    // <body>의 글자색을 알아내겠다!! forground 전경색, 글자색
    document.write("글자색="+document.fgColor);
    // <body>의 배경색을 알아내겠다!! background 배경색
    document.write("<br>배경색="+document.bgColor);
    // <script>에서의 배경색 설정(#99ffff) : <body>설정값 무시?
    document.bgColor='#e0e0e0';
    // <script>에서의 글자색 설정(#9d9d9d) : <body>설정값 무시?
    document.fgColor='#9d9d9d';
    // link(방문이력없음)Color, alink(active:클릭후 놓지 않음)Color, vlink(visited:방문이력있음)Color
    document.linkColor='#cc0000';
    document.alinkColor='#ffcc00';
    document.vlinkColor='#0099ff';

    document.write("<br>link="+document.linkColor)
    document.write("<br>alink="+document.alinkColor)
    document.write("<br>vlink="+document.vlinkColor)
    // lastModified : 이문서가 마지막으로 업데이트된 날짜
    document.write("<br>마지막작성일="+document.lastModified);
    // title : 윈도우의 제목설정
    document.title='자바스크립트 공부중';
    // location : 현재 페이지 주소
    document.write("<br>현재페이지주소="+document.location);
    // select에 해당 색을 선택하면 배경색 바꾸기

    // 여담: 클라이언트 언어는 완벽하게 소스보기를 막을 수는 없다.
    // 방법이 있기 마련?
    // #FF0000 : FF(R)00(G)00(B)
 </script>
<hr>
 <select onChange="document.bgColor=this.options.value">
 <!--입력값이 변경시 마우스 이벤트 : onChange
 select 객체에서 옵션들 중에 선택된 값(this.options.value)
 -->
 <option value="">----배경----</option>
 <option value="ff0000">빨강</option>
 <option value="blue">파랑</option>
 <option value="black">검정</option>
 <option value="gray">회색</option>
 <option value="purple">보라</option>
 <option value="#ffcccc">#ffcccc</option>
 </select>

 <select onChange="document.fgColor=this.options.value">
 <!--입력값이 변경시 마우스 이벤트 : onChange
 select 객체에서 옵션들 중에 선택된 값(this.options.value)
 -->
 <option value="">----글자----</option>
 <option value="ff0000">빨강</option>
 <option value="blue">파랑</option>
 <option value="black">검정</option>
 <option value="gray">회색</option>
 <option value="purple">보라</option>
 <option value="#ffcccc">#ffcccc</option>
 </select>
 <hr>자바 Web 프로그래밍<br>
  <img src = "../html/img/sun.jpg"><br>
  <a href="#" target="_blank">링크테스트</a>
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

이미지는 별 의미 없이 썰렁해서 넣은 것으로 엑박이어도 관계 없어 링크가 없다.



* Image 객체

<html>
 <head>
  <title> Image 객체 </title>
 </head>

 <body>
  <!-- 이미지와 관련된 정보를 얻어내겠다!! -->
  <img id="img1" src="../html/img/dog.jpg" name="자신의 개 코스프레" align="center" border="10" hspace="20" vspace="10"> <!--id부여로 스타일시트에서 사용가능-->
<br><br><br><br>

 <script>
  // 이미지의 이름을 구하라 연예인
  document.write("<br>이름 = "+document.img1.name);
  // 파일명 : 이미지를 넣을 때 src= 하고 넣어서 src
  document.write("<br>파일명 = "+document.img1.src);
  // document.img1.src='../html/img/1.jpg'; // 이런식으로 프로그램 중간에 바꿀 수 있다..
  // 너비(width), 높이(height), 좌우여백(hspace),상하여백(vspace)
  document.write("<br>너비 = "+document.img1.width);
  document.write("<br>높이 = "+document.img1.height);
  document.write("<br>좌우여백 = "+document.img1.hspace);
  document.write("<br>상하여백 = "+document.img1.vspace);
  // 정렬(align)
  document.img1.align='right';
  document.write("<br>정렬 = "+document.img1.align);
  // 테두리 두께(border)
  document.write("<br>테두리두께 = "+document.img1.border)
  </script>
 
 </body>
</html>

# 결과 (휠 클릭 후 열기 : 마우스 왼쪽 클릭후 열기하면 페이지 이동됨)

 



* onMouseOver시 상세 이미지 뜨는 테이블 작성

<html>
 <head>
  <title> Exam.마우스오버하면 상세 이미지 뜨도록 하기 </title>
 <script>
    function carDetail(n){
        document.aa.img1.src="car/car_b_0"+n+".jpg"}
// 하나의 함수에 여러 값의 결과를 얻기 위해 함수명에 (n)값을 받아 그 n값에
// 해당되는 주소를 출력하도록 하였다.
 </script>
 </head>

 <body>
 <form name="aa"> <!--폼안에 테이블을 넣고 함수에서 폼의 주소값을
 지명하지 않으면 스크립트 오류로 로드되지 않는데 이유를 모르겠다...-->
  <table cellspacing='10' cellpadding='0' border='1'><tr><td><img id='car1_1' src='car/car_a_01.jpg' onMouseOver="carDetail('1')"></td>
<td rowspan='8'><img src='car/car_b_01.jpg' id='img1'></td>

</tr><tr><td><img src='car/car_a_02.jpg' onMouseOver="carDetail('2')"></td></tr>

<tr><td><img src='car/car_a_03.jpg' onMouseOver="carDetail('3')"></td></tr>
<tr><td><img src='car/car_a_04.jpg' onMouseOver="carDetail('4')"></td></tr>
<tr><td><img src='car/car_a_05.jpg' onMouseOver="carDetail('5')"></td></tr>
<tr><td><img src='car/car_a_06.jpg' onMouseOver="carDetail('6')"></td></tr>
<tr><td><img src='car/car_a_07.jpg' onMouseOver="carDetail('7')"></td></tr>
<tr><td><img src='car/car_a_08.jpg' onMouseOver="carDetail('8')"></td></tr>
</table></form>
 </body>
</html>

# 결과

많은 이미지의 링크가 어려워 스크린샷(gif ani)으로 대체



* 페이지 이동 / history 객체

- 메타 태그(meta tag)에서의 페이지 이동
<meta http-equiv="refresh" content="5;url=http://www.daum.net">
: 5초뒤 해당 url로 이동

- 자바스크립트에서의 페이지 이동
<script>
location.href="http://www.google.co.kr"
</script>

- histoty 객체
익스플로러에서 뒤로 앞으로를 눌렀을때 사용자가 왔다 갔다 했던 경로를 저장하고 있듯이 자바스크립트에도 그것을 저장하고 있는 history라는 녀석이 있다고 한다.
실질적으로 테스트 해보진 않았다;;

ex) 홈-회원가입-member.jsp-홈/로그인 : member.jsp 는 페이지 이동시 실행되고
실질적으로도 경로에 남게 되는 것이지만 사용자 측면에서 보면 보여지지 않는 없는 경로일
뿐이다. 이런 경로를 설정해주는데에 history객체가 사용되는 듯 하다.

종류 : 전체일지 대표적인 일부의 예인지 모르겠지만 적는다
history.back() : 전페이지로 이동
history.forward() : 앞페이지로 이동
history.go(n) : n(페이지수)이 양수일땐 앞페이지, 음수일땐 전페이지


* 롤오버시 변경되는 메뉴 이미지 만들기

<html>
 <head>
  <title> RollOverMenu.html </title>
 <script>
function menu(p,imgN){
    if (p==1){ // over 기능을 수행 : eval내에 싱글따옴표 위치에 주의한다.
        eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+"_over.gif'");
    }else{ // out 기능을 수행
        eval("document.aa.m"+imgN+".src='menuimg/menu0"+imgN+".gif'");
    }// eval : 문자열의 속성이 가지고 있는 값으로 자동으로 형 변환 (일전에 기술했었음)
}
 </script>
 </head>

 <body>
 <form name="aa">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td><img src="menuimg/menu_back01.gif"></td>
            <!--오버이미지의 p값을 1 / 아웃이미지의 p값을 2로 정하고
                각자의 imgN을 지정하여 하나의 함수에 여러 이미지가 접근이
                가능하도록 한다.-->
            <td onMouseOver="menu(1,1)" onMouseOut="menu(2,1)"><a href="#">
            <img src="menuimg/menu01.gif" border="0" name="m1"></a></td>
            <td onMouseOver="menu(1,2)" onMouseOut="menu(2,2)"><a href="#">
            <img src="menuimg/menu02.gif" border="0" name="m2"></a></td>
            <td onMouseOver="menu(1,3)" onMouseOut="menu(2,3)"><a href="#">
            <img src="menuimg/menu03.gif" border="0" name="m3"></a></td>
            <td onMouseOver="menu(1,4)" onMouseOut="menu(2,4)"><a href="#">
            <img src="menuimg/menu04.gif" border="0" name="m4"></a></td>
            <td onMouseOver="menu(1,5)" onMouseOut="menu(2,5)"><a href="#">
            <img src="menuimg/menu05.gif" border="0" name="m5"></a></td>
            <td onMouseOver="menu(1,6)" onMouseOut="menu(2,6)"><a href="#">
            <img src="menuimg/menu06.gif" border="0" name="m6"></a></td>
            <td onMouseOver="menu(1,7)" onMouseOut="menu(2,7)"><a href="#">
            <img src="menuimg/menu07.gif" border="0" name="m7"></a></td>
            <td onMouseOver="menu(1,8)" onMouseOut="menu(2,8)"><a href="#">
            <img src="menuimg/menu08.gif" border="0" name="m8"></a></td>

            <td><img src="menuimg/menu_back02.gif"></td>
        </tr>
    </table>
 </form>
 </body>
</html>

# 결과

이미지가 많아 링크에 어려움이 있어 스크린샷으로 대체함

'Html/Jsp/Javascript' 카테고리의 다른 글

jQuery.ajax(options)  (0) 2013.01.22
Html,Jsp,Css_10  (2) 2011.10.21
Html,Jsp,Css_09  (0) 2011.10.20
Html,Jsp,Css_08  (0) 2011.10.19
Html,Jsp,Css_07  (0) 2011.10.18
[Test] for문과 테이블을 이용한 구구단 출력하기 & while문으로도 해보기  (0) 2011.10.17
Html,Jsp,Css_04 Html/Jsp/Javascript 2011. 10. 13. 23:45

전일에 이어 스타일시트 글자속성 중 background img 부터..

style.css 수정 후 link로 style.css파일을 import하는 tag가 입력되어 있는 style2.html에서 확인

 

8. background : 배경 설정 스타일시트

 

 8-1. background-image : 스타일 시트를 적용하는 구간 : Document, 즉 Body

 

        → BODY {background-image: url(..\HTML\img\ Untitled-1_02.gif);}

        ▲ 이미지 가져오기

 

 8-2. background-repeat : 반복여부 결정

 

        → BODY {background-repeat: no-repeat;}

                  ▲ no-repeat: 반복없이 한번만 백그라운드 이미지 사용

 

        → BODY {background-repeat: repeat;}

             ▲ repeat: 전체 무한반복 (기본값)

 

        → BODY {background-repeat: repeat-x;}

             ▲ 상단 X축 한줄만 무한반복

 

        → BODY {background-repeat: repeat-y;}

             ▲ 좌측 Y축 한줄만 무한반복

 

 8-3. background-attachment : 배경고정

 

        → BODY {background-attachment: fixed;}

             ▲ 스크롤바를 내려도 배경은 고정

 

 8-4. background-position : 배경이미지의 위치지정

 

        → background-position:50% 100%;}

             ▲ 이미지의 중심점을 기준으로 X좌표와 Y좌표를 백분율(%)로 표시

          꼭 백분율(%)이 아니라 left, center, right, top, middel, bottom값으로도 표시가능

 

 8-5. 속성의 그룹화 (8-1~8-4) : background 라는 속성명이 같아 그룹화 가능

 

        → BODY {background: url(..\HTML\img\ Untitled-1_02.gif) no-repeat fixed 50% 100%;}

        ▲ 각 속성값의 순서는 바뀌어도 관계 없음

 

# CODE

 

- 그룹을 풀어 놓은 소스

 

BODY {

             background-image:url..\HTML\img\Untitled-1_02.gif);

             background-repeat:no-repeat;

             background-attachment:fixed;

             background-position:50% 100%;

             }

 

- 그룹화 소스

 

BODY {

           background: url..\HTML\img\Untitled-1_02.gif) no-repeat fixed 50% 100%;

          }

 

- body 적용 소스 (style2.html)

 

<link rel="stylesheet" type="text/css" href="style.css">

 

배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림

<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>배경그림<p>

<p>외부스타일 적용하기</p>

<div>외부스타일 적용하기2</div>

<a href="#">외부스타일 적용하기3</a>

 

 

# 결과 ▽

 

 

 

* 스타일시트를 외부에서 불러오기로 위와같이 (style.css에 속성값 저장 후 style2.html에서  <link rel="stylesheet" type="text/css" href="style.css"> 소스를 입력하여 import 하는 방식으로) 테스트 하는데 불편함이 있어 style3.html 을 작성 후 전일 기술했던 1. inLine방식(body안의 태그에 직접입력)  2. style태그를 이용한 방식(head안에 <style>TAG</style>)으로 바로 실행 결과를 볼 수 있도록 한다.

 

A. 스타일시트 (box) : <head>와 </head>사이에 <style>입력</style>

 

 1. box의 여백(margin)설정

 

1-1. 풀어진 소스

 

        → .margin1{margin-top:50px;}

             ▲ .클래스명{속성명:크기} : 본문 위쪽 기준 50px 여백 설정

 

        → .margin1{margin-right:50px;}

             ▲ .클래스명{속성명:크기} : 본문 오른쪽 기준 50px 여백 설정

 

        → .margin1{margin-bottom:50px;}

             ▲ .클래스명{속성명:크기} : 본문 아래쪽 기준 50px 여백 설정

 

        → .margin1{margin-left:50px; }

             ▲ .클래스명{속성명:크기} : 본문 왼쪽 기준 50px 여백 설정

 

1-2. 합쳐진 그룹소스

 

        → .margin2{margin:50px 20px 50px 20px;}

             ▲ .클래스명{속성명:top right bottom left;} : top기준 시계방향

 

# CODE

 

- 그룹을 풀어 놓은 소스

 

.margin1{

                margin-top:50px;

                margin-right:50px;

                margin-bottom:50px;

                margin-left:50px;

              }

 

- 그룹화 소스

 

.margin2{

                margin:50px 20px 50px 20px;

               }

 

- body 적용 소스 (style3.html)

 

<p class="margin1" style="background-color:#ffff66">margin1 p</p>

<div class="margin2" style="background-color:#ffcc00">margin2 div</div>

 

# 결과 ▽

 

 

 

 

 2. box의 border(선)설정

 

2-1. border-style : 선의 전체 모양

 

         → .border1{border-style: dotted;} : 점선 ▽

          

 

         → .border1{border-style: solid;} : 실선 ▽

          

 

         → .border1{border-style: dashed;} : 긴 점선 ▽

          

 

         → .border1{border-style: double;} : 이중 실선 ▽

          

 

         → .border1{border-style: groove;} : 오목하게 들어간 선 ▽

          

 

         → .border1{border-style: ridge;} : 볼록하게 나온 선 ▽

           

 

         → .border1{border-style: inset;} : 왼쪽에 빛이 비춰져 오목한 모양의 명암 ▽

         

 

         → .border1{border-style: outset;} : 왼쪽에서 빛이 비춰져 볼록한 모양의 명암 ▽

          

 

              ▲ .클래스명{속성명: 선종류;} : 상하좌우 그룹화

 

  ※ 시계방향 속성이 적용되며 1개 입력시 전체적용 / 2개 상하 좌우 / 3개 입력시 상 우좌 하 / 4개 입력시 상 우 좌 하 적용 : 스타일시트내 그룹화 소스에 적용되나 그룹의그룹(2-7) 에는 각 그룹의 한 속성까지만 가져올 수 있어 불가능하다

 

2-2. border-방향-style :  선의 일부 모양

 

         → .border1{

                              border-top-style: solid;

                              border-right-style: dashed;

                              border-bottom-style: double;

                              border-left-style: groove;

                              }

              ▲ 상 : 실선 / 우 : 긴 점선 / 하 : 이중 실선 / 좌 : 오목하게 들어간 선.

                  그룹을 풀어 놓은 형태

 

# 결과

 

 

 

 

2-3. border-width : 선의 전체 두께, 대개는 1px로 사용

 

         → .border1{border-width:10px;}

              ▲ .클래스명{속성명:선두께;} : 상하좌우 그룹화

 

2-4. border-방향-width : 선의 일부 두께

 

         → .border1{

                              border-top-width: 5px;  

                              border-right-width: 20px;

                              border-bottom-width: 5px;

                              border-left-width: 20px;

                              }

              ▲ 상 : 5px / 우 : 20px / 하 : 5px / 좌 : 20px.

                  그룹을 풀어 놓은 형태

 

# 결과  (style은 solid적용)

 

 

 

 

2-5. border-color : 선의 전체 색상

 

         → .border1{border-color: red;}

             ▲ .클래스명{속성명:선색상;} : 상하좌우 그룹화

 

2-6. boder-방향-color : 선의 일부 색상

 

         → .border1{

                              border-top-color: #ffcc00;

                              border-right-color: #ff9900;

                              border-bottom-color: #cc9900;

                              border-left-color: #ccff33;

                              }

             ▲ 상 : 5px / 우 : 20px / 하 : 5px / 좌 : 20px.

                  그룹을 풀어 놓은 형태

 

# 결과

 

 

 

 

2-7. 선(border)의 색상/두께/모양의 그룹화 : 그룹의 그룹이라 해야 될까.....?

 

       → .border1{border: green 10px solid;}

           ▲ .클래스명{속성명:색상 두께 모양} : 순서는 관계 없으나 속성은 한가지씩!

 

# 결과 ▽

 

 

 

B. 스타일시트 : <body>와 </body> 사이에 inLine방식입력

 

 1. div style

 

1-1. 객체의 위치설정 : static(기본값), relative(인접객체와의 상대위치설정), absolue(본문기준의 절대위치설정)

 

         → <div style="position:absolute; top:100; left:100; background:white; width:350; height:500">

             <img src="..\html\img\week\sun.jpg"></div>

             ▲ background는 설정하지 않아도 기본이 투명이라 없게하고 싶다면 
                 white라도 적용 해야 한다.
객체의 위치값에는 음수도 입력 가능

# 결과 ▽

 

 

 

 

  1-2. Exam : 공통속성=solid외곽선 박스의 사이즈 가로세로 200

                        다음과 같은 형태를 구현하라

 

 

         → <head>와</head>사이에 <style>여기에 입력</style>

         → DIV {position:absolute; width:200; height:200; border:solid 1px black;}

             .one {top:100; left:100; z-index:731564832145967;}

             .two {

                      top:250; left:160; text-align:center; vertical-align:50%;

                      background:#3399cc; font-size:30pt; letter-spacing:10px;

                      z-index:731554832145967; vertical-align:bottom}

              .three {top:180; left:50; z-index:730554832145967}

             ▲ 레이어의 순위설정 : z-index:양의 정수, 값이 클 수록 위쪽

                레이어의 표시여부 결정 : visibility=visible(보임), hidden(숨김)

 

         → <body>와</body>사이에 div 태그 입력

             <div class="one">

              <table border="1" width="100%" height="100%">

              <tr>

                           <th align="center">좋아하는<br>과일이름</th>

                           <th align="center">싫어하는<br>과일이름</th>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              </table>

              </div>

 

              <div class="two">

              <br><br><br><br><br><br><b>엄기백</b>

              </div>

 

              <div class="three">

              <img src="..\html\img\week\sun.jpg" width="200" height="200">

              </div>

 

# 결과 ▽

 

 

 

  1-3. Exam : 1-2. Exam 의 style소스를 수정하고 input 태그를 넣어 버튼을 활성화 후

         이미지를 보이거나 숨기는 버튼을 만들어본다.

 

         - 함수에 클래스명을 쓸 수 없어 아이디로 style태그의 id명과 body태그도
            class대신
id로 수정하고 body태그내에 input태그로 버튼을 만들되
            onClick이벤트에
onClick="함수명('상수','상수')" 를 넣고 script함수
            선언시 변수를 두개 선언한다.

 

         - 이유인즉, body의 onClick시 실행되는 함수의 상수가 스크립트내에 함수명()
            괄호안에 변수값에 저장되며
if else 구문으로 두번째 값인 1,2 가 즉 n이
            1과 같을때 visible(보이기)을 실행하도록 하고
그것이 아닐때 hidden(숨기기)
            을 실행하도록 짜 놓은 스크립트....-_-a 인것 같다.

           
설명을 들어도 잘 이해가 가지 않아 그냥 그렇겠거니 한 결론..

 

         → #one{top:100; left:100; z-index:731564832145967;}

              #two{

                           top:250; left:160; text-align:center; vertical-align:50%;

                           background:#3399cc; font-size:30pt; letter-spacing:10px;

                           z-index:731554832145967; vertical-align:bottom}

              #three{top:180; left:50; z-index:730554832145967}      

             ▲ <head>내의 <style> 태그 수정

 

         → <script language="javascript"> // language="javascript"는 생략가능

              function show(p,n){

                           if(n==1){

                           document.all[p].style.visibility = "visible"; // 스타일시트 적용은 자바스크립트에서 .all['이름'].

                           }else{

                           document.all[p].style.visibility = "hidden"; // 함수명(변수,변수)

                                    }

                           }           

              </script>

              ▲ <head>내의 <script> 태그 수정 

 

         → <input type="button" value="이미지보이기" onClick="show('three','1')"> <!-- 함수명('상수','상수') -->

             <input type="button" value="이미지숨기기" onClick="show('three','2')">

             <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

             <br><br><br><br><br><br><br><br><br><br><br><br><br><br>

             <input type="button" value="표보이기" onClick="show('one','1')"> <!-- 1번을 show, 2번을 hidden의

              역할로 지정-->

             <input type="button" value="표숨기기" onClick="show('one','2')">

             <input type="button" value="글자보이기" onClick="show('two','1')">

             <input type="button" value="글자숨기기" onClick="show('two','2')"> 

              ▲ <body>내에 <input> 태그 입력

 

         → <div class="one">

              <table border="1" width="100%" height="100%">

              <tr>

                           <th align="center">좋아하는<br>과일이름</th>

                           <th align="center">싫어하는<br>과일이름</th>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              <tr align="center">

                           <td>과일별로</td><td>과일별로</td>

              </tr>

              </table>

              </div>

 

              <div class="two">

              <br><br><br><br><br><br><b>엄기백</b>

              </div>

 

              <div class="three">

              <img src="..\html\img\week\sun.jpg" width="200" height="200">

              </div>

             ▲ <body>내의 <div> 태그 수정

 

# 결과 ▽

 

 

 

C. 스크롤바 스타일시트 : <style>태그 (<head>사이에 입력)

 

 1. 속성 : face(전체), shadow(그림자:오른쪽아래), hightlight(밝은곳:왼쪽위),
                track(스크롤트랙),
arrow(화살표)

     → BODY,TEXTAREA {

                                        scrollbar-face-color:white; /* 전체 색깔 */

                                        scrollbar-shadow-color:black; /* 그림자 색깔 */

                                        scrollbar-highlight-color:gray; /* 밝은곳 왼쪽 위 빛 */

                                        scrollbar-track-color:white; /* 스크롤 트랙 */

                                        scrollbar-arrow-color:#cc0000; /* 화살표 */

                                        }

        ▲ A,B와 같은 속성이겠지만 C라 따로 적었다. 자세한 설명은 필요 없을 듯.

 

# 결과 ▽

 

부분적용 face ▽

 

 

부분적용 shadow ▽

 

 

부분적용 highlight ▽

 

 

부분적용 track ▽

 

 

부분적용 arrow ▽

 

 

전체적용 ▽

 

 

 

D. A링크 스타일시트 : <style>태그 : <head>사이에 입력 후 적용 html tag <body>사이 입력

 

 1. 속성 : link(기본값), visited(방문이력이있는링크), hover(마우스롤오버), 
               active(클릭시)

 

     → A:link {color:gray; text-decoration:none;} /*기본 값☆ */

         A:visited {color:gray; text-decoration:none;} /*이미 방문 */

         A:hover {color:green; text-decoration:underline;} /*마우스 롤오버*/

         A:active {color:red; text-decoration:underline;} /*클릭했을 때*/

 

         DIV {

                 position:absolute; width:200; height:200;

                 border:solid 1px black;          

                }

        ▲ A,B,C와 같은 속성이겠지만 D라고 따로 적었다. 자세한 설명은 필요 없을 듯.

           순서(link→visited→hover→active)도 영향을 받는다.        

           : ←는 가상요소. 즉 소스☆를 읽어보면 "링크라는 A태그의 가상요소(링크된
           객체의 속성지정)"

           위 태그는 <style>태그로 <head>사이에 입력되는 소스

 

     → <a href="http://www.naver.com/" target="_blank">A링크 테스트 A링크 네이버</a><br>

         <a href="http://www.daum.net/" target="_blank">A링크 테스트 A링크 다음</a><br>

         <a href="http://www.paran.com/" target="_blank">A링크 테스트 A링크 파란</a><br>

         <a href="http://www.chol.com/" target="_blank">A링크 테스트 A링크 천리안</a><br>

         <a href="http://www.yahoo.co.kr/" target="_blank">A링크 테스트 A링크 야후</a><br>

         <a href="http://www.google.co.kr/" target="_blank">A링크 테스트 A링크 구글</a><br>

        ▲ 위 태그는 <body>사이에 입력되는 소스

 

# 결과 ▽

 

기본값 (=이미 방문) ▽

 

 

마우스 롤오버 ▽

 

 

클릭했을 때 ▽

 

 

 

E. document : <script>와 </script>사이에 입력

 

 1. write : 화면상에 값을 출력하는 태그이며 주석문으로 전체 내용 기술함

 

 <script>

  a = 10+'20'; // 자동으로 형선언

  document.write("<b>"+a+"<b>"+'<font color="red">홍길동</font>') // body에 출력 / 문자는 ""안에 / 숫자+문자=숫자문자 연결된다,

   // 즉 +는 연결하는 기호다

   // 자바스크립트안에서 html 태그를 입력하기 위해서는 반드시 "" 안에 들어가야 한다. 위에서 속성값을 "red"로 쓰니 오류 나네..

   // 따옴표를 쓰면 안되지만 죽어도 해야겠다 하면 바깥이 '싱글따옴표일때 해당구간을 "더블로 바깥이 "더블이라면 반대

   // 변수는 ""따옴표 안에 들어가면 안된다. // 스크립트에서만 해당되는것: " 와 ' 중 무엇을 써도 관계 없다. 자바에서는 안됨

 

   document.write("<br><img src ='..\HTML\img\blog_img.jpg' style='border:solid 1px green'>"); // 경로에 역슬러쉬x는 스크립트 오류 발생.

   // 16진수를 표시하는 0x라는 수식 때문인듯 한다지만 \x 라는 말이 붙음으로 오류가 나는건 이해가 잘 안됨.. \n 이라면 모를까

   // \n은 오류 없음 , \0은 오류 없고 이미지 표시만 안됨.. 프로그램 창시자가 8진수에 안좋은 추억이 있는듯?

   // 특정 이미지명 + 역슬러쉬 = 스크립트 오류. 결론은 경로에 역슬러쉬를 쓰지 말고 만약 쓴다면 x라는 단어가 폴더나 파일명에 첫글자로 오지 않게 할것;;

 

   b="<br><img src = ../HTML/img/blog_img.jpg style='border:solid 1px green'>"

 

   document.write(b);

 

   // 연산자 (+, -, *, /, %(나머지), ++(1씩증가), --(1씩감소) )

 

   num=5;

   num += 1; //num=num+1; //num++;

   num -= 1; //num=num-1; //num--; 대입연산자(+=, -=, *=, /=, %=, =): 4칙연산이 다 된다.

 

   document.write("<br><br>"+num);

   //관계연산자 ( >, >=, <, <=, ==, != )

   c=10>20;

   document.write("<br>"+c);

 

   //논리연산자 ( &&(and), ||(or), !(not))

 

   //조건연산자 if문없이 조건을 비교 후 둘중 참 또는 거짓을 출력하는 연산

   //result = (조건식)? 조건식의결과가True일때 : 조건식의결과가False일때 ;

   result=(num>5)? num*2: num;

   document.write("<br>"+result);

   </script>

 

# 결과

 

 

 

F. if ~ else : 만약에 OO하다면 if 다음을 실행하고 그렇지 않다면 else 다음을 실행

 

<script>

num = prompt("1~100사이의 값을 입력하세요..","") // 사용자가 입력할 수 있는 대화상자

// 입력한 값이 짝수 인지 홀수 인지 구별해서 결과 출력

if(num%2==1){ //참

                                                     document.write(num+"은(는) 홀수입니다.....");

                                        }

else{ //거짓

                  document.write(num+"은(는) 짝수입니다.....");

             }

</script>

 

# 결과 ▽

 

 

 

G. eval : 문자열의 속성이 가지고 있는 값으로 자동으로 형 변환

 

<script>

                  result = eval(prompt("수식을 입력하세요..",""));

             // eval위치 : 아래에 위치해도 위와 아래 둘다 같은 의미, 적용은→ write((eval(result));

            document.write(result);  // 화면상에 출력을 원하지 않을 땐 삭제

</script>

 

# 결과 ▽

 


'Html/Jsp/Javascript' 카테고리의 다른 글

[Test] 회원가입 폼 만들기  (1) 2011.10.16
Html,Jsp,Css_05  (0) 2011.10.14
Html,Jsp,Css_04  (0) 2011.10.13
Html,Jsp,Css_03  (0) 2011.10.12
Html_02  (0) 2011.10.11
Html_01  (0) 2011.10.10