블로그 게시판 태그 구조 레이아웃 자동생성

슬래시 구분 + 복사 기능

입력 텍스트 (줄바꿈은 전부 무시됩니다): HTML 출력:

가이드

 

1. 기본 개념

이 웹페이지는 다음과 같은 특수 토큰을 가진 텍스트를 입력하면, 이를 HTML 코드로 자동 변환해줍니다.

1. 줄 끝 토큰
   • /n : <p> 태그로 감싸기 (한 문단)
   • //n : <h2> 태그로 감싸기 (제목)
   • ///n : <h3> 태그로 감싸기 (소제목)
2. 이미지 변환
   • 줄 시작이 img: (또는 img :)로 시작하면, 그 뒤 오는 주소를 <img src="..."> 태그로 변환.
     • 예) img:https://example.com/foo.jpg
     • 예) img: https://example.com/foo.jpg
     • 이미지가 <p>나 <h2>, <h3>와도 조합될 수 있음. (줄 끝 토큰을 함께 쓰면 해당 태그 안에 <img>가 들어갑니다.)
3. 그 외 (특수 토큰이 없는 라인)
   • 그냥 텍스트로 변환 (태그 없이 그대로 출력)

변환된 최종 HTML 코드는 <article> ... </article>로 감싸져서 하나의 문자열로 만들어집니다.
브라우저 화면에는 HTML이 “렌더링”된 결과가 아닌, “소스 코드” 그대로 표시되므로, 결과물을 복사하여 다른 곳(블로그 등)에 붙여 넣을 수 있습니다.

---

2. 실행 방법

2. 사용 시나리오

   1. 입력 창(textarea)에 여러 줄 텍스트를 작성합니다.
      아래는 예시입니다.
      나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄// 나랏말싸미 듕귁에 달아 문자와로 서르 사맛디 아니할쎄/// 나랏말싸미 듕귁에 달아/n 문자와로 서르 사맛디 아니할쎄/
   2. [변환하기] 버튼을 누릅니다.
   3. 아래의 “결과 영역”에 최종 HTML 소스 코드가 나타납니다.
   4. 필요하면 [결과 복사하기] 버튼을 눌러, 클립보드에 해당 코드를 복사합니다.
   5. 복사한 코드를 원하는 곳(편집기, 블로그, CMS 등)에 붙여넣을 수 있습니다