무료 html 편집기 추천 :: 에버디벨, w3school

2018. 3. 20. 23:53 생활 꿀팁/제품정보

오늘은 html 편집기 추천 무료 사이트 두 곳을 소개해드리겠습니다. 티스토리 블로그를 운영하거나 워드프레스처럼 아예 하나의 웹사이트를 운영하고 계신다면, HTML 코드와 CSS와 같은 기본적인 코딩에 대해 공부도 같이 하시는 것이 좋은데요. 티스토리에서는 관리화면에서 꾸미기, 스킨 편집, html 편집에서 블로그의 디자인을 이렇게 저렇게 수정해보면서 테스트를 해볼 수 있습니다. 워드프레스는 설치형이나 가입형이나 매번 변경사항을 저장한 다음에 직접 사이트를 새로고침 해서 확인을 해야합니다.


무료 html 편집기 추천

파일질라(Filezilla) FTP 프로그램을 이용하고 계시다면, 수정할 때마다 확인을 누르고 F5키로 새로고침 해서 확인을 해야하는 번거로움이 있습니다.


이럴 때 아주 쉽게 테스트해볼 수 있는 것이 바로 html 편집기라는 것인데요. 어렸을 때 학교 컴퓨터 시간에 잠깐 이용했었던 html 편집기가 생각이 나서 여러 곳을 찾아보니 정말 편하고 여러 기능이 있는 사이트가 있었습니다.

HTML 편집기 무료 두 곳

무료 html 편집기 첫번째 추천 사이트는 바로 HTML뿐만 아니라 CSS, Java script(자바스크립트), jQuery(제이쿼리), MySQL, PHP, LINUX Ubuntu(우분투)까지 여러 웹코딩을 무료로 학습할 수 있는 에버디벨이라는 곳입니다. 

everdevel 에버디벨 : https://goo.gl/Rp7RqX



에버디벨 html 편집기 화면에서 왼쪽에 내가 테스트해보고 싶은 코드를 입력한 후에 화면 가운데 살짝 위에 있는 실행 버튼을 누르면 오른쪽에 내가 입력한 코드대로 출력이 됩니다. HTML이나 CSS를 차근차근 공부하면서 실시간으로 테스트를 해볼 수도 있기 때문에 정말 추천하고 싶은 곳입니다.

html 편집기 무료

두번째는 w3chools라는 곳인데요. 이곳도 에버디벨처럼 여러 HTML, CSS, 자바스크립트, Node.js 등 여러 코드들을 무료로 배울 수 있다는 점이 매우 매력있는 곳입니다. 하지만, 제가 두번째로 추천드린 이유는 에버디벨은 한국어로 되어 있는 반면, w3schools는 영어로 되어 있다는 점입니다. 언어적인 부분을 제외하면 이곳도 매우 좋은 곳입니다.

w3schools : https://goo.gl/Xx5zse



동일하게 왼쪽 화면에 코드를 입력하고 초록색 Run 버튼을 누르면 오른쪽 화면에 입력한 코드대로 출력이 되는 시스템입니다.


그런데 위에 메뉴들을 보면 집 모양과 서랍 모양, 플로피 디스크와 화면전환 버튼이 보이는데요. 서랍모양 버튼을 눌러서 Save Code를 누르거나 플로피 디스크 저장 버튼을 누르면 내가 코딩 테스트를 한 내용들을 웹상에 저장할 수 있습니다.

html 편집기


저장 버튼을 누르고 확인을 누르면, Your Code has been saved라면서 저장이 완료되었다는 문구가 뜨는데요. 그 아래에 파일이 해당 링크 주소에 세이브 되었다고 친절하게 알려주고 있습니다.

굳이 메모장에 복사 붙여넣기 해서 일일이 저장할 수고를 덜어주기 때문에 정말 편리한 기능이라고 할 수 있습니다.


화면 기울기 버튼을 누르면 아래와 같이 창이 왼쪽, 오른쪽이 아니라 위, 아래로 보여지게 되는데요. 이때는 위에가 내가 작업하는 공간이고 아래가 입력한 코드가 실제로 출력이 되는 부분이 되겠습니다. 다시 원래대로 하고 싶다면 화면전환 버튼을 한 번 더 눌러주시면 되겠습니다.


코드는 정말 다양하고 그만큼 배워야할 내용도 많은데요. 매일 조금씩 배워나가보면 내가 생각한대로, 구상하고 싶은대로 웹페이지를 만들 수 있기 때문에 오늘 추천해드린 무료 html 편집기를 통해 여러번 시행착오도 겪으면서 하나씩 내것으로 만들어보시기 바랍니다.

♥ 암호화폐 후원하기 ♥


ⓑ 비트코인(BTC) ⓑ


◆ 이더리움(ETH) ◆


♣ 리플(XRP) ♣

리플 데스티네이션 태그