웹 프론트엔드

Intern

배경이 따라오는 메모장을 만들기 위해 contentEditable을 사용해보자

사용자가 글을 입력할 수 있는 컴포넌트를 만들려면 보통 input이나 textarea를 활용한다. 디자이너님께서 새로 메모장 디자인을 전달해주셨는데,글이 한 줄일 때는 뒤의 회색 배경이 글자와 딱 맞게 입력해야할 때마다 따라와야 하지만,두 줄 이상일 때부터는 배경이 메모장의 최대 width로 유지되면서 줄 수 만큼 height가 늘어나야했다. 처음에는 textarea를 활용해보았는데, 뒤의 회색 배경이 글자를 따라오게 만드는데 실패했다 (fit-content 속성을 주었음에도 불구하고) 그 다음에는 input을 활용해보았는데, 뒤의 회색 배경이 글자를 따라오긴 하였지만, 글이 두 줄일 때 뒤의 회색 배경이 다음 줄로 넘어가지 않았다. 그래서 div에 contentEditable 속성을 주어 원하는 동작..

퀵차분
'웹 프론트엔드' 태그의 글 목록