Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- IntersectionObserver
- 비동기
- 클로저
- 모듈
- Flex
- 배열
- async
- event
- 문자열
- 이벤트 루프
- ajax
- 애니메이션
- 스크롤
- 이벤트 위임
- 고차함수
- ES6
- scroll
- ios
- Promise
- 이벤트
- video
- input
- slice
- array
- dom
- object
- Push
- This
- animation
- json
Archives
- Today
- Total
목록isContentEditable (1)
FEDev Story
[스크랩] contentEditable 속성으로 인라인 텍스트 편집기 제작하기
인라인 편집기를 제작하는 일은 수고롭습니다. input이나 textarea 필드를 이용해 편집될 요소를 변경하는 작업부터 시작합니다. 사용자 경험이 자연스럽게 이어지도록 CSS를 부분적으로 사용해 변경된 요소 스타일을 변경 전의 스타일과 일치시켜야 합니다. 사용자가 편집을 마쳤으면, 다시 변경 전의 콘텐츠 전부를 복사한 후에 요소들을 바꿔주어야 하지요.contentEditable 속성은 이 작업을 엄청 수월하게 해줍니다. 여러분이 할 일은 이 속성값을 true로 설정해 주는 것입니다. 그러면 표준 HTML5 요소들이 편집 가능한 상태가 됩니다. 이 튜토리얼에서는 이 기능을 기반으로 해서 인라인 리치 텍스트 편집기를 제작해 보겠습니다.기본 사항이 속성은 세 가지 적당한 값을 취합니다. 그 세 가지는 tru..
Web.Dev
2018. 8. 3. 18:15