[Dev]HTML

Make the cursor a hand style

2019년 11월 18일 golgol 0


.auto          { cursor: auto; }
.default       { cursor: default; }
.none          { cursor: none; }
.context-menu  { cursor: context-menu; }
.help          { cursor: help; }
.pointer       { cursor: pointer; }
.progress      { cursor: progress; }
.wait          { cursor: wait; }
.cell          { cursor: cell; }
.crosshair     { cursor: crosshair; }
.text          { cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias         { cursor: alias; }
.copy          { cursor: copy; }
.move          { cursor: move; }
.no-drop       { cursor: no-drop; }
.not-allowed   { cursor: not-allowed; }
.all-scroll    { cursor: all-scroll; }
.col-resize    { cursor: col-resize; }
.row-resize    { cursor: row-resize; }
.n-resize      { cursor: n-resize; }
.e-resize      { cursor: e-resize; }
.s-resize      { cursor: s-resize; }
.w-resize      { cursor: w-resize; }
.ns-resize     { cursor: ns-resize; }
.ew-resize     { cursor: ew-resize; }
.ne-resize     { cursor: ne-resize; }
.nw-resize     { cursor: nw-resize; }
.se-resize     { cursor: se-resize; }
.sw-resize     { cursor: sw-resize; }
.nesw-resize   { cursor: nesw-resize; }
.nwse-resize   { cursor: nwse-resize; }

.cursors > div {
    float: left;
    box-sizing: border-box;
    background: #f2f2f2;
    border:1px solid #ccc;
    width: 20%;
    padding: 10px 2px;
    text-align: center;
    white-space: nowrap;
    &:nth-child(even) {
       background: #eee;
    }
    &:hover {
       opacity: 0.25
    }
}

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

49

50

51

.auto { cursor: auto; }

.default { cursor: default; }

.none { cursor: none; }

.context-menu { cursor: context-menu; }

.help { cursor: help; }

.pointer { cursor: pointer; }

.progress { cursor: progress; }

.wait { cursor: wait; }

.cell { cursor: cell; }

.crosshair { cursor: crosshair; }

.text { cursor: text; }

.vertical-text { cursor: vertical-text; }

.alias { cursor: alias; }

.copy { cursor: copy; }

.move { cursor: move; }

.no-drop { cursor: no-drop; }

.not-allowed { cursor: not-allowed; }

.all-scroll { cursor: all-scroll; }

.col-resize { cursor: col-resize; }

.row-resize { cursor: row-resize; }

.n-resize { cursor: n-resize; }

.e-resize { cursor: e-resize; }

.s-resize { cursor: s-resize; }

.w-resize { cursor: w-resize; }

.ns-resize { cursor: ns-resize; }

.ew-resize { cursor: ew-resize; }

.ne-resize { cursor: ne-resize; }

.nw-resize { cursor: nw-resize; }

.se-resize { cursor: se-resize; }

.sw-resize { cursor: sw-resize; }

.nesw-resize { cursor: nesw-resize; }

.nwse-resize { cursor: nwse-resize; }

.cursors > div {

float: left;

box-sizing: border-box;

background: #f2f2f2;

border:1px solid #ccc;

width: 20%;

padding: 10px 2px;

text-align: center;

white-space: nowrap;

&:nth-child(even) {

background: #eee;

}

&:hover {

opacity: 0.25

}


<h1>Example of cursor</h1>

<div class="cursors">
    <div class="auto">auto</div>
    <div class="default">default</div>
    <div class="none">none</div>
    <div class="context-menu">context-menu</div>
    <div class="help">help</div>
    <div class="pointer">pointer</div>
    <div class="progress">progress</div>
    <div class="wait">wait</div>
    <div class="cell">cell</div>
    <div class="crosshair">crosshair</div>
    <div class="text">text</div>
    <div class="vertical-text">vertical-text</div>
    <div class="alias">alias</div>
    <div class="copy">copy</div>
    <div class="move">move</div>
    <div class="no-drop">no-drop</div>
    <div class="not-allowed">not-allowed</div>
    <div class="all-scroll">all-scroll</div>
    <div class="col-resize">col-resize</div>
    <div class="row-resize">row-resize</div>
    <div class="n-resize">n-resize</div>
    <div class="s-resize">s-resize</div>
    <div class="e-resize">e-resize</div>
    <div class="w-resize">w-resize</div>
    <div class="ns-resize">ns-resize</div>
    <div class="ew-resize">ew-resize</div>
    <div class="ne-resize">ne-resize</div>
    <div class="nw-resize">nw-resize</div>
    <div class="se-resize">se-resize</div>
    <div class="sw-resize">sw-resize</div>
    <div class="nesw-resize">nesw-resize</div>
    <div class="nwse-resize">nwse-resize</div>
</div>

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

<h1>Example of cursor</h1>

<div class="default">default</div>

<div class="context-menu">context-menu</div>

<div class="pointer">pointer</div>

<div class="progress">progress</div>

<div class="crosshair">crosshair</div>

<div class="vertical-text">vertical-text</div>

<div class="alias">alias</div>

<div class="not-allowed">not-allowed</div>

<div class="all-scroll">all-scroll</div>

<div class="col-resize">col-resize</div>

<div class="row-resize">row-resize</div>

<div class="n-resize">n-resize</div>

<div class="s-resize">s-resize</div>

<div class="e-resize">e-resize</div>

<div class="w-resize">w-resize</div>

<div class="ns-resize">ns-resize</div>

<div class="ew-resize">ew-resize</div>

<div class="ne-resize">ne-resize</div>

<div class="nw-resize">nw-resize</div>

<div class="se-resize">se-resize</div>

<div class="sw-resize">sw-resize</div>

<div class="nesw-resize">nesw-resize</div>

<div class="nwse-resize">nwse-resize</div>

</div>

참조 : https://stackoverflow.com/questions/3087975/make-the-cursor-a-hand-when-a-user-hovers-over-a-list-item

css rounded 적용샘플

2017년 10월 12일 golgol 0


<!-- 교육안내 -->
<style type="text/css">
dl.rounded {
    margin: 0;
    padding: 5;
    width: 610px;
    background: #ffffff;
    border-radius: 0.5em;
	border-color: #444;
	border-style: dotted;
	border-width: 2px;
  }
  
dl {
    display:block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
	line-height:200%;
	letter-spacing:1px;
}
dd {
	display:block;
    font-size: 12px;
    margin-left: 40px;
	line-height:200%;
	letter-spacing:1px;
} 
dd.box {
    margin-top: 10px;
    left-margin: 20px;
    padding: 5;
    width: 610px;
    background: #dedede;
	border-color: #444;
  }   
.edu_color_1{
	display:inline;
	font-weight:bold;
	color:#5f9334;
	}
</style>
<dl>
	<dt>☏<b> 교육안내 </b> </dt>
	<dd>ㆍ교육신청 정원은 12명 이며, 초과 인원의 경우에는 대기자로 접수됩니다</dd>
	<dd class="edu_color_1">ㆍ현재 대한민국 사용대리점이 아닌 경우 전화로 신청을 하시기 바랍니다.</dd>
	<dd>ㆍ참가자 수에 따라 스케줄 조정이 있을 수도 있습니다.</dd>
	<dd>
		<dl class="rounded">
			<dt class="st_title05"><b>교육비 입금 후 당일 취소로 인한 결시자가 늘어나고 있는 관계로 원활한 교육진행을 위해 신청 날짜에 참석을 못하시게 되면 <font color="#ED7D31">다음 회차로 이월되거나 환불이 불가</font>합니다.</b></dt>
				<dd>ㆍ 우주여행 교육비는 <b><font color="#ED7D31">33,000원(세금 포함)</font></b> 입니다.</dd>
				<dd>ㆍ 계좌번호 : 대한은행 123-22-12324-1/ 예금주 : ㈜대한민국</dd>
				<dd>ㆍ 교육 전주 목요일까지 대한민국으로 교육신청 재확인 후 입금해주시면 됩니다.</dd>					
		</dl>		
	</dd>
	<dd class="box">교육관련 자세한 사항은 대한민국 헬프데스크 02)111-2222로 문의 주시기 바랍니다.</dd>
</dl>
<!-- 교육안내 -->

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

49

50

51

52

53

54

55

56

57

58

59

60

61

dl.rounded {

margin: 0;

padding: 5;

width: 610px;

background: #ffffff;

border-radius: 0.5em;

border-color: #444;

border-style: dotted;

border-width: 2px;

}

dl {

display:block;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 0;

margin-right: 0;

line-height:200%;

letter-spacing:1px;

}

dd {

display:block;

font-size: 12px;

margin-left: 40px;

line-height:200%;

letter-spacing:1px;

}

dd.box {

margin-top: 10px;

left-margin: 20px;

padding: 5;

width: 610px;

background: #dedede;

border-color: #444;

}

.edu_color_1{

display:inline;

font-weight:bold;

color:#5f9334;

}

</style>

<dl>

<dd>ㆍ교육신청 정원은 12명 이며, 초과 인원의 경우에는 대기자로 접수됩니다</dd>

<dd class="edu_color_1">ㆍ현재 대한민국 사용대리점이 아닌 경우 전화로 신청을 하시기 바랍니다.</dd>

<dd>

<dt class="st_title05"><b>교육비 입금 후 당일 취소로 인한 결시자가 늘어나고 있는 관계로 원활한 교육진행을 위해 신청 날짜에 참석을 못하시게 되면 <font color="#ED7D31">다음 회차로 이월되거나 환불이 불가</font>합니다.</b></dt>

<dd>ㆍ 교육 전주 목요일까지 대한민국으로 교육신청 재확인 후 입금해주시면 됩니다.</dd>

</dl>

</dd>

<dd class="box">교육관련 자세한 사항은 대한민국 헬프데스크 02)111-2222로 문의 주시기 바랍니다.</dd>

</dl>

td width 값이 안먹을때

2015년 12월 28일 golgol 0

word-break:break-all; 적용전 word-break: break-all; CSS 속성은 단어를 중간에서 끊어 다음 줄로 넘길 때 사용됩니다. 이를 사용하여 테이블 데이터 셀(td)에서 단어가 길 때 어떻게 동작하는지 보여주는 […]

CKEditor.com | The best web text editor for everyone

2015년 02월 24일 golgol 0


<!-- Make sure the path to CKEditor is correct. -->
 <script src="./ckeditor/ckeditor.js"></script>
 
 <script language="javascript">
 function sendit()
{
        
        //글 내용		
		var data = CKEDITOR.instances.content.getData(); 
		document.myform.content.value = data;
		
        if (trim(document.myform.content.value).length == 0)  {
                alert("글을 작성 안하셨습니다. 글을 작성해 주십시요");
				document.myform.content.focus();
                return false;
        }
       // document.myform.submit();
}
</script>

<Form name="myform" enctype="multipart/form-data" method="POST" action="./****">
       <textarea name="content" id="content" rows="16" cols="56"></textarea>
</form>

<script>
    // Replace the <textarea id="content"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace( 'content' );
 </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

30

31

function sendit()

{

//글 내용

var data = CKEDITOR.instances.content.getData();

document.myform.content.value = data;

if (trim(document.myform.content.value).length == 0) {

alert("글을 작성 안하셨습니다. 글을 작성해 주십시요");

document.myform.content.focus();

return false;

}

// document.myform.submit();

}

</script>

</form>

// Replace the <textarea id="content"> with a CKEditor

// instance, using default configuration.

CKEDITOR.replace( 'content' );

</script>

바로가기: CKEditor.com | The best web text editor for everyone.

HTML Predefined Character Entities

2014년 07월 03일 golgol 0

Table of entities Hex C Name Ent Ref 0x0022 “ QUOTATION MARK " " 0x0026 & AMPERSAND & & 0x0027 ‘ APOSTROPHE ' ' 0x003c […]

Cryptic crossword No 26,189 | Crosswords | The Guardian

2014년 02월 21일 golgol 0

낱말퍼즐 잘된 사이트 crossword Cryptic crossword No 26,189 | Crosswords | The Guardian. Win phone :http://www.codeproject.com/Articles/413539/Windows-Phone-Crosswords http://www.codeproject.com/Articles/530853/Creating-a-crossword-generator

네이버 캘린더 만들기 – 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 은 비표준이므로 사용하지 말것 ex1) ex2) td 상위로 맞추기

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'

⑤ 한글모드 […]


<style type=”text/css”>
<!–
.solid1{
border-color:#999999; background-color:#FFFFFF; border-style:solid;
border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px;
color:#FF0000;
}
.solid2
{
border-color:#999999; background-color:#FFFFFF; border-style:solid;
border-top-width:0px; border-bottom-width:1px; border-left-width:0px; border-right-width:0px;
color:#0000FF;
}
.dashed1
{
border-color:#999999; background-color:#FFFFFF; border-style:dashed;
border-top-width:1px; border-bottom-width:1px; border-left-width:1px; border-right-width:1px;
color:#FF0000;
}
.dashed2
{
border-color:#999999; background-color:#FFFFFF; border-style:dashed;
border-top-width:0px; border-bottom-width:1px; border-left-width:0px; border-right-width:0px;
color:#0000FF;
}
–>
</style>

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

<!–

.solid1{

border-color:#999999; background-color:#FFFFFF; border-style:solid;

border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px;

color:#FF0000;

}

.solid2

{

border-color:#999999; background-color:#FFFFFF; border-style:solid;

border-top-width:0px; border-bottom-width:1px; border-left-width:0px; border-right-width:0px;

color:#0000FF;

}

.dashed1

{

border-color:#999999; background-color:#FFFFFF; border-style:dashed;

border-top-width:1px; border-bottom-width:1px; border-left-width:1px; border-right-width:1px;

color:#FF0000;

}

.dashed2

{

border-color:#999999; background-color:#FFFFFF; border-style:dashed;

border-top-width:0px; border-bottom-width:1px; border-left-width:0px; border-right-width:0px;

color:#0000FF;

}

–>

</style>

Make the cursor a hand style

css rounded 적용샘플

td width 값이 안먹을때

CKEditor.com | The best web text editor for everyone

HTML Predefined Character Entities

Cryptic crossword No 26,189 | Crosswords | The Guardian

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

How to print a form in landscape format automatically

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

웹페이지 이동 부드럽게

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

The W3C Markup Validation Service 웹표준 검사

팝업 구현

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

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

특수문자들

shortcut icon 생성 Link

파일종류 아이콘

html 개발 참조

solid dashed