HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
📝
학습 TIL/
🙂
[TIL] 데브코스 일차
🙂

[TIL] 데브코스 일차

Date
Apr 20, 2022
대주제
TIL
주제
vanillaJS
focus이동
활동 기록

오늘 배운 것

  • Aws Amplify 배포
  • mouseEvent
  • getSelection
  • execCommands

어려웠던 내용

  • get Selection 을 통한 focus 이동 구현

느낀점

    참고

    [Javascript] 마우스 이벤트(event) 종류
    마우스 이벤트의 종류를 알아보고, 각 이벤트들이 언제 어떻게 동작하는지 정리해 보았습니다. 0. 마우스 이벤트의 종류 1. click, mousedown, mouseup 2. dblclick 3. mousemove 4. mouseover, mouseout 5. mouseenter, mouseleave 6. mouseover, mouseout와 mouseenter, mouseleave 차이점 7. contextmenu - 사용자해 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다.
    [Javascript] 마우스 이벤트(event) 종류
    https://hianna.tistory.com/492
    [Javascript] 마우스 이벤트(event) 종류
    setSelectionRange로 검색창 커서 옮기기
    카카오엔터테인먼트 FE 기술블로그
    setSelectionRange로 검색창 커서 옮기기
    https://fe-developers.kakaoent.com/2021/211104-setselectionrange/
    setSelectionRange로 검색창 커서 옮기기
    How to move cursor to end of contenteditable entity
    There is also another problem. The Nico Burns's solution works if the contenteditable div doesn't contain other multilined elements.
    How to move cursor to end of contenteditable entity
    https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity/3866442#3866442
    How to move cursor to end of contenteditable entity
    Use execCommands to edit HTML content in your browser
    This is inspired by a e-mail news update from CSS-Tricks "Cut and Copy (from Javascript" by Chris Coyier....
    Use execCommands to edit HTML content in your browser
    https://codepen.io/netsi1964/full/QbLLGW/
    Use execCommands to edit HTML content in your browser
    수림님 노션회고 기가막히다
    surim014 (sson) - velog
    생성자 함수란? 🧐 ## 정의 📋 - 이름 그대로 객체(인스턴스)를 생성하는 함수 ## 특징 🙌 - 일반 함수와 동일한 방법으로 생성자 함수를 정의 - `new` 연산자와 함께 호출해야만 `생성자 함수`로 동작 - `new` 연산자 없이 호출하게 될 경우, DOM 트리를 구성하기 위해 HTML을 파싱HTML은 구조화된 정보이기 때문에 DOM(Document Object Model), 일종의 트리 구조 형태로 HTML 태그들을 데이터로 해석해서 다시 가지고 있게 됨파싱?
    surim014 (sson) - velog
    https://velog.io/@surim014
    surim014 (sson) - velog
    [HTML/JS/CSS] contenteditable을 이용한 editor 만들기
    안녕하세요. 이번 포스팅은 HTML에 있는 contenteditable을 이용해서 editor를 만들기입니다. 만드는 방법은 아주 간단합니다. input, textarea와 같은 텍스트 입력 태그가 아닌 div와 같은 태그에 contenteditable="true"를 추가해주면 됩니다. 그렇게 되면 아래와 같이 원래는 텍스트 입력이 불가능한 div 태그에 아래와 같이 텍스트를 입력할 수 있습니다. 그럼 이제 텍스트 입력이 되는 것을 확인했으니 CSS를 적용해보겠습니다.
    [HTML/JS/CSS] contenteditable을 이용한 editor 만들기
    https://dev-bak.tistory.com/16
    [HTML/JS/CSS] contenteditable을 이용한 editor 만들기
    텍스트 에디터, 텍스트 편집기 만들기
    지금 내가 사용하고 있는 이 블로그에 글을 작성 할 때도 보면은 텍스트 편집기를 쓰고 있다. 이런식으로 되어있는데 굵게, 이탈리체, 밑줄, 색깔 등등을 정해 줄 수가 있다. 현재 학원에서 진행중인 프로젝트에..
    텍스트 에디터, 텍스트 편집기 만들기
    https://devilfront.tistory.com/29
    텍스트 에디터, 텍스트 편집기 만들기