코드 html > body, html > body .toastui-editor-contents, html > body .ProseMirror, html > body .toastui-editor-md-code, html > body .toastui-editor-md-code-block { font-family: "my-font", sans-serif; text-underline-position: under; } 사용 font-family: "my-font" 자리에 font-family 명을 쓰면 된다. 출처 유튜브 몰입코딩 아카이브

코드 (JQuery, Tailwindcss) 테마 변경 설명 jquery의 attr을 사용해서 html에 할당된 data-theme값을 변경해주고, 새로고침이 되어도 유지가 되도록 localStorage의 get,set item을 사용하여 저장 / 불러오기를 했다. 참고 https://velog.io/@yijaee/%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0 출처 직접 만들었습니다!

사용법 밑의 코드를 파일로 만들어 import 하여 사용 코드

자동으로 줄바꿈이 되지 않는 특수문자 / 띄어쓰기 없는 영단어 강제 줄바꿈 하는 방법word-break: break-all;실제 코드(tailwind) ${reply.body}

다크모드 명시 라이트모드 명시 코드 test

정의페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의할때 사용기본 문법 One Two Three Four Five Six.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto);}.one { grid-column: 1 / 3; grid-row: 1;}.two { grid-column: 2 / 4; grid-row: 1 / 3;}.three { grid-column: 1; grid-row: 2 / 5;}.four { grid-column: 3..

정의 CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈이다. css 속성 1. flex - 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. flex는 flex-grow, flex-shrink, flex-basis의 단축 속성 2. flex-direction - 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정 3. flex-shrink - flex-item 요소의 flex-shrink 값을 설정하는 속성, flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용, 설정된 숫자값에..

정의 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능이다. 기본 문법 @media (조건) { 스타일 ~~~ } 예시 넓은 화면에서 배경을 red로 @media (min-width: 800px) { .wide-bg-red { /* 화면이 800px 이상이면 배경색이 red로 */ background-color: red; } } 적용 이미지