그 곳에 산이 있으니까

포트폴리오를 위한 Next 프로젝트에 다크모드를 적용해보았다. 그래서 내가 했던 과정을 기록할 겸, 정리해보려 한다! 다크모드는 이미 구글에 자료가 넘쳐난다ㅎㅎㅎ 1. Tailwind CSS를 사용하자 Next는 기본적으로 Tailwind CSS 친화적이다. 그런 Tailwind에서 다크모드 기능을 제공한다. https://tailwindcss.com/docs/dark-mode Dark Mode - Tailwind CSS Using Tailwind CSS to style your site in dark mode. tailwindcss.com 해당 링크에 잘 정리되어 있는데, 간단히 설명하자면, 기본 로직은 간단하다. 개발자인 내가 html태그 클래스에 dark를 넣거나 빼면 된다. 이 로직은 위 링크에도..

const 변수 = '개행이 \n되지 않는다' 문제 변수에 문자열을 담아 브라우저에 표현하고 싶었다. 당연히 문자열 사이에 개행문자('\n')를 넣었으니 줄바꿈이 되겠지 싶었으나, 그렇지 않았다. const 변수 = `개행이 되지 않는다` 템플릿 문자열로 띄어쓰기를 해줘도 실패했다. 해결 답은 간단하였다. 브라우저에 텍스트를 표현해주는 태그의 style 속성 white-space의 값이 normal로 되어 있었다. html 기본 값이 normal이라고 한다. white-space: pre를 입력해주니 개행문자와 템플릿 문자열 모두 적용이 된다. white-space 속성으로 위의 사례인 개행과 중복 띄어쓰기를 다룰 수 있다.