티스토리 뷰
포트폴리오 작성페이지에, 웹 에디터의 필요성을 느껴 react quill 라이브러리를 사용하였다.
툴바에 있는 여러 기능을 테스트 해보았는데, 몇몇 기능이 적용되지 않았다.
예시로 글자를 굵게하는 기능이 적용되지 않아서, 관련 요소를 확인해보았다.
분명 요소에는 넣어져있었는데, 스타일에 사용자 에이전트 스타일시트 라는 것이 내가 적용한 속성을 무시하였다.
왜 이런일이 발생하는지 궁금해서, 관련 내용을 찾아보았다.
User agent stylesheet은, 사용자가 명시해두어야 할 속성을 override 해주지 않거나, <!DOCTYPE html> 등으로 html 파일에서 html의 최신 버전을 알려주지 않아 브라우저가 임의로 설정해둔 것으로, 한마디로 각 브라우저마다 정해놓은 CSS의 기본 규칙이다.
따라서 의도치 않거나 설정해두지 않은 태그들에 이 user agent stylesheet가 발생할 경우도 있다.
이번 프로젝트의 경우에는 Styled Components로 CSS를 적용하기 때문에 GlobalsStyle로 전체 설정을 진행하였다.
따라서 관련 태그의 명시를 해주지 않아서 문제가 발생한 것으로 보였다.
추가적으로 태그들의 스타일을 명시하고 다시 실행해보니 잘 적용된 것을 볼 수 있었다.
참고자료:
'프로젝트 > 실물(silmul)' 카테고리의 다른 글
| react quill - image size 조절 (0) | 2023.05.15 |
|---|---|
| react query (0) | 2023.05.15 |
| Quill editor 내부의 사진 서버로 보내기 (0) | 2023.05.14 |
| login 전역상태관리 (0) | 2023.05.12 |
| Redux toolkit (0) | 2023.05.10 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 프론트엔드
- 백준
- SEB 43
- 인적성
- 코테
- 프로젝트
- dictionary
- 그리디 알고리즘
- SEB43기
- React quill
- 감정 일기장
- SEB43
- Redux
- seb
- dfs
- 프리프로젝트
- 브루드포스
- 스택오버플로우
- 다이나믹 프로그래밍
- 개인 프로젝트
- Python
- 기술면접
- BFS
- useContext
- 프로그래머스
- til
- 코드스테이츠
- 감정일기장
- 회고
- SEB 43기
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
글 보관함