목록웹개발 (16)

멈추지 않는 기록

[Next.js] Next.js + Tailwind에서 커스텀 폰트를 가장 쉽게 적용하는 방법!

🔥 서론 Next.js에서 Tailwind CSS를 사용할 때, 커스텀 폰트를 적용하는 방법은 여러 가지가 있다. 웹사이트의 타이포그래피는 사용자 경험을 좌우하는 중요한 요소 중 하나이며, 올바른 폰트 적용 방식은 성능 최적화와 가독성 개선에 기여한다. 하지만 다양한 방법 중에서도 가장 최적화된 방식을 선택하는 것이 중요하다. 적절한 방법을 선택하지 않으면 불필요한 리소스를 로드하여 성능이 저하될 수 있으며, 웹사이트의 초기 로딩 속도에도 영향을 미칠 수 있다. 이번 포스팅에서는 next/font/local을 활용한 폰트 적용 방법과 전통적인 @font-face를 사용하는 방법을 비교하고, 어떤 방법이 더 좋은지 알아보겠다.   📌 Tailwind CSS에서 폰트 추가 방법 추천 ✅ 추천하는 방법: ..
웹 개발/Next.js 2025. 4. 4. 00:20
[Next.js] "Tailwind CSS Prettier 플러그인의 정렬 우선순위 이해하기!"

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크로, 다양한 스타일을 빠르게 적용할 수 있게 해준다.🚨잠깐!!🚨 Tailwind CSS에 대해서는 아래 글을 참고하자!https://pangil-log.tistory.com/228?category=1316098 [Next.js] "Tailwind CSS: 왜 많은 개발자들이 사랑하는가?"Tailwind CSS란?  Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크로, HTML 요소에 직접 클래스를 적용해 스타일을 지정할 수 있도록 설계되었다.🚨잠깐!!🚨 개별적인 유틸리티 퍼스pangil-log.tistory.com 이 프레임워크는 CSS 스타일을 구성하는 데 있어 개발자가 원하는 모든 구성 ..
웹 개발/Next.js 2025. 3. 26. 02:49
[Next.js] "Tailwind CSS, 더 깔끔하고 예쁘게 정리하는 방법!"

서론 Tailwind CSS를 사용하다 보면 클래스 속성의 순서가 뒤죽박죽이 되거나 통일성이 부족한 경우가 많다. 이런 경우 코드의 가독성이 떨어지고, 특히 협업 시 코드를 이해하는 데 불필요한 시간이 소요될 수 있다. 이를 해결하기 위해 Tailwind CSS의 속성을 자동으로 정렬해주는 Tailwind CSS Prettier 플러그인을 사용해보았다. 이 플러그인은 JSX 또는 HTML 파일 내에서 Tailwind CSS 클래스를 일정한 순서로 정렬하여 코드의 일관성을 유지하고 가독성을 향상시키는 역할을 한다.🚨잠깐!!🚨 Tailwind CSS 클래스의 정렬 우선순위에 대해서는 아래 글을 참고하자!https://pangil-log.tistory.com/233 [Next.js] "Tailwind CS..
웹 개발/Next.js 2025. 3. 26. 02:37
[CSS] "Tailwind CSS 핵심 정리! 유틸리티 클래스로 스타일링 끝내기"

Tailwind CSS는 다양한 스타일을 미리 정의된 유틸리티 클래스로 제공한다.(* 유틸리티 클래스란 특정 스타일을 적용할 수 있도록 미리 정의된 단일 클래스) 대표적인 유틸리티 클래스를 몇 가지 예시로 정리해보자! 색상 (Colors) 1) bg-색상-단계: 배경색 설정  2) text-색상-단계: 글자색 설정글자색 초록  크기 (Sizing) 1) w-숫자: 너비 설정  2) h-숫자: 높이 설정   여백 (Spacing: Margin, Padding) 1) m-숫자: 바깥 여백 (margin)  2) p-숫자: 안쪽 여백 (padding)  (1) 방향별 적용- mt-4: 위쪽 마진mr-2: 오른쪽 마진px-6: 좌우 패딩py-3: 상하 패딩  글꼴 및 텍스트 (Typography) 1) te..
웹 개발/CSS 2025. 3. 26. 00:31
[CSS] "CSS 설계의 혁명! 유틸리티 퍼스트 방식이 뜨는 이유"

Tailwind CSS 방식을 공부하면서 해당 방식이 '유틸리티 퍼스트 방식의 CSS 프레임워크'라는 것을 알게 되었다. 그러나, 유틸리티 퍼스트 방식의 CSS 프레임워크가 무엇인지 궁금해지기 시작했다.   유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크란 미리 정의된 작은 단위(유틸리티) 클래스들을 조합하여 스타일을 적용하는 방식을 말한다.🚨잠깐!!🚨 '미리 정의된 작은 단위 클래스' 에 대해서는 아래 글을 참고하자!https://pangil-log.tistory.com/230 [CSS] "Tailwind CSS 핵심 정리! 유틸리티 클래스로 스타일링 끝내기"Tailwind CSS는 다양한 스타일을 미리 정의된 유틸리티 클래스로 제공한다.(* 유틸리티 클래스란 특정 스타일을 적용..
웹 개발/CSS 2025. 3. 26. 00:30
[Next.js] "Tailwind CSS: 왜 많은 개발자들이 사랑하는가?"

Tailwind CSS란?  Tailwind CSS는 유틸리티 퍼스트(Utility-First) 방식의 CSS 프레임워크로, HTML 요소에 직접 클래스를 적용해 스타일을 지정할 수 있도록 설계되었다.🚨잠깐!!🚨 개별적인 유틸리티 퍼스트 방식의 CSS 프레임워크에 대해서는 아래 글을 참고하자!https://pangil-log.tistory.com/229 [CSS] "CSS 설계의 혁명! 유틸리티 퍼스트 방식이 뜨는 이유"Tailwind CSS 방식을 공부하면서 해당 방식이 '유틸리티 퍼스트 방식의 CSS 프레임워크'라는 것을 알게 되었다. 그러나, 유틸리티 퍼스트 방식의 CSS 프레임워크가 무엇인지 궁금해지기 시작했다.  pangil-log.tistory.com 쉽게 말해, 기존의 CSS 방식과 달리..
웹 개발/Next.js 2025. 3. 26. 00:26
이전 Prev 1 2 Next 다음