WEB

웹 유용할 태그들 정리

말뚝_2 2014. 7. 3. 18:29

1. alert창 띄우기 (html)

<script>alert(\"텍스트 입력\");</script>


2. 다른페이지로 이동 (php)

<?    

header("location:이동할 페이지");

?>


3.다른 페이지로 이동 (html)

<meta http-equiv="refresh" content='지연시간; url=이동할페이지'>

따옴표 위치에 주의하자.


4. 다른 페이지로 이동 (java)

자바스크립트를 사용하기에 <script language='javascript'></script>를 입력해줘야한다.

<script language='javascript'>

location.href="이동할 페이지";

</script>


4-1 다른 프레임에서 다른 페이지로 이동

<script language='javascript'>

parent.프레임이름.location.href="이동할 페이지";

</script>


4-2 새창을 띄워서 이동

<script language='javascript'>

window.open(페이지 주소);

</script>


5. 전체 페이지(프레임 포함) 새로고침 (java)

<script language='javascript'>

parent.location.reload();

</script>

현재 페이지가 있는 프레임을 포함한 전체 페이지의 내용을 새롭게 불러오는 것이다.

6. 링크 색상 변경 (html)
<head>와 </head> 사이에 입력해주는 내용이다.

 <style type="text/css">

<!--
A:link {text-decoration:none; color:#000080}  -> 기본 링크 색상
A:visited {text-decoration:none; color:#000080} -> 방문한 적 있는 링크의 색상
A:active {text-decoration:none; color:#000080}    ->클릭했을때의 링크의 색상
A:hover {text-decoration:none; color:#529CFF} -> 마우스 커서를 올렸을때 링크의 색상
-->
</style>

또한 A:hover는 여러가지로 동적 변화를 줄 수 있다.

A: hover {text-decoration:underline; color:#529CFF}

여기에 마우스커서가 올라가면 밑줄이 생깁니다

A: hover {text-decoration:underline overline; color:#529CFF}

여기에 마우스커서가 올라가면 아래위로 두 개의 줄이 생깁니다

A: hover {text-decoration:none; color:#000080; background:#D0E0FF; padding:2 2 0}

여기에 마우스커서가 올라가면 링크주변이 배경색으로 채워집니다

A:link, A:visited, A:active 로 시작되는 줄에도 각각 padding 2 2 0 를 추가해주시면 보기 좋습니다. 배경이나 글자가 잘리거나 움직이지 않게 하기 위해 넣은 부분입니다.

A: hover {text-decoration:none; color:#529CFF; font-weight:bold}

여기에 마우스커서가 올라가면 굵은 글씨로 변합니다

A: hover {text-decoration:none; color:#529CFF; font-size:11pt}

여기에 마우스커서가 올라가면 큰 글씨로 변합니다

A: hover {text-decoration:none; color:#529CFF; background:url(dotline.gif) repeat-x bottom}

여기에 마우스커서가 올라가면 점선 이미지가 밑줄로 보여집니다

dotline.gif 는 점선밑줄로 사용할 그림의 경로 및 이름.
이 경우는 점선으로 사용할 그림이 하나 있어야 합니다. 가로3픽셀, 세로1픽셀짜리로 준비하시면 되구요. 투명한 바탕의 가운데 점 하나만 찍어주면 됩니다.  ← 확대해보면 이런 모양이 되겠죠. 파란사각형의 양쪽은 투명배경 (배경색이 있는 문서에서 자연스러운 점선을 표현하기 위함)입니다. 물론, 다른모양 다른크기로 만들어도 상관은 없습니다:) 저 그림을 다운 받아서 파란색만 다른 색으로 바꿔 사용하셔도 됩니다^^


A: hover {text-decoration:none; color:#529CFF; border-bottom:1 dotted #0000FF}

여기에 마우스커서가 올라가면 #0000FF색의 점선 밑줄이 생깁니다

이 경우, 밑줄로 쓰일 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.

A: hover {text-decoration:none; color:#000080; border:1 dotted #0000FF; padding:2 3 0}

여기에 마우스커서가 올라가면 링크주변에 #0000FF색 점선박스가 생깁니다

A:link, A:visited, A:active 로 시작되는 줄에는 각각 padding 2 3 0 을 추가해주시면 보기 좋습니다. 글자가 움직이지 않게 넣어준 여백입니다. 점선박스로 사용할 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.

A: hover {text-decoration:none; color:#529CFF; border-bottom:3 solid #0000FF}

여기에 마우스커서가 올라가면 두께 3, #0000FF색의 굵은 밑줄이 생깁니다

밑줄로 쓰일 이미지는 따로 필요하지 않지만, 익스플로러 5.5 이상에서만 보입니다.

출처 : http://www.kissofgod.net/wdi/css/css01a.html#

5. javascript 팝업

window,open("URL",이름,속성); -> 팝업창 호출

window.opener.document.폼네임.필드네임.value=값 -> 팝업 호출 이전창으로 값 보내주기

ex) 이전창에서 form name=form 이고 input type=text name=id 라면 

팝업으로 열린창에서window. opener.document.form.id.value="hello" 할때 원래 창에서의 id 에 hello가 들어간다.

현재 창의 내용을 사용할떄 window.document를 사용하듯 이전창의 내용을 사용하려면 window.openr.document를 이용한다. 반대로 새로운 창을 열면서 값을 보내주려면 window.open()안에 값을 넣어준다.

6. javascript ID 이용하기

document.getElementById(ID).value=값;

태그를 이용하면 html 안에서 id="" 로 지정해준 값들을 받아와 자바스크립트에서 사용이 가능하게 한다. 여러모로 유용한 함수.