HTML, CSS 및 JavaScript를 사용하여 나만의 라이브 웹 편집기 만들기
19368 단어 javascripthtmlcsswebdev
소개
이 자습서에서는 라이브 웹 편집기를 만듭니다. HTML, CSS, JavaScript 코드를 작성하고 결과를 실시간으로 확인할 수 있는 웹 애플리케이션입니다. 이것은 웹 개발을 배우고 코드 스니펫을 테스트하기 위한 훌륭한 도구입니다. iframe 요소를 사용하여 결과를 표시합니다. iframe 요소는 현재 HTML 문서 내에 다른 문서를 삽입하는 데 사용됩니다. iframe 요소의 src 속성은 삽입할 문서의 URL을 지정합니다.
웹 에디터란?
웹 편집기는 HTML, CSS 및 JavaScript 코드를 작성하고 결과를 실시간으로 볼 수 있는 웹 응용 프로그램입니다. 웹 편집기의 용도에는 빠른 프로토타이핑, 쉬운 테스트 및 학습 웹 개발이 포함됩니다.
라이브 웹 편집기란 무엇입니까?
라이브 웹 편집기는 코드의 결과를 실시간으로 표시하는 웹 편집기입니다.
전제 조건
이 자습서를 시작하기 전에 HTML, CSS 및 JavaScript에 대한 기본적인 이해가 있어야 합니다. 또한 DOM과 JavaScript를 사용하여 요소를 선택하는 방법에 대한 기본적인 이해가 있어야 합니다. 마지막으로 iframe 요소에 대한 기본적인 이해가 있어야 합니다.
필요한 소프트웨어:
1단계: HTML 파일 만들기
새 폴더를 만들고 이름을 "live-web-editor"로 지정합니다. 폴더 안에 새 파일을 만들고 이름을 "index.html"로 지정합니다. 코드 편집기에서 파일을 열고 다음 코드를 추가합니다.
<!DOCTYPE html>
<html>
<head>
<title>Real-Time Editor</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script defer type="text/javascript" src="app.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.0.0/split.min.js" integrity="sha512-tTsZnBXEzNdEaqUO9Ok8fUofS73xieiBa54pD/sxOSvayIgItM9MmEM0CnUjA13LDnJT22sfwmjf20+Bo2174g==" crossorigin="anonymous"></script>
</head>
<body>
<div class="container split">
<!-- Text area for Html Code -->
<textarea id="htmlCode" placeholder="Type HTML code here" spellcheck="false" oninput="update(0)" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}if(event.keyCode==8){update(1);}"></textarea>
<!-- Text area for Css Code -->
<textarea id="cssCode" placeholder="Type CSS code here" spellcheck="false" oninput="update(0)" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}if(event.keyCode==8){update(1);}"></textarea>
<!-- Text area for Javascript Code -->
<textarea id="javascriptCode" spellcheck="false" placeholder="Type JavaScript code here" oninput="update(0)" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}if(event.keyCode==8){update(1);}"></textarea>
</div>
<div class="iframe-container split">
<iframe id="viewer"></iframe>
</div>
</body>
</html>
코드 설명을 위해
onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}if(event.keyCode==8){update(1);}
위의 코드는 텍스트 영역의 라이브 렌더링에 사용되며 텍스트 영역에 입력할 때 자동으로 렌더링되며 기본적으로 탭이 텍스트 영역에서 활성화되어 있지 않기 때문에 텍스트 영역에서 탭 활성화에도 사용됩니다.
2단계: CSS 파일 만들기
새 파일을 만들고 이름을 "styles.css"로 지정합니다. 코드 편집기에서 파일을 열고 다음 코드를 추가합니다.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
}
.container{
background: #E7E7E7;
display: flex;
flex-direction: column;
width: 50%;
height: 100vh;
margin: 3px;
}
.container textarea {
background-color: #121212;
border:1px solid #0dddf0;
resize: none;
width: 100%;
height: 33.333%;
font-size: 1.4rem;
padding: 10px;
resize: vertical;
overflow-y: scroll;
color:white;
}
.container textarea:focus {
outline: none;
color:white;
}
.iframe-container{
background: white;
width: 50%;
height: 100vh;
margin: 3px;
}
#viewer{
width: 100%;
height: 100%;
}
.split {
width:100%;
height:100%;
}
.gutter {
cursor: e-resize;
height: 100%;
background: grey;
}
.gutter.gutter-horizontal {
cursor: ew-resize;
}
3단계: JavaScript 파일 생성
새 파일을 만들고 이름을 "app.js"로 지정합니다. 코드 편집기에서 파일을 열고 다음 코드를 추가합니다.
var j=0;
//Function for live Rendering
function update(i) {
if(i==0){
let htmlCode=document.getElementById("htmlCode").value;
let cssCode=document.getElementById("cssCode").value;
let javascriptCode=document.getElementById("javascriptCode").value;
let text=htmlCode+"<style>"+cssCode+"</style>"+"<scri"+"pt>"+javascriptCode+"</scri"+"pt>";
let iframe=document.getElementById('viewer').contentWindow.document;
iframe.open();
iframe.write(text);
iframe.close();
}
else if(i==1){
let htmlCode=document.getElementById("htmlCode").value;
let html=htmlCode.slice(0,htmlCode.length);
document.getElementById("htmlCode").value=html;
j=1;
}
아래 코드에 대한 설명을 위해 텍스트 영역의 값을 가져와서 변수에 저장합니다.
let text=htmlCode+"<style>"+cssCode+"</style>"+"<scri"+"pt>"+javascriptCode+"</scri"+"pt>";
4단계: 프로젝트 실행
모든 파일을 저장하고 라이브 서버 확장을 사용하여 브라우저에서 "index.html"파일을 엽니다. 다음 출력이 표시되어야 합니다.
5단계: 사용해 보세요
이제 텍스트 영역에서 자신의 코드를 시험해보고 iframe에서 출력을 볼 수 있습니다.
텍스트 영역에서 코드를 삭제하여 라이브 렌더링을 테스트하고 iframe에서 출력을 볼 수도 있습니다.
자원
데모
개량
다음과 같은 기능을 추가하여 이 코드 편집기를 개선할 수 있습니다.
결론
이 자습서에서는 HTML, CSS 및 JavaScript를 사용하여 라이브 코드 편집기를 만드는 방법을 배웠습니다. split.js 라이브러리를 사용하여 분할 화면 레이아웃을 만드는 방법도 배웠습니다. 이 코드 편집기를 사용하여 HTML, CSS 및 JavaScript 코드를 테스트할 수 있습니다. 이 코드 편집기를 사용하여 자신의 웹사이트를 만들 수도 있습니다.
작가
Reference
이 문제에 관하여(HTML, CSS 및 JavaScript를 사용하여 나만의 라이브 웹 편집기 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/varshithvhegde/create-your-own-live-web-editor-using-html-css-and-javascript-3j73텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
