23년 4월 26일 흑우집합소 개발노트 (React-Quill과 TailWinCss 사용 시 Html 폰트 적용 문제)
May 04, 2023
React-Quill을 사용하다가…
공지사항과 게시판 기능 때문에 React Quill을 사용하게 되었다.
그리고 게시글을 등록하면 잘 되었다.
근데 입력을 한 뒤에 열람을 하려 했더니 다음과 같이 출력되었다.
내가 분명 h1이랑 h2 등을 적절하게 섞어서 사용했음에도 저렇게 뜨게 되었다.
그래서 뭐가 문제일까 고민을 좀 했었다.
답은 간단했다.
React Quill을 사용해서 글을 작성하면, Html로 코드가 뿌려진다.
<h1>폰트 테스트</h1>
<p><br /></p>
<h2>포온트 테스트</h2>
<p><br /></p>
<p><span style="color: rgb(230, 0, 0);">컬러테스트</span></p>
<p><br /></p>
<p><span style="background-color: rgb(255, 194, 102);">배경색 테스트</span></p>
<p><br /></p>
<p>ㅇㅇㅇㅇㅇ</p>
<p>일반 퐅느</p>
<p><br /></p>
<p><br /></p>
<h2>ㅇㄴㅁㄴㅁㅇㄴㅁㅇㅗ2</h2>
<p><br /></p>
<p>ㅇㄴㅇㅁㄴㅇ</p>
<p><br /></p>그리고 이것을 열람 페이지에서 올릴 때 아래와 같이 코드를 작성해준다.
<div
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(contents),
}}
/>근데 저렇게 적용이 안되는 것은 html 내의 태그가 씹힌다고 유추했다.
그래서 이것저것 찾다가 내가 사용하는 TailWindCss가 문제일 것 같단 생각이 들었다.
대표적인게 Html 태그 중 h1이라는 태그가 있다.
근데 TailWindCss를 쓰면서 저 태그를 쓰면 태그가 동작하지 않는다.
보통은 다음과 같이 클래스 값을 준다.
<div className="text-4xl">h1</div>그럼 저것 때문 아닐까?
역시 예상대로였다.
globals.css에 아래와 같은 내용을 적용했다.
@layer base {
h1 {
@apply text-4xl;
@apply font-bold;
}
h2 {
@apply text-3xl;
@apply font-bold;
}
h3 {
@apply text-2xl;
@apply font-bold;
}
h4 {
@apply text-xl;
@apply font-semibold;
}
}이렇게 하고 나니 잘 동작했다.
