HTML 에디터 설명 ▽
HTML 코 드 에디터란?
HTML 코드 에디터는 웹브라우저에서 HTML, CSS, JavaScript 코드를 직접 작성하고 실행 결과를 바로 확인할 수 있는 온라인 웹 편집 도구입니다.
별도의 프로그램을 설치하지 않아도 코드를 입력하거나 붙여넣은 뒤 미리보기 화면에서 웹페이지가 어떻게 표시되는지 확인할 수 있습니다.
간단한 HTML 태그를 연습할 때부터 CSS 디자인 수정, JavaScript 테스트, 웹페이지 코드 확인까지 다양하게 활용할 수 있습니다.
특히 코드를 수정할 때마다 브라우저 파일을 따로 저장하고 새로고침하는 과정을 줄일 수 있어 간단한 웹 코딩 연습이나 코드 테스트에 편리합니다.
코드를 작성하고 결과를 바로 확인해 보세요
에디터 왼쪽 코드 영역에 HTML 코드를 직접 입력하거나 기존 코드를 붙여넣어 사용할 수 있습니다.
작성한 코드는 오른쪽 미리보기 화면에서 실제 웹페이지 형태로 확인할 수 있습니다.
Live 기능을 활성화하면 코드를 수정할 때마다 결과가 자동으로 반영되므로 글자 색상, 크기, 여백, 배경색처럼 작은 디자인을 조정할 때 특히 편리합니다.
실시간 반영이 필요하지 않을 때는 Live 기능을 끄고 원하는 시점에 코드를 실행할 수도 있습니다.
<TIP>
처음 HTML을 공부한다면 제목, 문단, 버튼처럼 간단한 요소부터 직접 작성해 보세요. 코드를 조금씩 변경하면서 결과가 어떻게 달라지는지 비교하면 HTML과 CSS의 구조를 이해하는 데 도움이 됩니다.
HTML 코드 에디터 사용법
1. HTML 코드 입력하기
코드 편집 영역에 원하는 HTML 코드를 입력합니다. 기존에 작성해 둔 코드가 있다면 전체 코드를 복사하여 붙여넣어도 됩니다.
HTML 문서 안에 <style>을 이용한 CSS와 <script>를 이용한 JavaScript가 포함되어 있다면 함께 작성하여 테스트할 수 있습니다.
위와 같이 간단한 코드를 입력한 뒤 미리보기에서 결과를 확인해 보세요.
위와 같이 간단한 코드를 입력한 뒤 미리보기에서 결과를 확인해 보세요.
2. Desktop · Tablet · Mobile 화면 확인하기
상단의 Desktop, Tablet, Mobile 버튼을 이용하면 미리보기 영역의 크기를 변경할 수 있습니다.
반응형 웹페이지를 제작할 때는 화면 크기에 따라 레이아웃이 어떻게 달라지는지 확인하는 과정이 중요합니다. 데스크톱에서는 정상적으로 보이지만 모바일에서는 버튼이나 텍스트가 화면 밖으로 벗어나는 경우가 있기 때문에 여러 화면 크기를 번갈아 확인해 보는 것이 좋습니다.
3. Live로 실시간 결과 확인하기
Live 옵션을 켜면 코드가 변경될 때 미리보기 결과도 자동으로 업데이트됩니다.
예를 들어 CSS에서 다음 값을 바꾸면서
실제 디자인이 어떻게 달라지는지 바로 비교할 수 있습니다. 색상이나 간격처럼 여러 값을 반복해서 조정해야 할 때 유용합니다.
4. 자동정렬로 코드 정리하기
복사한 HTML 코드의 들여쓰기나 줄바꿈이 흐트러져 있다면 자동정렬 기능을 이용해 코드를 보기 좋게 정리할 수 있습니다.
코드가 길어질수록 태그의 시작과 끝을 찾기 어려워지므로 일정한 들여쓰기를 유지하면 HTML 구조를 파악하기 쉬워집니다. 다른 웹페이지나 작업 중인 프로젝트에서 가져온 코드를 확인할 때도 유용하게 활용할 수 있습니다.
5. 코드 검색하기
코드가 길어졌다면 검색 기능을 이용해 원하는 태그, 클래스명, ID 또는 텍스트를 빠르게 찾을 수 있습니다.
예를 들어 다음과 같은 항목을 검색할 수 있습니다.
(검색 결과가 여러 개라면 이전·다음 결과로 이동하면서 필요한 위치를 확인할 수 있습니다)
편집을 편하게 해주는 다양한 기능
단순히 코드를 입력하고 실행하는 것뿐 아니라 실제 코드 편집에 필요한 여러 기능을 함께 사용할 수 있습니다.
코드 복사 기능을 이용하면 작성한 전체 코드를 클립보드로 빠르게 복사할 수 있고, Undo/Redo를 이용하면 이전 편집 상태로 되돌리거나 다시 실행할 수 있습니다
.
현재 작업 중인 줄은 시각적으로 구분되어 긴 코드를 편집할 때 위치를 확인하기 쉽습니다.
괄호 자동완성, 줄 이동·복제·삭제, 주석 처리 등의 편집 기능과 키보드 단축키도 지원하므로 마우스 사용을 줄이고 보다 빠르게 코드를 수정할 수 있습니다.
하단 상태바에서는 현재 줄(Line)과 열(Column), 전체 줄 수, 문자 수 등을 확인할 수 있으며 코드 글자 크기도 원하는 크기로 조절할 수 있습니다.
예제 코드로 HTML을 연습해 보세요
HTML을 처음 접한다면 처음부터 전체 웹페이지 코드를 작성하는 것이 어렵게 느껴질 수 있습니다.
이럴 때는 제공되는 예제 코드를 불러와 구조를 살펴본 뒤 일부 값을 직접 변경해 보는 방법이 좋습니다.
예를 들어 제목의 색상을 변경하거나 버튼의 크기를 키우고, 카드의 모서리를 둥글게 만들어 보세요.
작은 부분부터 수정하면서 미리보기 결과를 비교하면 각각의 HTML 태그와 CSS 속성이 어떤 역할을 하는지 자연스럽게 익힐 수 있습니다.