내용 편집 가능한 경계선 제거 방법

내용 편집 가능한 요소에서 경계선을 제거하는 방법을 배웁니다.

내용 편집 가능한 경계선 제거

기본적으로, 당신이 contenteditable 설정된值为 true 요소 내에 내용을 작성할 때, 해당 요소가 포커스를 받으면 경계선이 표시됩니다.

하지만, CSS를 사용하여 경계선을 제거할 수 있습니다:

첫 번째 단계 - HTML 추가:

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

두 번째 단계 - CSS 추가:

사용 [속성] 선택자는 모든 내용 편집 가능한 요소를 선택하고 사용합니다 outline 속성에서 경계선 제거:

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

본인이 직접 시도해 보세요

관련 페이지

참조 매뉴얼:HTML contenteditable 속성

참조 매뉴얼:CSS [속성선택자