Rich Text Editor Rich Text Editor란, 위지윅 편집 영역을 제공하여 브라우저 내에서 서식있는 텍스트를 편집하기 위한 인터페이스를 말한다. 바닐라 자바스크립트를 이용하였으며, 기능한 구현은 다음과 같다. 왼쪽 정렬 가운데 정렬 오른쪽 정렬 수평 정렬 텍스트 진하게(Bold) 텍스트 기울이기(Italic) 텍스트 언더라인(Underline) order, unorder 리스트 하이퍼 링크 이미지 첨부 HTML로 변환 구현 영상은 다음과 같다. 완성본 HTML 코드는 다음과 같다. 섹션은 크게 두 개의 영역으로 나뉜다. 첫 번째 영역은 버튼을 담고 있는 form 영역, 두 번째 영역은 텍스트를 수정할 iframe 영역이다. 각 버튼에는 data-cmd라는 속성을 추가해주었다. data ..

최근에 마우스 드래그 앤 드롭을 이용하여 박스를 이동시키는 기능을 구현한 적이 있었다. 금방 구현할 줄만 알았는데, 많은 시간이 걸렸다. 어려웠던 경험을 정리하고 내 것으로 확실히 만들기 위해 다시 한 번 이 기능을 만들어보았다. 따라서 이번 포스팅에서는 마우스 이벤트를 이용하여 드래그 앤 드롭(Drag & Drop)을 이용한 박스 이동 기능을 어떻게 구현했는지에 관하여 써보고자한다. 백문이불여일견(白聞不如一見)이라 했다. 구현 영상은 아래와 같다. 완성본 위 기능을 구현하기 위해서는 다음과 같은 마우스 이벤트가 필요하다. mousedown: 마우스 버튼이 눌릴 때 발생하는 이벤트. mouseup: 마우스 버튼이 떼어질 때 발생하는 이벤트. mousemove: 마우스 포인터가 이동할 때 발생하는 이벤트...

1. 완성본 완성 본 2. 설명 CSS로 3D를 만져보는것이 익숙하지 않아 꽤나 애먹었다. HTML 구조는 다음과 같다. CSS 코드 중에 content 클래스안에 있는 내용을 주목할 필요가 있다. prospective는 3차원 위치 관점을 제공하기 위해, Z=0인 평면과 사용자 사이의 거리를 결정한다. 쉽게 말하면 원근법을 제공한다는 뜻이다. 값은 무조건 0, 양수 값이어야 한다. 그리고 padding-top 속성 값을 변화시켜 줄 때마다 위에서 보는 관점의 변화가 생겼는데, 왜 그런지는 모르겠다. 나머지는 읽어보면 어떤식으로 돌아가는지 이해할 수 있을 것이다. *{ box-sizing: border-box; } html{ font: 10px; } body{ margin: 0; padding: 0; w..

1. 완성본 [동영상] 완성본 2. HTML HTML 구조는 크게 어려운 것이 없다. The Nav Home About Work Projects 3. CSS 내가 어렵다고 생각한 것은 주석을 달아놨다. 엄청나게 어려운 것은 없다. * { margin: 0px; padding: 0px; box-sizing: border-box; } nav { display: flex; justify-content: space-around; align-items: center; /* 요소의 최소 너비 지정, height 속성 무시 vh단위는 브라우저 안쪽 높이(window.innerHeight)을 기준으로 설정된다. 하지만 태블릿이나, 모바일의 경우에는 뷰 포트에 따라 맞춰짐*/ min-height: 8vh; backgro..

1. 완성본 완성본 영상은 다음과 같다. 간단하게 사칙연산(더하기, 빼기, 곱하기, 나누기)만을 구현했다. [영상] 완성본 영상 2. HTML 구조 0 3. CSS * { box-sizing: border-box; } html, body { height: 100%; padding: 0; margin: 0; } .calc-wrapper { width: 250px; height: 300px; position: relative; margin: 0 auto; margin-top: 50px; background-color: #f9f9f9; border: 1px solid #dfe1e5; border-radius: 20px; padding: 10px; display: flex; flex-direction: colu..

1. 완성본 2. HTML HTML 구조는 다음과 같다. 1 2 3 4 5 6 7 8 9 10 11 12 00:00 3. CSS CSS 코드도 다음과 같다. 특별히 어려운 것은 없다. * { box-sizing: border-box; } body { background-color: #ea7612; } .clock-container { /* 가로 세로를 280px인 정사각형으로 만든다.*/ width: 280px; height: 280px; /* 테두리를 만들고 반지름이 140px인 원으로 만든다..*/ border: 8px solid black; border-radius: 50%; /* margin top-bottom을 100px로 주고 가운데 정렬한다. 그리고 margin-bottom을 이용하여 밑의 ..