이제 코드 에디터 제작의 마지막이다. 보기 편하도록 스타일을 적용해 본다. 스타일을 적용하면 좀 더 보기 편한 화면 구조를 볼 수 있다. html에서 사용자에게 보기 편한 구조를 만드는 것은 중요하다. 자기만 사용하는 것이라면 크게 상관은 없지만 말이다. 코드 에디터의 경우 미리보기를 지원해야 하기 때문에 혼자만 사용하더라도 보기 편한 구조는 만들어 두는 것이 좋다.
실시간 코드 에디터 html css 스타일 적용하기
how to make code editor
코드 에디터의 뼈대는 만들었다.
태그와 css 자바스크립트를 입력해보고 미리보기를 통해 실제로 동작하는 것까지 확인했다.
이제는 화면을 다듬어 보기 편하도록 만들면 된다.
미리보기 동작까지 만들어진 결과물은 이전 포스팅을 참고한다.
태그 정리하기
이전의 포스팅을 보면 입력란인 textarea 와 미리보기 부분인 iframe 부분이 세로로 되어 있다.
이부분이 조금 거슬리고 불편하다.
이 부분을 css 코드로 변경하여 좌우로 배치해 보려고 한다.
먼저 이전에 대충 작성했던 태그를 css 스타일에 적용하기 위해 조금 손질을 해 본다.
코드를 보자.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<button class="" id="" name="" onclick="fnPreview();">미리보기</button>
</div>
<div id="editor-vw">
<div id="code-cont">
<textarea class="" id="code-vw" name="code"></textarea>
</div>
<div id="preview-cont">
<iframe class="" id="preview-vw" name="preview"></iframe>
</div>
</div>
</body>
<!-- // -->
<!-- Script -->
<script>
var fnPreview = function() {
let _code = document.getElementById("code-vw").value;
let _preview = document.getElementById("preview-vw").contentWindow.document;
_preview.open();
_preview.write(_code);
_preview.close();
}
</script>
<!-- // -->
</html>
<!-- // -->위의 코드에서 변경한 부분은 태그 아이디 id="editor-vw" 부분이다.
이 부분을 css의 스타일은 grid를 적용하여 화면 배치를 할 것이다.
좌측에는 코드를 우측에는 미리보기를 두기로 한다.
css 스타일 적용하기
grid 는 편하게 화면배치를 할 수 있도록 해주는 스타일 요소이다.
display 속성의 grid 를 이용하면 화면배치를 편하게 할 수 있다.
이 display 속성을 이용하여 코드 에디터의 화면 배치를 지정해 본다.
코드를 보자.
<style>
#editor-vw {
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 50vh;
}
#code-cont, #preview-cont {
width: 100%;
height: 100%;
}
#code-vw, #preview-vw {
width: 99%;
height: 100%;
}
</style>어려운 것이 없다.
display 속성의 grid 를 이용하여 화면을 좌우로 배치한다.
배치된 곳의 textarea와 iframe의 크기는 최대한 크게 보이도록 width와 height를 지정한다.
전체 코드
이제 전체적인 코드를 보자.
그대로 사용해도 상관없다.
하지만 이전 포스팅을 보고 동작구조만 알면 스타일은 자기만의 스타일로 변형해도 된다.
<!-- HTML 문서임을 정의한다. -->
<!DOCTYPE html>
<!-- html 문서 시작 -->
<html>
<!-- 문서 정보 -->
<head>
<style>
#editor-vw {
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 50vh;
}
#code-cont, #preview-cont {
width: 100%;
height: 100%;
}
#code-vw, #preview-vw {
width: 99%;
height: 100%;
}
</style>
</head>
<!-- // -->
<!-- 문서 내용 -->
<body>
<div>
<button class="" id="" name="" onclick="fnPreview();">미리보기</button>
</div>
<div id="editor-vw">
<div id="code-cont">
<textarea class="" id="code-vw" name="code"></textarea>
</div>
<div id="preview-cont">
<iframe class="" id="preview-vw" name="preview"></iframe>
</div>
</div>
</body>
<!-- // -->
<!-- Script -->
<script>
var fnPreview = function() {
let _code = document.getElementById("code-vw").value;
let _preview = document.getElementById("preview-vw").contentWindow.document;
_preview.open();
_preview.write(_code);
_preview.close();
}
</script>
<!-- // -->
</html>
<!-- // -->결과 화면을 보자.
잘 동작하고 있는 것을 볼 수 있다.
실제로 코드 에디터를 서비스하고 있는 곳들을 보면 태그와 스타일, 자바스크립트를 분리하고 있다.
이것은 실제로 사용하고 제작하는 사람의 목적에 따른다.
'programming > web' 카테고리의 다른 글
| html5 br 줄바꿈 태그 사용 p 태그 비교 using line break br tag (0) | 2022.03.06 |
|---|---|
| html5 p 태그 h 태그 관계 컨텐츠 분리하기 using html5 p tag and h tag (0) | 2022.03.05 |
| 3번째 실시간 코드 에디터 동작 구현 만들기 how to make code editor (0) | 2022.03.03 |
| html5 p 문단 태그 사용하기 컨텐츠의 문단을 구분 using html5 p tag (0) | 2022.03.01 |
| 2번째 실시간 코드 에디터 html5 만들기 how to make code editor (0) | 2022.03.01 |
댓글