실시간 HTML & Markdown 웹 에디터

HTML (HyperText Markup Language)은 웹 페이지의 구조를 만드는 데 사용됩니다. 툴바의 버튼을 사용하거나 직접 코드를 입력하세요.

각 버튼 위에 마우스를 올리면 간단한 설명을 볼 수 있습니다.
**주요 태그:** H1(기본 제목), H2/H3 스타일(다양한 스타일 제목), P(문단), B(굵게), I(기울임), U(밑줄), S(취소선), MARK(강조), SMALL(작은글씨), SUP(위첨자), SUB(아래첨자), BR(줄바꿈), HR(수평선), A(링크), IMG(이미지), BUTTON(버튼), UL/OL(목록), DIV(구역), NAV(네비게이션), ARTICLE(글), SECTION(구획), HEADER(머리말), FOOTER(꼬리말), FIGURE(이미지+설명), BLOCKQUOTE(인용), PRE/CODE(코드), TABLE(표), 주석().
'스타일 버튼'을 클릭하여 미리 디자인된 버튼을 삽입할 수 있습니다. 탭 인터페이스를 통해 색상(컬러피커 및 HEX 입력), 크기(가로/세로 패딩 슬라이더), 모양(테두리 둥글기 슬라이더 포함), 효과, 정렬 등 다양한 옵션을 선택하고 실시간으로 미리보면서 조정할 수 있습니다. 모달 내 옵션이 많을 경우 스크롤하여 모든 옵션을 확인할 수 있습니다.
'H2 스타일', 'H3 스타일' 버튼으로 다양한 디자인의 제목을 삽입할 수 있습니다. 선택한 스타일에 대한 CSS 코드도 함께 삽입됩니다.
SEO 팁: 의미 있는 제목(H1-H6) 사용, 이미지에 구체적인 alt 속성 추가, 콘텐츠에 맞는 시맨틱 태그(<article>, <section> 등) 활용은 검색 엔진 최적화에 도움이 됩니다.

Markdown은 텍스트 서식을 지정하는 간단한 방법입니다. 툴바를 사용하거나 직접 마크다운 문법을 입력하세요.

각 버튼 위에 마우스를 올리면 간단한 설명을 볼 수 있습니다.
**주요 문법:** 제목(#), H2/H3 스타일(HTML로 스타일링된 제목 삽입, CSS 코드 포함), 스타일(**굵게**, *기울임*, ~~취소선~~), 목록(- 또는 1.), 할일(- [ ]), 링크([이름](주소)), 이미지(![설명](주소)), 인용(>), 코드(\`인라인\`, \`\`\`블록\`\`\`), 수평선(---), 표, 각주([^1]와 [^1]: 설명).
'버튼 (HTML)' 또는 '스타일 버튼 (HTML)'을 사용하여 Markdown 문서 내에 HTML 버튼 코드를 직접 삽입할 수 있습니다. '스타일 버튼 (HTML)'은 탭 인터페이스를 통해 색상(컬러피커 및 HEX 입력), 크기(가로/세로 패딩 슬라이더), 모양(테두리 둥글기 슬라이더 포함), 효과, 정렬 등 다양한 디자인 옵션을 제공하며, 실시간 미리보기가 가능합니다. 모달 내 옵션이 많을 경우 스크롤하여 모든 옵션을 확인할 수 있습니다.

테두리 둥글기: 4.8 px

테두리 두께: 1 px

테두리 스타일:

그림자 효과:

없음 작게 중간 크게

호버 효과 선택:

없음 어둡게 띄우기 두근거리기

클릭 시 눌리는 효과

아이콘 선택:

아이콘 위치:

왼쪽 오른쪽

도움말