HTML·CSS 편집기

HTML 편집기 사용 방법

콘텐츠 블록, 표, CSS 실험 같은 작은 정적 레이아웃에 사용하세요. HTML·CSS 입력란의 연한 글씨는 예시이며 첫 미리보기는 그 결과입니다. 예시 입력란을 선택하면 빈 상태에서 시작합니다. 빈 채로 벗어나면 연한 예시가 돌아오지만 이전 결과를 복원하거나 내보내기를 활성화하지는 않습니다.

마크업과 스타일을 입력하세요. article 같은 조각이나 전체 HTML 문서의 내용을 붙여넣을 수 있습니다. 지원 요소로 정적 문서를 다시 구성하므로 문서 메타데이터는 유지하지 않습니다. 편집을 시작하면 실제 입력만 사용하고 다른 빈 입력란의 연한 예시는 섞지 않습니다. 입력란 사이를 이동해도 텍스트는 유지됩니다.

미리보기에 표시되는 내용

미리보기는 격리된 별도 페이지입니다. 지원 HTML과 입력한 CSS를 보여 주며 편집기 자체에는 해당 스타일을 적용하지 않습니다. 텍스트, 제목, 목록, 표, 일반 폼 컨트롤, CSS 레이아웃을 확인할 수 있습니다. 내용이 영역보다 크면 스크롤할 수 있습니다. 너비는 편집기 패널을 따르므로 고정 기기 시뮬레이터는 아닙니다.

JavaScript, 이벤트 핸들러, 임베디드 페이지, SVG, 미디어 플레이어, 외부 리소스는 제외하거나 차단합니다. 링크 이동과 폼 제출은 작동하지 않습니다. 외부 이미지, 폰트, 스타일시트, CSS import는 불러오지 않습니다. base64로 삽입한 PNG·JPEG·GIF·WebP는 표시할 수 있습니다. 삭제된 요소·속성은 안내에 표시하고 CSS에서 참조하는 리소스는 문서 정책으로 차단합니다. 입력란에는 지원하지 않는 코드를 포함한 원본이 남아 확인·수정할 수 있습니다.

간단한 예시 두 가지

제목을 만들려면 아래 HTML과 CSS를 입력하세요. 미리보기에 ‘Hello’가 진한 녹색 제목으로 표시됩니다. 태그 사이 텍스트를 바꾸면 문구가, CSS 색상을 바꾸면 표시 색상이 바뀝니다.

목록은 <ul><li>Plan</li><li>Review</li></ul>과 CSS li { margin-bottom: 8px; }를 사용해 보세요. 각 항목 아래 여백이 있는 글머리표 두 개가 나옵니다. 프로젝트에 복사하기 전에 작은 콘텐츠 블록을 확인할 때 유용합니다.

HTML: <h1>Hello</h1>
CSS:  h1 { color: #166534; }

복사 및 다운로드

‘HTML 복사’와 ‘HTML 다운로드’는 현재 미리보기와 같은 정적 문서를 사용합니다. 지원 마크업과 CSS를 UTF-8 page.html 파일 하나로 합치고 제한적인 콘텐츠 정책을 포함합니다. 브라우저로 결과를 보거나 텍스트 편집기로 소스를 확인하세요. 독립적인 정적 초안이며 호스팅된 웹사이트나 스크립트가 작동하는 배포용 앱은 아닙니다.

‘지우기’는 HTML, CSS, 결과를 삭제하며 입력한 코드가 있으면 확인을 요청합니다. 빈 입력란에는 연한 예시가 다시 표시되지만 저장된 사용자 콘텐츠는 아닙니다. 일반 입력은 브라우저의 텍스트 편집 동작을 따릅니다. 변경 후 페이지를 떠나려면 경고가 나오지만 초안을 자동 저장하지는 않습니다. 지원되는 결과를 보관하려면 닫기 전에 정적 HTML 파일을 다운로드하세요.

제한 사항과 문제 해결

합계 100,000자, HTML 노드 3,000개, 중첩 64단계까지 지원합니다. 초과하면 입력은 남고 미리보기·내보내기가 비활성화됩니다. 내용을 줄여 계속하세요. 입력이 비어 있으면 다운로드할 결과가 없습니다.

브라우저는 누락된 닫는 태그를 보완하고 잘못된 CSS 선언을 무시하기도 합니다. 이 편집기는 표준 검증기가 아니므로 미리보기가 보여도 소스의 유효성, 접근성, 서비스 사용 준비를 입증하지 않습니다. 규칙이 적용되지 않으면 선택자와 구문을 확인한 뒤 차단된 외부 파일에 의존하는지 확인하세요. 전체 진단은 본인 프로젝트의 브라우저 개발자 도구로 진행하세요.

자주 묻는 질문