How To – Contenteditable 테두리 제거

w3.css

Contenteditable 테두리 제거

편집 가능한 요소에서 테두리를 제거하는 방법을 알아보자.

Contenteditable 테두리 제거

기본적으로 contenteditable가 true로 설정된 요소 안에 글을 쓰면 해당 요소는 초점이 맞춰진 테두리를 갖게 된다. 그러나 CSS를 사용하여 테두리를 제거할 수 있다.

1단계) HTML 추가

<p contenteditable="true">This is an editable paragraph.</p>

2단계) CSS 추가

[attribute] 선택기를 사용하여 콘텐츠에 적용할 수 있는 모든 요소를 선택하고 outline 속성을 사용하여 테두리를 제거한다.

[contenteditable] {
  outline: 0px solid transparent;
}