[HTML/CSS] table contenteditable 속성 사용하기

안녕하세요! Table로 수정 등의 input이 가능하게 하는 기능들을 구현 시에 이전에는 td안에 input 요소를 넣어, input 내에서 사용자가 글씨를 입력할 수 있도록 했었는데요. 오늘은 'contenteditable' 속성을 사용해서 바로 요소 내부에서 글자를 적고 수정할 수 있도록 해보겠습니다.

 

disabled,required등의 속성 알지만, contenteditable은 대체 뭘까요? 

 

-The contenteditable global attribute is an enumerated attribute* indicating if the element should be editable by the user. If so, the browser modifies its widget to allow editing.
-contentededitable 글로벌 속성은 사용자가 요소를 편집할 수 있는지 여부를 나타내는 열거 속성*입니다. 이 경우, 브라우저는 편집을 허용하도록 위젯을 수정합니다.
-출처:https://developer.mozilla.org/

 

contenteditable은 table에서만 사용 가능한 속성이 아닌 글로벌 속성*으로, mozilla에서는 이런 예제를 첨부하고 있습니다.

<blockquote contenteditable="true">
    <p>Edit this content to add your own quote</p>
</blockquote>

<cite contenteditable="true">-- Write your own name here</cite>

 

blockquote 태그와 cite 태그 안에 contenteditable 속성이 true로 되어있는 것을 확인할 수 있고, 사이트내 예제에서 유저들이 해당 태그 내 글자를 자유롭게 수정 가능한 것을 확인할 수 있습니다. 사용법은 간단합니다. 위 mozilla의 예제처럼, contenteditable = "true" 라고 작성 시 해당 태그 내 입력이 가능하며 contenteditable="false"인 경우에는 입력이 불가능합니다. 

 

<div contenteditable>입력해주세요:div</div>
<label contenteditable>입력해주세요:label</label>
<p contenteditable>입력해주세요:p</p>

 

div와 label, p 태그 안에 contenteditable 속성을 넣은 예제를 보도록 하겠습니다.

 

div 태그에도 label 태그에도 p태그에도 모두 적용되는 것을 확인할 수 있다.

 

그럼 이제 이 속성을 사용해서 만들어보도록 하겠습니다.

 

테이블 예제입니다.

각각 row에 적용될 때와 td에 적용될 때, 그리고 false인 경우를 비교하기 위해 아래와 같이 작성했습니다.

 

contenteditable.html

<table id="editableTable">
  <thead>
    <tr class="table-light">
      <th>이름</th>
      <th>나이</th>
      <th>직업</th>
    </tr>
  </thead>
  <tbody id="info">
    <tr contenteditable="true">
      <td>김뫄뫄</td>
      <td>25</td>
      <td>학생</td>
    </tr>
     <tr>
        <td contenteditable="true">박뫄뫄</td>
        <td contenteditable="true">30</td>
        <td contenteditable="true">사무직</td>    
     </tr>
     <tr>
      <td contenteditable="false">이뫄뫄</td>
      <td contenteditable="false">21</td>
      <td contenteditable="false">학생</td>
    </tr>   
  </tbody>
</table>

 

contenteditable.css

table {
  border-collapse: collapse; /* 테이블 셀 간격을 없애기 위해 사용 */
  width: 80%; /* 테이블 전체 너비 */
  margin: auto;/*가운데 정렬*/
}

th, td {
  border: 1px solid #ddd; /* 셀 테두리 */
  padding: 8px; /* 셀 안쪽 여백 */
  text-align: center; /* 텍스트 정렬 방식 */
}

th {
  background-color: #f2f2f2; /* 헤더 배경색 */
  color: #333; /* 헤더 글자색 */
  font-weight: bold;/*글씨 두껍게*/
}

 

이렇게 작성하면 row와 td에 contenteditable이 각각 어떻게 적용되는지 아래와 같이 확인할 수 있습니다.  

row에 적용되었을 때와 td에 각각 적용되었을 때의 차이점을 알 수 있다.

-나머지 상세 내용은 아래 링크 참고 부탁드립니다 

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable

contenteditable - HTML: Hypertext Markup Language | MDN

https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes

전역 특성 - HTML: Hypertext Markup Language | MDN

https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable

HTML Standard

https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute

HTML Standard