contenteditable 속성은 html 태그의 텍스트 문자열을 수정가능하도록 만들어 준다. 간단한 메세지나 공지 등의 용도로 사용될 수 있으며, 정적인 태그의 내용을 동적으로 사용할 수 있는 장점이 있다. 에디터까지는 아니더라도 간단한 텍스트 문자열을 수정하고 입력하는 등의 작업이 필요할 때 사용하면 유용할 것이다.
html5 수정 가능한 태그 만들기
contenteditable 속성 사용
많이 사용하지는 않겠지만 html 태그 내의 구성을 텍스트로 임의로 변경하고 싶을 때가 있을 것이다.
위지윅 에디터와 같은 것을 사용할 수도 있지만, 그정도의 화려한 기능은 아니더라도 단순히 텍스트만 변경하는 것이라면 나름대로 환영이다.
간단한 쪽지와 같은 그런 기능이라면 좋을 것 같은데 textarea 를 사용해도 되지만 div 나 p 태그에도 적용이 가능하다.
이것은 태그 속성 중 contenteditable 을 적용하여 태그의 텍스트 내용을 변경할 수 있다.
contenteditable 태그의 내용을 수정하자.
html5 태그에 contenteditable 속성을 주면 태그내의 텍스트 문자열을 수정할 수 있다.
기본값은 false 이며, 보통은 사용하지 않지만, 웹기술이 발전됨에 따라 이 기능을 유용하게 사용하는 분들도 있다.
contenteditable 은 태그의 내용을 수정할 수 있도록 하며 기본값은 false 이다.
아래는 html 태그의 문자열을 수정가능하도록 하는 옵션을 보여준다.
<html-tag contenteditable="true"></html-tag>태그의 내용을 수정해 보도록 하자.
텍스트 문자열을 담고 있는 html 태그의 대표적인 것은 여러가지가 있지만 div, p, span 이 가장 많이 사용될 것이다.
div 와 p 태그는 블록요소이고, span 태그는 인라인요소이다.
간단히 블록요소와 인라인요소를 언급하면 다음과 같다.
블록요소와 인라인요소는 html 태그가 화면에 어떻게 표현되는지를 나타내는 display 옵션의 속성이다.
- 블록요소
화면 전체 너비를 차지
줄바꿈 가능 - 인라인요소
태그 내부의 요소 크기만큼 너비를 차지
줄바꿈 불가
위에서 언급된 div, p, span 태그에 contenteditable 옵션을 설정하는 방법은 다음과 같다.
<div contenteditable="true">div 수정가능?</div>
<p contenteditable="true">p 수정가능?</p>
<span contenteditable="true">span 수정가능?</span>전체코드 및 실행결과
이제 코드를 만들어 본다.
언급된 코드를 그대로 사용하며 boder style 옵션으로 화면에서 점유하는 범위를 확인한다.
그리고, 엔터키를 한번 누른 후 텍스트를 수정해 보도록 한다.
아래는 전체 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>화살표 함수 = () => </title>
</head>
<body>
<div contenteditable="true">div 수정가능?</div>
<p contenteditable="true">p 수정가능?</p>
<span contenteditable="true">span 수정가능?</span>
</body>
<style>
div, p, span {
margin-bottom: 10px;
border: 1px solid gray;
}
</style>
</html>div, p, span 태그에 모두 contenteditable 속성을 설정했고, boder 스타일을 이용해 화면에 어떻게 표시되는지 보도록 한다.
아래는 결과화면이다.
모두 같은 방법으로 테스트 하였다. 엔터를 치고 새로운 글자를 입력하였다.
수정이 되고 문자열이 입력되며 엔터키를 이용한 줄바꿈도 된다. 다만, span 의 경우 속성 그대로 가져가기 때문에 뭔가 어색하다. 소스보기를 통해 어떻게 표현되는지 확인해 보자.
아래는 위의 코드를 실행하고 테스트한 결과화면에 대한 소스보기한 결과이다.
텍스트가 새롭게 추가되고 줄바꿈이 되면서 특성에 맞는 하위 태그가 자동으로 추가되는 것을 볼 수 있다.
'programming > web' 카테고리의 다른 글
| 비주얼 스튜디오 코드 확장 프로그램 라이브 서버 ( Live Server ) 설치 및 실행하기 (0) | 2023.09.17 |
|---|---|
| html table 태그 header 사용하기 (0) | 2022.07.02 |
| html table 테두리 표시하기 using html table border (0) | 2022.06.24 |
| html table 행과 열 사용하기 using html table rows and columns (0) | 2022.06.19 |
| html 파비콘 link 태그 사용하기 using html link tag for favicon (0) | 2022.06.16 |
댓글