HTML 웹 편집기
첨부파일의 압축을 풀고 폴더째 원하는 디렉토리에 업로드합니다.
그누가 깔려 있건 말건 상관이 없습니다.
index.php 의 확장자는 php 지만 php 구문은 하나도 없으며 반응형이라기 보다는 pc, 모바일세로, 모바일가로의 3가지 유형만 배려한 쓰리 포인트형입니다.
편집기의 좌측창에 html, css, 자바스크립트의 코드를 입력하고 결과보기 클릭하면 표현물이 보여집니다.
http://g5.webvision.co.kr/editor/html/
반응형 확인을 위해 결과창의 크기를 퍼센트별로 버튼을 만들었고 제이쿼리를 사용할 경우 js 파일을 같이 불러와야 합니다. 또한 타입스크립트나 scss 는 바닐라나 일반 css 로 바꾸어야 합니다.
./file 디렉토리에는 이 편집기에서 사용한 이미지나 파비콘 등이 들어 있으니 본인이 원하는 식으로 바꿔주세요. 우하단의 홈링크 버튼도 링크페이지를 본인이 원하는대로요.
다음은 좌측창에 미리 코드를 입력시키는 방법입니다.
./code 디렉토리에 원하는 코드를 작성한 후 예를 들어 sir.txt 로 저장합니다.
그리고 겟변수 code=sir 을 주면 그 txt 파일에 입력돤 코드를 아작스로 땡겨옵니다.
가령...
http://g5.webvision.co.kr/editor/html/code/sample.txt 이 코드의 경우
http://g5.webvision.co.kr/editor/html/?code=sample 이와 같은 방식으로 불러옵니다.
만일 코드입력시 좌측창에 코드입력이라는 글자를 지우로 싶다면 가장 하단 </script> 스크립트 마감 바로 앞에 아래의 코드를 넣어주세요.
<script>
inTextarea.onmousedown = () => {
if (inTextarea.style.backgroundImage !== "none") inTextarea.style.backgroundImage = "none";
}
</script>
게시글에는 아이프레임을 적용합니다.
예를 들어 http://g5.webvision.co.kr/free/396 의 경우는 아래처럼 아이프레임을 써 준 것입니다.
<iframe src="http://g5.webvision.co.kr/editor/html/?code=sample" style="width:100%;height:500px;border:none"></iframe>