[Dev]HTML

🎨 색상이 있는 이모지(Emoji) 모음

2025년 04월 25일 golgol 0

💰 통화 관련 이모지 💱 통화 교환 💲 달러 기호 💴 엔화 💶 유로화 💵 달러 지폐 💷 파운드 🪙 동전 🏦 은행 🔐 보안/기기 […]

📱반응형 웹 디자인(Responsive Web Design, RWD)

2025년 02월 18일 golgol 0

다양한 화면 크기와 디바이스(PC, 태블릿, 스마트폰 등)에 맞춰 웹사이트의 레이아웃과 콘텐츠가 자동으로 조정되도록 설계하는 웹 디자인 기법입니다. 🔹 반응형 웹 디자인의 핵심 요소 1. 유동적인 […]

이메일 발송 시

2025년 02월 14일 golgol 0

HTML 이메일의 특성과 이메일 클라이언트의 보안 정책을 고려해야 합니다. 일반적으로 다음과 같은 제약 사항이 있습니다: ❌ 사용이 제한되는 요소: ✅ HTML 이메일 작성 시 권장 […]

css before after

2024년 07월 23일 golgol 0

이 CSS 규칙이 적용되면, 하위 메뉴가 있는 네비게이션 항목의 링크(a 태그)의 앞에 작은 아이콘이 추가됩니다. 이 아이콘은 유니코드 문자 \f105으로 정의되며, ‘굴림체’ 폰트를 사용하고 200의 […]

텍스트가 길면 .. 으로 표현 방법

2024년 05월 02일 golgol 0

javascript 텍스트가 길면 .. 으로 표현 방법 CSS 텍스트가 길면 .. 으로 표현 방법 div에 contenteditable=”true” 속성을 추가하여 사용자가 텍스트를 직접 편집할 수 있도록 만들었습니다.이 […]

디자인 파일 피그마

2024년 03월 29일 golgol 0

피그마(Figma)는 웹 기반의 그래픽 디자인 및 프로토타이핑 툴입니다. 사용자 인터페이스(UI) 및 사용자 경험(UX) 디자인을 위해 주로 사용되며, 그 외에도 그래픽 디자인, 앱 디자인, 웹사이트 디자인 […]

window.open

2023년 07월 16일 golgol 0

noticeWindow.opener = self; 코드가 팝업 창을 현재 창으로 다시 연결하는 기능을 수행하는데, 이 대신 새로운 팝업 창을 여는 코드로 변환하려면 window.open()을 사용할 수 있습니다. 예를 […]

white-space

2023년 05월 18일 golgol 0

Overview : 하얀 공백 처리 방법 참조 ; https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

shortcut icon

2022년 10월 12일 golgol 0

Remark : shortcut icon 세팅 방법 1.Chrome 텝에서 shortcut icon 표시 2. html 적용예시 이미지 크기 : 16 X 16 픽셀

손모양 커서 태그 내 cursor 속성 cursor 모양 보기 style=”cursor:auto” auto style=”cursor:crosshair” crosshair style=”cursor:default” default style=”cursor:pointer” pointer style=”cursor:move” move style=”cursor:e-resize” auto style=”cursor:ne-resize” ne-resize style=”cursor:nw-resize” nw-resize […]


글자 폭이 줄어듬

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

🎨 색상이 있는 이모지(Emoji) 모음

📱반응형 웹 디자인(Responsive Web Design, RWD)

이메일 발송 시

css before after

텍스트가 길면 .. 으로 표현 방법

디자인 파일 피그마

window.open

white-space

shortcut icon

div 높이를 자동(auto)으로 지정한 예

style cursor:pointer

html uppercase

html Required

html ime-mode

Bootstrap Text

table borders collapse

hr Tag

letter-spacing

line-height

Make the cursor a hand style