❤️Liked 느낀 점
예전에 종종 프로젝트를 진행하면서 CSS 프레임워크 중 tailwindCSS를 써본적이 있었지만
몇 개월동안 잘 사용하지 않다보니 거의 모든 부분을 까먹었는데 이번 tailwindCSS 특강을 통해
까먹은 부분을 다시 복습하는 시간이 된 것 같아 좋았습니다!
하지만 수업 후반부로 갈수록 강사님의 템포가 빨라지셔서 실습을 따라하기가 조금 버거웠습니다ㅜㅜ
✏️Learned 공부한 내용
TailwindCSS
미리 정의된 클래스 대신 조합 가능한 유틸리티 클래스를 제공하는 유연한 CSS 프레임워크입니다.
장점
- 빠른 개발 속도 : 미리 정의된 유틸리티 클래스를 사용해 신속하게 UI를 구축할 수 있습니다.
- 유연성과 커스터마이징 : 필요에 따라 쉽게 디자인을 변경하고 확장할 수 있습니다.
- 일관성 있는 디자인 : 표준화된 클래스로 프로젝트 전체의 디자인 일관성이 유지됩니다.
- 낮은 유지보수 비용 : 간결한 코드로 관리와 업데이트가 용이합니다
- 반응형 디자인 구현 용이성 : 내장된 클래스로 쉽게 반응형 레이아웃을 구현합니다.
- 클래스 작명 불필요 : 미리 정의된 클래스 사용으로 작명 고민을 할 필요 없습니다
- 접근성 지원 : 접근성 관련 기능을 쉽게 추가할 수 있습니다.
단점
- CSS 파일 크기 증가 : 많은 유틸리티 클래스 사용 시 파일 크기가 커져 성능에 영향을 줄 수 있습니다.
- 가독성 문제 : HTML에 많은 클래스를 사용하면 코드 가독성이 떨어질 수 있습니다.
- 일관성 유지의 어려움 : Tailwind로 구현 불가능한 스타일의 경우 별도 CSS 파일이 필요합니다.
- 의존성 증가 : 추가적인 코드 설정이 필요합니다
- 모든 프로젝트에 적합하지는 않습니다.
설치
Installation - Tailwind CSS
The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.
tailwindcss.com
Tailwind CSS IntelliSense
vscode에서 Tailwind의 자동완성을 도와주는 확장프로그램입니다.
이 확장프로그램을 설치하면 Tailwind 문법 사용 시 일부만 입력해도 자동완성이 되거나 실제 CSS 스타일 미리보기 등이
가능합니다.
Typography
- 적용 예제
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./../styles/main.css" rel="stylesheet" />
<title>타이포그래피</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css"
integrity="sha512-0qT1XfdzuH6iU1HXY6Ox53EBCSxOesNUu5mx1czNy3u/TQ5QPRmvhJN+Wwxj4OY4NQjQwFVib3UqxFdEQc7BTg=="
crossorigin="anonymous"
/>
</head>
<body class="font-pre">
<h1 class="text-4xl text-center">타이포그래피</h1>
<p class="text-xxs text-slate-300">
모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는
때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에
즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을
대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을
통하여 국민경제의 발전에 노력하여야 한다.
</p>
<p class="w-96 line-clamp-5">
모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는
때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에
즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을
대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을
통하여 국민경제의 발전에 노력하여야 한다.
</p>
</body>
</html>
Font Size - Tailwind CSS
Utilities for controlling the font size of an element.
tailwindcss.com
- 예시
| Class | Properties |
| text-xs | font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */ |
| text-sm | font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */ |
| text-lg | font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */ |
| text-xl | font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */ |
| text-2xl | font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */ |
Font Style - Tailwind CSS
Utilities for controlling the style of text.
tailwindcss.com
- 예시
| Class | Properties |
| italic | font-style: italic; |
Font Weight - Tailwind CSS
Utilities for controlling the font weight of an element.
tailwindcss.com
- 예시
| Class | Properties |
| font-thin | font-weight: 100; |
| font-normal | font-weight: 400; |
| font-medium | font-weight: 700; |
Line Clamp - Tailwind CSS
Utilities for clamping text to a specific number of lines.
tailwindcss.com
- 예시
| Class | Properties |
| line-clamp-5 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; |
Text Align - Tailwind CSS
Utilities for controlling the alignment of text.
tailwindcss.com
- 예시
| Class | Properties |
| text-left | text-align: left; |
Text Color - Tailwind CSS
Utilities for controlling the text color of an element.
tailwindcss.com
Background
- 예제 코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>배경 스타일</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css"
integrity="sha512-0qT1XfdzuH6iU1HXY6Ox53EBCSxOesNUu5mx1czNy3u/TQ5QPRmvhJN+Wwxj4OY4NQjQwFVib3UqxFdEQc7BTg=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./../styles/main.css" />
</head>
<body
class="h-screen font-pre bg-yellow-300 bg-[url(./../img/ediya.jpeg)] bg-no-repeat bg-center bg-[length:200px_100px]"
>
<h1 class="text-center">배경 스타일</h1>
<p class="bg-yellow-500 bg-gradient-to-b from-violet-500 to-fuchsia-500">
모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는
때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에
즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을
대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을
통하여 국민경제의 발전에 노력하여야 한다.
</p>
</body>
</html>
Background Color - Tailwind CSS
Background Color - Tailwind CSS
Utilities for controlling an element's background color.
tailwindcss.com
Background Repeat - Tailwind CSS
Background Repeat - Tailwind CSS
Utilities for controlling the repetition of an element's background image.
tailwindcss.com
- 예시
| Class | Properties |
| bg-no-repeat | background-repeat: no-repeat; |
| bg-repeat-x | background-repeat: repeat-x; |
Background Position - Tailwind CSS
Background Position - Tailwind CSS
Utilities for controlling the position of an element's background image.
tailwindcss.com
- 예시
| Class | Properties |
| bg-bottom | background-position: bottom; |
Background Size - Tailwind CSS
Background Size - Tailwind CSS
Utilities for controlling the background size of an element's background image.
tailwindcss.com
- 예시
| Class | Properties |
| bg-cover | background-size: cover; |
Background Image - Tailwind CSS
Background Image - Tailwind CSS
Utilities for controlling an element's background image.
tailwindcss.com
- 예시(Linear gradients 적용)
<div class="h-14 bg-gradient-to-r from-cyan-500 to-blue-500"></div>
<div class="h-14 bg-gradient-to-r from-sky-500 to-indigo-500"></div>
<div class="h-14 bg-gradient-to-r from-violet-500 to-fuchsia-500"></div>
<div class="h-14 bg-gradient-to-r from-purple-500 to-pink-500"></div>Border
- 예제코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>테두리 스타일</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css"
integrity="sha512-0qT1XfdzuH6iU1HXY6Ox53EBCSxOesNUu5mx1czNy3u/TQ5QPRmvhJN+Wwxj4OY4NQjQwFVib3UqxFdEQc7BTg=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./../styles/main.css" />
</head>
<body>
<h1 class="text-center text-2xl">테두리 스타일</h1>
<p
class="border border-red-500 border-dotted m-10 rounded-full p-5 w-48 h-48 overflow-hidden"
>
모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는
때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에
즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을
대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을
통하여 국민경제의 발전에 노력하여야 한다.
</p>
<p class="hover:ring-2 hover:ring-green-500 focus:ring-4" tabindex="0">
모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는
때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에
즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을
대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을
통하여 국민경제의 발전에 노력하여야 한다.
</p>
</body>
</html>
Border Radius - Tailwind CSS
Border Radius - Tailwind CSS
Utilities for controlling the border radius of an element.
tailwindcss.com
- 예시
| Class | Properties |
| rounded-full | border-radius: 9999px; |
Border Color - Tailwind CSS
Border Color - Tailwind CSS
Utilities for controlling the color of an element's borders.
tailwindcss.com
Border Style - Tailwind CSS
Utilities for controlling the style of an element's borders.
tailwindcss.com
- 예시
| Class | Properties |
| border-dotted | border-style: dotted; |
Ring Width - Tailwind CSS
Ring Width - Tailwind CSS
Utilities for creating outline rings with box-shadows.
tailwindcss.com
- 예시
| Class | Properties |
| ring-2 | box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); |
Ring Color - Tailwind CSS
Ring Color - Tailwind CSS
Utilities for setting the color of outline rings.
tailwindcss.com
Flexbox
- 예제코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>플렉스 박스</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css"
integrity="sha512-0qT1XfdzuH6iU1HXY6Ox53EBCSxOesNUu5mx1czNy3u/TQ5QPRmvhJN+Wwxj4OY4NQjQwFVib3UqxFdEQc7BTg=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./../styles/main.css" />
</head>
<body class="flex justify-center items-center min-h-screen flex-col">
<h1 class="text-2xl">플렉스 박스와 그리드</h1>
<!-- 플렉스 박스를 활용한 레이아웃 -->
<div class="bg-yellow-300 w-96 flex gap-4">
<div class="text-3xl text-blue-700 shrink-0">제목</div>
<div class="flex flex-col gap-4">
<span class="text-2xl text-orange-500 order-1">부제목</span>
<p>
모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가
만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다.
대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는
국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과
정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.
</p>
</div>
</div>
</body>
</html>Flex Direction - Tailwind CSS
Flex Direction - Tailwind CSS
Utilities for controlling the direction of flex items.
tailwindcss.com
- 예시
| Class | Properties |
| flex-col | flex-direction: column; |
Flex Shrink - Tailwind CSS
Flex Shrink - Tailwind CSS
Utilities for controlling how flex items shrink.
tailwindcss.com
- 예시
| Class | Properties |
| shrink-0 | flex-shrink: 0; |
Gap - Tailwind CSS
Gap - Tailwind CSS
Utilities for controlling gutters between grid and flexbox items.
tailwindcss.com
- 예시
| Class | Properties |
| gap-4 | gap: 1rem; /* 16px */ |
Justify Content - Tailwind CSS
Justify Content - Tailwind CSS
Utilities for controlling how flex and grid items are positioned along a container's main axis.
tailwindcss.com
- 예시
| Class | Properties |
| justify-center | justify-content: center; |
Align Items - Tailwind CSS
Align Items - Tailwind CSS
Utilities for controlling how flex and grid items are positioned along a container's cross axis.
tailwindcss.com
- 예시
| Class | Properties |
| items-center | align-items: center; |
Grid
- 예제코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>플렉스 박스와 그리드</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css"
integrity="sha512-0qT1XfdzuH6iU1HXY6Ox53EBCSxOesNUu5mx1czNy3u/TQ5QPRmvhJN+Wwxj4OY4NQjQwFVib3UqxFdEQc7BTg=="
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./../styles/main.css" />
</head>
<body class="flex justify-center items-center min-h-screen flex-col">
<h1 class="text-2xl">그리드</h1>
<!-- 그리드를 활용한 레이아웃 -->
<div
class="bg-green-300 w-96 mt-5 grid grid-cols-[80px_150px] gap-4 place-content-center grid-rows-[100px_1fr]"
>
<h2 class="text-3xl text-blue-700 bg-pink-300 row-span-2">제목</h2>
<h3
class="text-2xl text-orange-500 bg-sky-500 order-1 row-start-1 row-end-2 col-start-2 col-end-3 place-self-center"
>
부제목
</h3>
<p
class="row-start-2 row-end-3 bg-orange-300 col-start-2 col-end-3 w-20 justify-self-end"
>
모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는
때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에
즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을
대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의
개발을 통하여 국민경제의 발전에 노력하여야 한다.
</p>
</div>
</body>
</html>Grid Template Columns - Tailwind CSS
Grid Template Columns - Tailwind CSS
Utilities for specifying the columns in a grid layout.
tailwindcss.com
- 예시
| Class | Properties |
| grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); |
Grid Template Rows - Tailwind CSS
Grid Template Rows - Tailwind CSS
Utilities for specifying the rows in a grid layout.
tailwindcss.com
- 예시
| Class | Properties |
| grid-rows-2 | grid-template-rows: repeat(2, minmax(0, 1fr)); |
Position
- 예제코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>포지션 레이아웃</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css" integrity="sha512-0qT1XfdzuH6iU1HXY6Ox53EBCSxOesNUu5mx1czNy3u/TQ5QPRmvhJN+Wwxj4OY4NQjQwFVib3UqxFdEQc7BTg==" crossorigin="anonymous" />
<link rel="stylesheet" href="./../styles/main.css" />
</head>
<body class="">
<h1 class="text-2xl">포지션 레이아웃</h1>
<div class="bg-yellow-500 p-4 fixed top-0 right-0 z-10">
뷰포트 기반 레이아웃(fixed position)
</div>
<div class="bg-pink-500 p-4 sticky top-0">
Fixed + Relative 형식의 레이아웃(Stiky position)
</div>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
<p>모든 국민은 보건에 관하여 국가의 보호를 받는다. 대통령의 임기가 만료되는 때에는 임기만료 70일 내지 40일전에 후임자를 선거한다. 대통령은 취임에 즈음하여 다음의 선서를 한다. 국회는 국무총리 또는 국무위원의 해임을 대통령에게 건의할 수 있다. 국가는 과학기술의 혁신과 정보 및 인력의 개발을 통하여 국민경제의 발전에 노력하여야 한다.</p>
</body>
</html>
Position - Tailwind CSS
Position - Tailwind CSS
Utilities for controlling how an element is positioned in the DOM.
tailwindcss.com
| Class | Properties |
| fixed | position: fixed; |
| sticky | position: sticky; |
Core Concepts
- 예제코드
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Core Concepts</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.9/variable/pretendardvariable.min.css" integrity="sha512-0qT1XfdzuH6iU1HXY6Ox53EBCSxOesNUu5mx1czNy3u/TQ5QPRmvhJN+Wwxj4OY4NQjQwFVib3UqxFdEQc7BTg==" crossorigin="anonymous" />
<link rel="stylesheet" href="./../styles/main.css" />
<style>
.alignment{
padding-inline: 16px;
padding-block: 10px;
/* width: 100px;
inline-size: 100px;
height: 100px;
block-size: 100px; */
}
</style>
</head>
<body class="flex flex-col justify-center m-10 gap-4 bg-yellow-100 sm:bg-yellow-200 md:bg-yellow-300 lg:bg-yellow-400 xl:bg-yellow-500 2xl:bg-yellow-600">
<h1 class="text-2xl">Core Concepts</h1>
<button class="bg-sky-500 hover:bg-sky-700 p-4 rounded-full self-start focus:bg-sky-950 focus:text-white">수정하기</button>
<button class="alignment rounded-full self-start bg-violet-700 text-white dark:bg-violet-300 dark:text-slate-800">수정하기</button> </body>
</html>
Handling Hover, Focus, and Other States - Tailwind CSS
Handling Hover, Focus, and Other States - Tailwind CSS
Using utilities to style elements on hover, focus, and more.
tailwindcss.com
Responsive Design - Tailwind CSS
Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
tailwindcss.com
Dark Mode - Tailwind CSS
Using Tailwind CSS to style your site in dark mode.
tailwindcss.com
😔Lacked 부족한 점
오랜만에 테일윈드를 사용해보니 클래스 작명을 따로 하지 않아도 되니까 편했지만 기능들이 많다보니 다소 헷갈리는 부분이 많았습니다.
🙏🏻Longed For 앞으로 바라는 점
- 복습 꾸준히 하기
- 자바스크립트 공부 꼭 하기
'Education > ⛺BootCamp' 카테고리의 다른 글
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 21~22 [5~6주차] (2) | 2024.08.26 |
|---|---|
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 19 ~ 20 [5주차] (0) | 2024.08.25 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 18 [5주차] (0) | 2024.08.21 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 17 [5주차] (0) | 2024.08.19 |
| [멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 16 [4주차] (0) | 2024.08.19 |
