실시간 코드 에디터를 만들기 위해 사용할 태그를 html5로 만들어 본다. 사용할 태그들은 몇 개 되지 않고 화면에 보이도록 배치만 할 것이다. 사용할 태그는 textarea, button, iframe 태그를 각각 하나씩만 사용할 것이다.
2번째 실시간 코드 에디터 html 만들기
how to make code editor
이전에 코드 에디터를 만들기 위해 필요한 것을 기술했었다.
약간의 html5 태그와 약간의 자바스크립트, 약간의 css3 정도만 알면 된다.
이번엔 html 태그를 직접 만들어 코딩을 해 보도록 하자.
한개의 textarea 태그와 button 태그, iframe 태그가 사용될 것이다.
이정도만 기술해도 어떻게 하면 되는지 대충 감이 올 것이다.
사용할 태그
이미 언급했듯이 3가지의 태그를 사용할 것이다.
화면만 구성을 할 것이기 때문에 어떤 요소를 어떻게 사용할 것인지 생각해 볼 수 있을 것이다.
사용할 태그를 정리해 보도록 한다.
- textarea
코드를 직접 작성하는 에디터 역할을 한다. - button
버튼을 클릭하면 iframe에 textarea에서 작성한 코드를 설정할 것이다. - iframe
textarea에서 작성한 코드가 설정되고 미리보기처럼 코드가 동작할 것이다.
태그 나열하기
태그들의 역할을 정했으니 이제 html5로 태그들을 나열해 보도록 한다.
화면의 레이아웃은 다음으로 미루고 일단은 태그만 나열해 본다.
이름이나 속성은 나중에 정하도록 한다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<button class="" id="" name="">미리보기</button>
</div>
<div>
<textarea class="" id="" name=""></textarea>
</div>
<div>
<iframe class="" id="" name=""></iframe>
</div>
</body>
<!-- // -->
</html>
<!-- // -->조촐하다.
뭐, 제목은 거창하다.
실시간 코드에디터라고 했지만 정작 사용할 태그는 별 거 없다.
처음부터 큰 기대보다는 할 수 있는 아주 작은 것부터 필요한 기능부터 만들어 나가는 것이 좋다.
결화면을 보자.
조촐하기 그지 없다.
미리보기에 대한 기능은 다음으로 미루고 여기까지는 태그만 나열해 보았다.
아마 여기까지 읽은 분이라면 어떤 것을 어떻게 하면 되는지 감이 왓을 것이다.
반응형
'programming > web' 카테고리의 다른 글
| 3번째 실시간 코드 에디터 동작 구현 만들기 how to make code editor (0) | 2022.03.03 |
|---|---|
| html5 p 문단 태그 사용하기 컨텐츠의 문단을 구분 using html5 p tag (0) | 2022.03.01 |
| 실시간 코드 에디터 만들기 1번째 준비 how to make code editor (0) | 2022.02.27 |
| html5 h 제목 태그 사용하기 SEO에 중요할 수도 있다. (0) | 2022.02.25 |
| html5 태그 요소의 속성 특징 html tag attributes (0) | 2022.02.24 |
댓글