![]()
개요저번 글에서 margin, padding, 넓이, 크기와 같은 기본적인 내용을 정리했고, 각종 레이아웃 특성을 Tailwind CSS 방식으로 사용하는 것에 대해 정리했는데 오늘은 Tailwind CSS에서의 Text에 대해 정리해보려고 한다. 1. 글꼴 크기(font-size)Tailwind CSS에서는 기본적으로 다양한 크기의 텍스트를 제공한다. * 대부분의 브라우저에서 1rem = 16px이다.클래스크기text-xs0.75rem = 12pxtext-sm0.875rem = 14pxtext-base1rem = 16pxtext-lg1.125rem = 18pxtext-xl1.25rem = 20pxtext-2xl1.5rem = 24pxtext-3xl1.875rem = 30pxtext-4xl2.25rem ..
![]()
개요이전 글에 정리한 것 처럼, Tailwind CSS는 유틸리티 퍼스트 프레임워크로, 자주 사용하는 속성을 짧은 클래스 형태로 제공하고 있다. 지금부터 이 클래스 형태로 제공되는 Tailwind CSS에 대해 정리해 나갈 것이다. 1. 기본 클래스표를 통해 각 종류에 대해 간단히 정리해보겠다.Padding요소의 내부 여백클래스설명p-4전체 패딩px-4좌우 패딩py-2상하 패딩pt-1, pr-2, pb-3, pl-4방향별 패딩 Margin요소 위부 여백클래스설명m-4전체 마진mx-4좌우 마진my-2상하 마진mt-1, mb-3, mr-4, ml-3방향별 마진Width & Height요소의 너비 조절클래스설명w-1/2부모 요소의 50%w-full100%w-screen뷰포트 전체 너비w-64고정값w-auto내..
![]()
개요Tailwind CSS에서 반응형 디자인을 통해 UI를 구성하는 방법에 대해 정리해보려고 한다. 1. 반응형 디자인(Responsive Design)?반응형 디자인은 사용자의 디바이스 화면 크기나 해상도에 따라서 웹사이트나 앱의 레이아웃과 콘텐츠가 자동으로 조정되는 디자인 방식을 말한다. 고정된 디자인으로 UI를 꾸민다면 모바일, 테플릿, 노트북 처럼 화면 크기가 다른 경우에 UI가 잘릴수도 있고 이상하게 보일 수 있기 때문에 반응형 디자인을 활용해야 한다. 1-1. Tailwind CSS 에서의 반응형 디자인Tailwind CSS는 모바일 퍼스트 라는 방식을 채택하고 있다. * Mobile-First-> 기본 클래스는 가장 작은 화면(모바일)을 대상으로 하고, 스크린 사이즈가 커질수록 클래스에 Br..
![]()
개요직접 만드는 프로젝트로 Tailwind CSS를 적용해서 반응형 디자인을 해보려고 한다. 지금부터 차근차근 하나씩 정리해보고, 실제 프로젝트에 사용해볼거다! 1. Tailwind CSS란? Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 미리 정의된 클래스를 조합해 빠르게 UI를 구성하도록 할 수 있다. *유틸리티 퍼스트(Utility-First)-> 기능별로 쪼개진 작은 클래스들(유틸리티 클래스)을 조합해 UI를 구성하는 방식이다. 예를 들어서, 버튼에 패딩과 배경색을 주고 싶으면 다음과 같이 작성된다 버튼 위의 코드와 같이 사전에 정의된 클래스를 조합해 스타일을 구성하기 때문에 별도의 CSS 작성 없이 빠르게 UI를 구성할 수 있다. 1-1. 특징1) 유틸리티 클래스 기반**-> ..
