안녕하세요! 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 속성을 넣은 예제를 보도록 하겠습니다.
그럼 이제 이 속성을 사용해서 만들어보도록 하겠습니다.
테이블 예제입니다.
각각 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이 각각 어떻게 적용되는지 아래와 같이 확인할 수 있습니다.
-나머지 상세 내용은 아래 링크 참고 부탁드립니다
https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable
https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes
https://html.spec.whatwg.org/multipage/interaction.html#attr-contenteditable
https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#enumerated-attribute
'HTML/CSS' 카테고리의 다른 글
[HTML/CSS] Tailwind 사용해서 indications 있는 input 폼 만들기 (0) | 2023.08.29 |
---|---|
[HTML/CSS] bootstrap selectbox (0) | 2023.07.12 |
[HTML/CSS] bootstrap Grid, border (0) | 2023.06.12 |
[HTML/CSS] bootstrap 레이아웃 중앙에 배치하기 (0) | 2023.06.01 |
[HTML/CSS] ] css만으로 움직이는 배너 만들기 (0) | 2023.05.30 |