본문 바로가기
HTML／CSS

[HTML/CSS] Tailwind 사용해서 indications 있는 input 폼 만들기

by teamnova 2023. 8. 29.

https://stickode.tistory.com/541

 

[ HTML / CSS ] Tailwind CSS 사용해보기

안녕하세요, 오늘은 Tailwind CSS 를 사용해보겠습니다. Tailwind 는 CSS 프레임워크 중 하나로, HTML 안에서 CSS 스타일을 쉽고 빠르게 만들 수 있게 도와줍니다. 스타일 코드가 HTML 안에 있기 때문에 HTML

stickode.tistory.com

HTML과 Tailwind CSS 를 사용해 indications이 있는 Input 폼을 만들어 보겠습니다.

tailwind 사용방법은 위의 게시글로 확인해주세요.

 

우선 결과물 먼저 보여드리겠습니다.

다음은 전체 코드입니다.

<!DOCTYPE html>
<html>
<script src="https://cdn.tailwindcss.com"></script>
<div>
<div class="ml-5 w-1/2 relative mt-5">
<label for="with-indications" class="text-gray-700">
Password
<span class="text-red-500 required-dot">
*
</span>
</label>
<input type="password" id="with-indications"
class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
name="passwor" placeholder="Password" />
<div class="grid w-full h-1 grid-cols-12 gap-4 mt-3">
<div class="h-full col-span-3 bg-green-500 rounded">
</div>
<div class="h-full col-span-3 bg-green-500 rounded">
</div>
<div class="h-full col-span-3 bg-green-500 rounded">
</div>
<div class="h-full col-span-3 bg-gray-200 rounded dark:bg-dark-1">
</div>
</div>
<div class="mt-2 text-green-500">
Valid password
</div>
</div>
</div>


</html>

사용한 Tailwind 속성에 대한 자세한 설명은 아래의 링크에서 확인할 수 있습니다.

https://tailwindcss.com/ 

 

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.

tailwindcss.com

 

해당 예제에서 사용한 Tailwind 속성에 대해 설명하겠습니다. 

input 태그에 적용된 tailwind CSS 클래스 입니다.

  • rounded-lg: 요소의 모서리를 둥글게 만듭니다.
  • border-transparent: 테두리 색상을 투명하게 설정합니다.
  • flex-1: 부모 요소의 남은 공간을 차지하도록 요소를 유연하게 만듭니다.
  • appearance-none: 브라우저 기본 스타일링을 제거합니다.
  • border: 테두리를 설정합니다.
  • border-gray-300: 테두리 색상을 회색(#ccc)으로 설정합니다.
  • w-full: 너비를 부모 요소의 100%로 설정합니다.
  • py-2: 위아래(padding-y) 여백을 2단위로 설정합니다.
  • px-4: 좌우(padding-x) 여백을 4단위로 설정합니다.
  • bg-white: 배경색을 흰색으로 설정합니다.
  • text-gray-700: 텍스트 색상을 회색(#333)으로 설정합니다.
  • placeholder-gray-400: 플레이스홀더(입력 필드 내에 힌트로 표시되는 텍스트)의 색상을 회색(#ccc)으로 설정합니다.
  • shadow-sm: 작은 그림자 효과를 추가합니다.
  • text-base: 기본 텍스트 크기를 설정합니다.
  • focus:outline-none: 포커스 상태일 때 아웃라인을 제거합니다.
  • focus:ring-2: 포커스 상태일 때 2단위의 링을 추가합니다.
  • focus:ring-purple-600: 포커스 상태일 때 링의 색상을 보라색(#8b5cf6)으로 설정합니다.
  • focus:border-transparent: 포커스 상태일 때 테두리 색상을 투명하게 설정합니다

다음은 그리드 레이아웃을 사용하는 컨테이너 div 에 대한 설명입니다.

  • class="grid": 그리드 레이아웃을 설정합니다.
  • w-full: 너비를 부모 요소의 100%로 설정합니다.
  • h-1: 높이를 1단위로 설정합니다.
  • grid-cols-12: 그리드 컬럼의 개수를 12로 설정합니다.
  • gap-4: 그리드 요소 사이의 간격을 4단위로 설정합니다.
  • mt-3: 위쪽 여백(margin-top)을 3단위로 설정합니다.

그리드 내의 div 요소에 대한 설명입니다.

  • class="h-full col-span-3 bg-green-500 rounded": 스타일링 클래스를 적용합니다.
  • h-full: 높이를 부모 요소와 같게 설정합니다.
  • col-span-3: 그리드 컬럼을 3개 차지하도록 설정합니다.
  • bg-green-500: 배경색을 녹색(#38a169)으로 설정합니다.
  • rounded: 요소의 모서리를 둥글게 만듭니다.

다른 배경색과 더불어 다크모드일 때의 배경색도 지정하는 그리드 내의 div 요소입니다.

    • bg-gray-200: 배경색을 회색(#f3f4f6)으로 설정합니다.
    • dark:bg-dark-1: 다크 모드에서 배경색을 지정할 수 있는 클래스로, 이 경우에는 배경색이 흰색(#fff)으로 설정됩니다.

이렇게 Tailwind CSS 속성을 활용해 간편하게 html에 스타일을 적용할 수 있습니다. 

'HTML／CSS' 카테고리의 다른 글

[HTML/CSS] 다양한 hover effect를 가진 버튼 만들기  (2) 2023.10.30
[HTML/CSS]스켈레톤 UI: 로딩 애니메이션  (0) 2023.10.27
[HTML/CSS] bootstrap selectbox  (0) 2023.07.12
[HTML/CSS] table contenteditable 속성 사용하기  (0) 2023.06.24
[HTML/CSS] bootstrap Grid, border  (0) 2023.06.12

관련글

티스토리툴바