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

슬래시 구분 + 복사 기능

가이드

 

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 등)에 붙여넣을 수 있습니다