[N2T] 네이버 에디터와 티스토리 에디터 분석

1. 네이버 에디터

 html을 뜯어 보면 아래와 같다.

 제일 상위에 se-main-container가 있고, 그 아래에 각각 글, 코드, 이미지 단락들이 존재한다.

네이버 블로그의 html

 

 좀 더 상세하게 뜯어본 결과, 네이버 블로그 본문의 구조는 아래와 같다.

se-main-conatiner
┗ se-component se-text ... (글인 경우)
┗ se-component se-code {코드블럭 종류} (코드인 경우)
┗ se-component se-image ... (이미지인 경우)
┗ se-component se-quotation ... (인용구인 경우)
┗ se-component se-horizontalLine {구분선 종류} (구분선인 경우)
┗ se-component se-table (표인 경우)

 

 네이버 블로그에서 자주 쓰는 기능은 [글, 코드블럭, 이미지, 인용구, 구분선, 링크, 바로가기]일 것이다. 수식이나 글자 크기와 같은 요소들도 있겠지만 당장은 이 7가지 기능을 옮기려 한다.

 이 component들은 모두 component-content가 아래에 있고, 그 아래에 section이 존재한다. section 아래에 필요한 정보들이 있다. 대부분 module을 사용하지만 인용구인 경우, 표인 경우에는 container를 사용해서 그 안에 값을 넣어 준다. 구조도는 아래와 같다.

se-component se-[TYPE]
┗ se-component-content
  ┗ se-section se-section-[TYPE]
    ┗ se-module se-module-text (글인 경우)
      ┗ se-text-paragraph (한 문단)
        ┗ a href (링크인 경우)
    ┗ se-module se-module-code (코드인 경우)
    ┗ se-module se-module-image (이미지인 경우)
      se-module se-module-caption (이미지에 캡션이 있는 경우)
    ┗ se-quotation-container (인용구인 경우)
      ┗ se-module se-module-text se-quote (인용구)
        ┗ se-text-paragraph
      ┗ se-module se-module-text se-site (인용구 출처)
        ┗ se-text-paragraph
    ┗ se-module se-module-horizontalLine (구분선인 경우)
    ┗ se-module se-module-oglink (링크 바로가기 정보인 경우)
    ┗ se-table-container (표인 경우)
      ┗ se-table-content

 

 

 

2. 티스토리 에디터

 반면 티스토리 에디터는 HTML로 글 쓰기를 지원하고 있고, 글 쓴 것을 바로바로 볼 수 있다.