CSS로 편집 가능한 요소(contenteditable)의 테두리 제거하는 방법

HTML에서 contenteditable 속성을 사용하면 사용자가 직접 텍스트를 수정할 수 있는 편집 가능한 요소를 만들 수 있습니다. 하지만 이러한 요소를 클릭하면 기본적으로 파란색 외곽선(outline)이 나타나 디자인을 해치는 경우가 많습니다.

이때 CSS의 outline 속성을 활용하면 간단하게 테두리를 제거할 수 있습니다. 핵심 코드는 다음과 같습니다.

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

위 코드는 outline: none;과 동일한 효과를 내며, 모든 contenteditable 속성이 적용된 요소에서 포커스 시 나타나는 외곽선을 제거합니다. 특정 요소에만 적용하고 싶다면 클래스 선택자를 활용할 수도 있습니다.

전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   p{
      font-size: 40px;
   }
   [contenteditable] {
      outline: 0px solid transparent;
   }
</style>
</head>
<body>
<h1>Contenteditable 테두리 제거 예제</h1>
<p contenteditable="true">편집 가능한 문단입니다. 클릭하여 직접 수정해 보세요.</p>
</body>
</html>

실행 결과

위 코드를 실행하면 아래와 같은 화면이 출력됩니다.

CSS로 편집 가능한 요소(contenteditable)의 테두리 제거하는 방법

문단을 클릭하면 별도의 테두리 없이 바로 텍스트를 편집할 수 있습니다.

CSS로 편집 가능한 요소(contenteditable)의 테두리 제거하는 방법

추가 팁

outline: none; — 가장 일반적으로 사용되는 방법으로, 외곽선을 완전히 제거합니다.
caret-color 속성을 함께 사용하면 편집 시 표시되는 커서 색상도 원하는 대로 변경할 수 있습니다.
접근성 측면에서 편집 가능한 영역임을 사용자에게 알려주려면, 마우스 오버(hover) 시 배경색을 살짝 변경하는 방식으로 시각적 피드백을 주는 것이 좋습니다.

이처럼 outline 속성 하나만으로도 contenteditable 요소의 기본 테두리를 손쉽게 제거하여 더 깔끔한 UI를 구현할 수 있습니다.