contenteditable 2

[프로젝트] 딴짓추적표 | 트러블슈팅-Enter 이벤트 발생에 따른 요소 간 충돌문제

(진행배경) 메모를 추가하고 엔터 버튼을 누른 뒤 창을 새로고침하면, 메모 컨테이너 안에 있던 이미지가 아래 사진과 같이 밖으로 벗어나는 오류가 발생하였다. [문제 - Enter 이벤트 발생에 따른 요소 간 충돌문제] (문제 상황) 엔터를 치지 않았을 때는 해당 문제가 발생하지 않고, 엔터를 치고 웹을 재로드 하면 문제가 발생하는 것으로 보아 엔터 이벤트 발생과 관련된 오류인 것으로 추정되었다. (문제 원인) 원인은 사용자가 내용을 편집할 때 'Enter' 키를 누르면 웹 브라우저는 내부적으로 태그를 삽입하여 줄 바꿈을 처리하는 문제였다. 메모를 기록하고 엔터를 치면 로컬스토리지에 해당 내용이 저장 되도록 소스 코드를 작성해 놨는데, 이 과정에서 이미지를 감싼 div가 p태그 내부에 새롭게 만들어지며 충..

[프로젝트] 딴짓추적표 | 1. 레이아웃, 메모 조회 및 갱신하는 법

간단한 메모앱 구현을 위해 아래 유튜브 영상에서 설명하는 기본 레이아웃과 로컬스토리지를 활용한 메모 불러오기 및 갱신 기능을 구현하였다. 해당 영상에서는 레이아웃이 좌측으로 쏠려 있는데 개인적으로 중앙에 오는 디자인이 더 좋아서 배열은 다르게 변경했다. [참고사이트] 이모티콘 다운: https://iconmonstr.com/ 메모앱 구현: https://www.youtube.com/watch?v=n3U4jFbp05M [배운점] 1. contenteditable 속성 HTML5의 모든 엘리먼트는 contenteditable='true'로 설정함으로써 해당 엘리먼트 내부에 텍스트를 작성할 수 있다. 즉, input 외에도 div, span등의 요소도 텍스트 필드로 변화시킬 수 있음을 의미한다. (활용하면 좋..

728x90
LIST