[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 23 [6주차]

Education/⛺BootCamp

[멋쟁이사자처럼 프론트엔드스쿨 TIL] DAY 23 [6주차]

ds-coding 2024. 8. 28. 00:22

❤️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

Utilities for controlling an element's background color.

tailwindcss.com

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

Utilities for controlling the position of an element's background image.

tailwindcss.com

예시

Class	Properties
bg-bottom	background-position: bottom;

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

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

Utilities for controlling the border radius of an element.

tailwindcss.com

예시

Class	Properties
rounded-full	border-radius: 9999px;

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

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

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

Utilities for controlling the direction of flex items.

tailwindcss.com

예시

Class	Properties
flex-col	flex-direction: column;

Flex Shrink - Tailwind CSS

Utilities for controlling how flex items shrink.

tailwindcss.com

예시

Class	Properties
shrink-0	flex-shrink: 0;

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

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

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

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

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

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

Using utilities to style elements on hover, focus, and more.

tailwindcss.com

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 앞으로 바라는 점

복습 꾸준히 하기
자바스크립트 공부 꼭 하기