learnTailwindCSS

Tailwind CSS는 별도의 CSS 파일을 작성할 필요 없이, HTML 안에서 유틸리티 클래스를 이용해 빠르게 스타일링할 수 있는 도구입니다.미리 정의된 작은 클래스들을 조합하여 바로 HTML 안에서 원하는 디자인을 만드는 방식입니다. 이로 인해 코드의 재사용성과

tailwind CSS를 사용하여 폰트를 스타일 하는 방법입니다.폰트 크기, 폰트 두께, 텍스트 정렬, 라인 높이 등의 스타일 속성을 Tailwind의 유틸리티 클래스로 빠르게 적용하는 방법을 알아봅니다.폰트 크기 조절 (font-size)Tailwind CSS의 폰트

컨테이너 (Container) 웹 레이아웃에서 콘텐츠 영역을 깔끔하게 정리하고 중앙에 배치하는데 주로 사용됩니다. 웹 페이지의 본문 콘텐츠나 주요 섹션을 지정된 너비 안에서 고정하여 사용자에게 더 직관적인 레이아웃을 제공합니다. 컨테이너는 기본적으로 반응형으로 동작합

데스크탑, 태블릿, 모바일 등 다양한 기기에서 웹사이트 기기의 화면 크기에 맞춰 자동으로 레이아웃을 조정하는 방법어떤 기기를 사용하든 최적의 경험을 제공받을 수 있도록 합니다.Tailwind CSS는 미디어 쿼리를 사용하지 않고, 미리 정의된 브레이크포인트 유틸리티를

Transition은 CSS에서 요소가 상태(값)를 변경할 때, 그 변화를 일정 시간 동안 부드럽게 처리하는 애니메이션입니다. Tailwind CSS는 이러한 전환 효과를 간단하게 구현할 수 있는 유틸리티 클래스를 제공합니다.설명 transition 클래스는 색상,

본 포스트는 기술 블로그 작성을 의뢰받아, 원본 내용을 삭제하지 않고 Tailwind CSS 전문가로서 필요 시 추가 설명만 덧붙여 정리한 글입니다.다크 모드는 현대 운영 체제에서 기본적으로 제공하는 기능으로, Tailwind CSS를 사용하면 웹사이트를 쉽게 다크 모

먼저 바탕화면에 빈 디렉토리를 만들어주고vs code로 들어가서설정부터 해줍니다!윈도우는 Tab + , 키를 입력해 설정으로 들어가준 후작업 영역에 들어가default format을 Prettier설정format on save를 체크 표시tab size는 2로 표시 해

Home의 UI는 좌측에 프로필 사진과 우측에는 간단한 소개가 있도록 만드려고 합니다!shrink-0요소의 축소 비율을 0으로 설정합니다.플렉스 컨테이너에서 요소가 축소되지 않고 고정된 크기를 유지하도록 만듭니다.mr-10요소의 오른쪽 외부 여백을 2.5rem(40px

우선 다크모드를 수동으로 적용하기 위해서는 다크모드의 기본 모드가 미디어이기 때문에 selector로 변경해야 합니다.class="dark" (html 태그에 추가)Tailwind CSS에서 다크 모드를 활성화하기 위한 클래스입니다.이 클래스를 통해 다크 모드가 활성화

화면 사이즈를 줄이게 되면 메뉴가 사라지면서 햄버거 아이콘이 나오는걸 구현하려고 합니다.기존의 UI를 구성하면서 만들었던 사이즈는 가장 작은 사이즈부터 적용이 됩니다.메뉴와 다크모드가 기본 가장 작은 사이즈 일때는 안보이게 하고, md 사이즈 이상일 때부터는 보이게 설