개발 과정 리뷰 -15- SummerNote 관련

https://summernote.org/

Summernote - Super Simple WYSIWYG editor

 

위 라이브러리를 가공해서 프로젝트의 input으로 사용하기 위해 많은 시도를 하고 있다.

아래는 시도들 중 오차를 나타낸 것.

 

#1 버전

Summernote-lite 버전을 사용하고 있다. 해당 버전이 CSS와 JS 파일만으로 이루어져 있기 때문에 수정하기 용이하다고 생각했기 때문.

 

#2 CSS font format에 대하여.

CSS를 프로젝트에 적용하는 도중 font쪽에서 오류가 나서 적용하는데 애를 먹었는데,

다음과 같은 구조를 처음 보았다. fromat에 따라 font가 다르게 적용되도록 짠 코드이다.

@font-face {
    font-family: "summernote";
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url("./fonts/summernote.eot");
    src: url("./fonts/summernote.eot?#iefix") format("embedded-opentype"),
    url("./fonts/summernote.woff2") format("woff2"),
    url("./fonts/summernote.woff") format("woff"),
    url("./fonts/summernote.ttf") format("truetype");
}

 

관련 정리 포스트

https://kimdabin.tistory.com/entry/Font-format%EA%B3%BC-font-face-%EC%84%A0%EC%96%B8-%EB%B0%8F-%EC%A0%81%EC%9A%A9%EB%B2%95

[HTML|CSS] Font format과 font-face 선언 및 적용법

 

 

#3 JS 파일 추가와 webpack 설정

웹팩에 jquery 설정 하나 넣지 않아서 과정 없이 어제 오늘 10시간동안 삽질한 js 파일 추가.

externals: {
        jquery: 'jQuery',
}

기존 프로젝트에서 해당 external 없이 jQuery를 분명 사용했는데, 어째서인지 이 파일에만 적용시 사용 가능했다.

jQuery를 npm에서 지우고 html 코드에서 import한게 효과가 있었던건지도 모르겠다.

 

 

#4 CSS icon 수정

.note-icon-align::before {
    content: "1"}

 

before pseudo selector: 기본적으로 inline형식으로 해당 요소 앞에 CSS내부 요소를 추가해준다.

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

::before - CSS: Cascading Style Sheets | MDN

 

content 내부에 있는 요소들이 다 깨져서 직접 url로 svg들을 넣어주기로 했다.

-> 위 MDN 처럼 contents: url() 로 넣을 경우 이미지가 모두 깨져서 나온다. 따라서 네이버 홈페이지 코드를 참고했다.

 

background-image 로 url을 통해 이미지를 넣어주고,

background-size로 이미지 크기, width height로 이미지 창 크기를 설정하는 방식이다.

 

.note-icon-caret::before {
    content: "";
    background-image: url("../img/icons/down.svg");
    background-size: 15px 15px;
    width: 15px;
    height: 15px;
}

 

아래로 가는 화살표 이미지가 잘 적용되었다.

 

이를 하던 중 재밌었던건 네이버는 큰 이미지에 작은 아이콘들을 넣고 위치를 옮겨가며 아이콘을 띄운다는 점이었다.

 

아마도 이미지를 여러개 불러와야하는 부하를 줄이고, 하나의 이미지에 background-position을 통해 창 위치를 다르게해서 아이콘을 다르게 만들어주는 것인듯 싶었다.

 

#5 summer note 내부 글자 높이 등 css 수정

.note-editor .note-editable {
    line-height: 1.5;
}

위 코드로 지정하여서 css를 추가해주었다.