ProgrammingHTML

HTML 에디터 (jsFiddle,메모장)

html, html editor, html 에디터, jsFiddle, 메모장

jsFiddle을 사용해 HTML 작성하기

jsFiddle을 이용해 아주 쉽게 작성하고 결과를 확인할 수 있습니다.또한 HTML, CSS, JavaScript 코드를 jsFiddle에서 작성한 후에 다른 사람들과 공유할 수 있습니다!!

다른 사람과 공유하고 싶다면 jsFiddle에서 작성한 후 윗 부분에 ‘Embed’ 부분을 클릭 한 후 ‘Embed snippet’ 에서 공유 소스코드를 확인 할 수 있습니다. 이 코드를 다른 사람에게 보내거나 자신의 홈페이지 에서 사용하실 수 있습니다.

1
2
jsFiddle 공유 소스
<script async src="//jsfiddle.net/szktx0gb/6/embed/html,css,result/"></script>

만약 Hexo Blog를 통해 공유하신다고 한다면 jsFiddle에서 작성한 후 윗 부분에 ‘Embed’ 부분을 클릭 한 후 ‘Embed snippet’ 에서 공유 소스코드를 확인 하신 후 ‘shorttag’ 부분에서 jsfiddle.net/ 뒤에 오는 문자를 사용하시면 됩니다.

jsFiddle 공유 소스

1
{% jsfiddle szktx0gb html,css,result %}

HTML 메모장으로 작성하기

메모장으로 HTML을 작성해봅시다. 누구나 다 가지고 있는 메모장을 이용해 html을 작성하고 실행할 수 있습니다. (메모장에 이런 기능이 있는지 몰라서 가져와 봤습니다.)

  1. 컴퓨터의 시작 버튼을 누르고 메모장을 검색하여 메모장을 실행합니다.

  2. 아래에 제가 작성한 HTML 태그를 복사해 메모장에 붙여 넣습니다.

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>

<h1>간단하게 시작하는 HTML</h1>

<p>HYEJIN 블로그.</p>

</body>
</html>
  1. 저장을 합니다.
    메모장의 파일 버튼을 누르고 다른 이름으로 저장을 누릅니다.
    파일의 이름을 “index.html”로 작성하고 저장 버튼 왼쪽의 인코딩 설정을 UTF-8로 해주세요.

메모장 저장 설정

  1. 저장한 html 파일을 열어 봅시다.

메모장으로 실행한 html 파일

따라하시느라 수고하셨어요!! 앞으로도 메모장을 이용해 HTML결과를 쉽게 확인 하실 수 있어요.

HTML의 기초부터 시작하자
Share