728x90
(진행배경) 메모를 추가하고 엔터 버튼을 누른 뒤 창을 새로고침하면, 메모 컨테이너 안에 있던 이미지가 아래 사진과 같이 밖으로 벗어나는 오류가 발생하였다.
[문제 - Enter 이벤트 발생에 따른 요소 간 충돌문제]
(문제 상황) 엔터를 치지 않았을 때는 해당 문제가 발생하지 않고, 엔터를 치고 웹을 재로드 하면 문제가 발생하는 것으로 보아 엔터 이벤트 발생과 관련된 오류인 것으로 추정되었다.
(문제 원인) 원인은 사용자가 내용을 편집할 때 'Enter' 키를 누르면 웹 브라우저는 내부적으로 <div> 태그를 삽입하여 줄 바꿈을 처리하는 문제였다. 메모를 기록하고 엔터를 치면 로컬스토리지에 해당 내용이 저장 되도록 소스 코드를 작성해 놨는데, 이 과정에서 이미지를 감싼 div가 p태그 내부에 새롭게 만들어지며 충돌오류를 일으킨 것이다.
로컬스토리지에는 아래와 같이 저장 된다:
// 엔터 없이 메모 저장
<p class="input-box" contenteditable="true">입력하고 새로고침했다<img src="images/delete.png"></p>
// 엔터와 함께 메모 저장
<p class="input-box" contenteditable="true">입력하고 엔터 후 새로고침했다<div><br><img src="images/delete.png"></div></p>
(해결 방법) 간단하게 p 태그를 div로 변경해주었다.
로컬스토리지는 아래와 같이 저장 된다:
// 엔터 없이 메모 저장
<div class="input-box" contenteditable="true">tag를 p에서 div로 바꾸고 새로고침했다<img src="images/delete.png"></div>
// 엔터와 함께 메모 저장
<div class="input-box" contenteditable="true">tag를 p에서 div로 바꾸고 엔터를 누르고 새로고침했다<div><br><img src="images/delete.png"></div></div>
이 결과 div 안에 새로운 div가 만들어지면서 레이아웃 오류를 일으키지 않았다.
(배운점)
- 엔터키를 누르면 웹 브라우저는 내부적으로 <div>태그를 삽입한다는 사실을 새롭게 알게 되었다. 충돌을 방지하기 위해서는 특별한 이유가 없는 한 가능한 div로 통일하면 좋을 것 같다.
- contenteditalble 관련 배운점 :
- input 태그 사이에는 이미지를 넣을 수 없다
- p 태그 사이에는 이미지를 넣을 수 있다.
- p 태그와 div 태그의 속성을 contenteditable 하게 만들어 편집할 수 있다.
728x90
반응형
'프로젝트 > 딴짓 추적표' 카테고리의 다른 글
[프로젝트] 딴짓추적표 | 4. 드롭박스로 카테고리 만드는 법 (2) | 2023.08.20 |
---|---|
[프로젝트] 딴짓추적표 | 3. 검색기능 추가하는 법 (1) | 2023.08.13 |
[프로젝트] 딴짓추적표 | 2. 메모 생성 시간 기록(타임스탬프) 하는 법 (0) | 2023.08.13 |
[프로젝트] 딴짓추적표 | 1. 레이아웃, 메모 조회 및 갱신하는 법 (0) | 2023.08.08 |
[프로젝트] 딴짓추적표 | 0. 기획배경 (0) | 2023.08.07 |