본문 바로가기
HTML/CSS

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

by teamnova 2023. 6. 24.
728x90

안녕하세요! 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

contenteditable 전역 특성은 사용자가 요소를 편집할 수 있는지 나타내는 열거형 특성입니다.

developer.mozilla.org

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

 

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

전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.

developer.mozilla.org

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

 

HTML Standard

All HTML elements may have the hidden content attribute set. The hidden attribute is an enumerated attribute. The following table lists the states for this attribute: When an element has the hidden attribute in the hidden state, it indicates that the eleme

html.spec.whatwg.org

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

 

HTML Standard

Let time be the moment in time at year year, month month, day day, hours hour, minute minute, second second, subtracting timezonehours hours and timezoneminutes minutes. That moment in time is a moment in the UTC time zone.

html.spec.whatwg.org