[Dev]HTML – 페이지 2

Bootstrap Text

2022년 04월 28일 golgol 0

Text alignment Font weight and italics 속성 description text-dark 글자 진하게 font-weight-bold 글자 굴게 navbar-expand nav 널게 border border-primary border 그리기 text-uppercase 대분자로 py-1 m-0 […]

table borders collapse

2022년 04월 18일 golgol 0

border-collapse 속성은 테이블 테두리를 단일 테두리로 축소해야 하는지 여부를 설정합니다.

hr Tag

2022년 03월 23일 golgol 0

Hr Tag Attributes align : left center right noshade : dashed dotted size width

letter-spacing

2022년 03월 15일 golgol 0

Remark : 글자간 폰 지정


글자 폭이 줄어듬

1

2

3

글자 폭이 줄어듬

line-height

2022년 02월 17일 golgol 0

Remark : 글자 다음 틈이 생기는 문제 해결 Case 2 : 이미지 사이 틉이 생기는 문제

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;

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 […]