[Dev]HTML – 페이지 3

네이버 캘린더 만들기 – 1. 레이아웃 만들기, 메뉴숨기기/보이기

2014년 02월 20일 golgol 0

네이버 캘린더 만들기 – 1. 레이아웃 만들기, 메뉴숨기기/보이기.

How to print a form in landscape format automatically

2014년 02월 10일 golgol 0

XImageTransform.Microsoft.BasicImage via How to print a form in landscape format automatically.

IE 11 Ignoring “autocomplete=off” | Hacking for Christ

2013년 12월 05일 golgol 0

IE 11 Ignoring “autocomplete=off” | Hacking for Christ.

웹페이지 이동 부드럽게

2013년 11월 25일 golgol 0

웹페이지 이동 부드럽게. (플래쉬 같은 효과)


<!--<META HTTP-EQUIV="Page-exit" CONTENT="BlendTrans(Duration=0.2)">-->
<!--<META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0.2)">-->

1

2

3

4

[html] div 로 로딩 이미지 가운데

2013년 11월 04일 golgol 0


<table width="700" border="1" cellpadding="0" cellspacing="0" align="left">
<tr>
<td align="center">
<img src='../images/loading2.gif' border='0'><!-- loading images -->
</td>
</tr>
</table>

1

2

3

4

5

6

7

8

9

<tr>

</td>

</tr>

</table>

– 위와 같이 table 을 사용하지 않고 -> 다음과 같이 div 로 로딩 이미지 가운데 나오게 한다.


<div style="width:700; text-align: center">
<img src="../images/loading2.gif" style="vertical-align: middle" /><!-- loading images -->
</div>

1

2

3

4

5

</div>

The W3C Markup Validation Service 웹표준 검사

2013년 08월 09일 golgol 0

웹표준 검사 http:// via The W3C Markup Validation Service.

팝업 구현

2013년 07월 16일 golgol 0

##### 본문 PAGE 에 추가 ################


<script language="JavaScript">
//<!--
function notice_getCookie( name ){
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length )
{
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
if ( notice_getCookie( "group_popup1" ) != "done" )
{
//noticeWindow = window.open('Pop.html','notice','left=0, top=0, width=480,height=620');
noticeWindow = window.open('/Popup/popup.html','','width=508,height=610, left=100, top=100'); // 팝업윈도우의 경로와 크기를 설정 하세요
noticeWindow.opener = self;
}
// -->
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

//<!--

function notice_getCookie( name ){

var nameOfCookie = name + "=";

var x = 0;

while ( x <= document.cookie.length )

{

var y = (x+nameOfCookie.length);

if ( document.cookie.substring( x, y ) == nameOfCookie ) {

if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )

endOfCookie = document.cookie.length;

return unescape( document.cookie.substring( y, endOfCookie ) );

}

x = document.cookie.indexOf( " ", x ) + 1;

if ( x == 0 )

break;

}

return "";

}

if ( notice_getCookie( "group_popup1" ) != "done" )

{

//noticeWindow = window.open('Pop.html','notice','left=0, top=0, width=480,height=620');

noticeWindow = window.open('/Popup/popup.html','','width=508,height=610, left=100, top=100'); // 팝업윈도우의 경로와 크기를 설정 하세요

noticeWindow.opener = self;

}

// -->

</script>

#####POPUP PAGE################


<HTML>
<HEAD>
<TITLE>요청사항</TITLE>
<link href="style.css" rel="stylesheet">
</HEAD>
<script language="javascript">
<!--
function event_setCookie( name, value, expiredays )
{
var todayDate = new Date();
todayDate.setDate( todayDate.getDate() + expiredays );
document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
function event_closeWin(){
event_setCookie( "group_popup1", "done" , 1); // 1=하룻동안 공지창 열지 않음
self.close();
}
function goPage(){
opener.location.href="/new_webmail/html/message-mail.html";
self.close();
}
//-->
</script>
<BODY topmargin="0" leftmargin="0">
<table width="500" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="01_1.gif" border="0" usemap="#Map"></td>
</tr>

<tr>
<td height="32" align="right" bgcolor="f66e07"><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" bgcolor="f66e07" align="right">
<a href="javascript:event_closeWin()"><b><font color="FFFFFF">오늘 하루 동안 창을 열지 않음</font></b></a>
&nbsp;&nbsp;
</td>
</tr>
</table></td>
</tr>
</table>

<map name="Map">
<area shape="rect" coords="125,487,365,561" href="javascript:goPage()">
</map>
</BODY>
</HTML>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<HTML>

<HEAD>

</HEAD>

<!--

function event_setCookie( name, value, expiredays )

{

var todayDate = new Date();

todayDate.setDate( todayDate.getDate() + expiredays );

document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"

}

function event_closeWin(){

event_setCookie( "group_popup1", "done" , 1); // 1=하룻동안 공지창 열지 않음

self.close();

}

function goPage(){

opener.location.href="/new_webmail/html/message-mail.html";

self.close();

}

//-->

</script>

<tr>

</tr>

<tr>

<tr>

</td>

</tr>

</table></td>

</tr>

</table>

</map>

</BODY>

</HTML>

img와 텍스트 높이 맞추기 : vertical-align:text-bottom

2013년 07월 02일 golgol 0

* align=abamiddle 은 비표준이므로 사용하지 말것


<img src="" align="absmiddle"> (X)
<img src="" style="vertical-align:middle">  (O)

1

2

3

4

<img src="" align="absmiddle"> (X)

<img src="" style="vertical-align:middle"> (O)


vertical-align:text-top;
vertical-align:text-bottom;

1

2

3

4

vertical-align:text-top;

vertical-align:text-bottom;

ex1)


<img src='./imsges/Standard.gif' border='0' style='vertical-align:text-bottom;'/>

1

2

3

ex2)


<!DOCTYPE html>
<html>
<head>
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p>
<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.</p>
<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<!DOCTYPE html>

<html>

<head>

<style>

img.top {vertical-align:text-top;}

img.bottom {vertical-align:text-bottom;}

</style>

</head>

<body>

<p>An <img src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a default alignment.</p>

<p>An <img class="top" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-top alignment.</p>

<p>An <img class="bottom" src="w3schools_logo.gif" alt="W3Schools" width="270" height="50" /> image with a text-bottom alignment.</p>

</body>

</html>

html 자판 한글/영문 대문자/소문자 입력모드

2013년 03월 04일 golgol 0

① 한글만 입력(자판이 영문모드여도 자동으로 한글 전환)


style='ime-mode:active'

1

2

3

style='ime-mode:active'

② 영문만 입력(자판이 한글모드여도 자동으로 영문 전환)


style='ime-mode:inactive'

1

2

3

style='ime-mode:inactive'

③ 한/영 전환가


style='ime-mode:auto'

1

2

3

style='ime-mode:auto'

④ 한글사용불가


style='ime-mode:disabled'

1

2

3

style='ime-mode:disabled'

⑤ 한글모드 […]