강의 목표
Tailwind CSS의 기초에 대해 학습하고 실습을 진행합니다.
강의 내용 정리
강의시간에 학습한 내용을 정리합니다.
개발환경 세팅하기
- npx create-next-app@latest
추천 익스텐션
- Tailwind CSS IntelliSense
실습하기 - 그라디언트 아이콘
- 그라디언트 아이콘(drop shadow는 제외)
- <span> 태그를 이용하고 너비, 높이를 적당히 지정할 것
- 원 형태로 만들 것
- background-image 속성을 이용해서 그라디언트를 처리
내 코드
export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
{/* 그라디언트 실습코드 */}
<span className="w-[24px] h-[24px] mx-[4px] bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full drop-shadow-[3px_3px_5px_#000000]"></span>
</main>
</div>
);
}- TailwindCSS > background-image > Linear gradients 공식문서를 참고하였습니다.
- 설정값은 크게 3부분으로 그라디언트 방향, 출발 색, 도착 색입니다.
- 원으로 구현해야해서 rounded-full을 부여하였습니다.
- drop-shadow는 시간이 남으면 수행하라고 하셔서 임의로 넣어보기만 했습니다.
정답 코드
- 그라디언트 텍스트
<span className="text-9xl font-bold text-transparent leading-[1.1] px-1 bg-clip-text bg-gradient-to-r from-[#15c064] from-[28.5%] to-[#00d1ff] to-[91.82%]">
TEXT
</span>
- 텍스트 + 그라디언트 배경
<div className="before:-translate-x-[1.25%] before:w-[102.5%] before:h-full before:top-0 before:left-0 absolute bg-gradient-to-r from-[#e9f9f4] via-[#cfebfe] via-[45.31%] to-[#f2eefe] text-[46px] font-bold">
TEXT
</div>
실습하기 - 애니메이티드 버튼
- group, group-hover를 사용
- 1. 호버시 화살표 아이콘이 나타남
- 화살표 아이콘은 다음 코드를 사용
- 2. 호버시 화살표 아이콘이 사라지고 나타남
내 코드
export default function Home() {
return (
<div className="flex flex-col justify-center items-center min-h-screen gap-5">
{/* 애니메이티드 버튼 실습 코드 1 */}
<div className="group flex flex-row w-[200px] h-[100px] bg-blue-300 justify-center items-center gap-5">
<h1 className="text-[30px] font-bold">text</h1>
<svg
className="w-[30px] h-[30px] opacity-0 group-hover:opacity-100 transition duration-150 -translate-x-5 group-hover:translate-x-0 delay-150 ease-in-out"
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
>
<path
d="M17.707 9.293l-5-5a.999.999 0 10-1.414 1.414L14.586 9H3a1 1 0 100 2h11.586l-3.293 3.293a.999.999 0 101.414 1.414l5-5a.999.999 0 000-1.414z"
fill="currentColor"
></path>
</svg>
</div>
{/* 애니메이티드 버튼 실습 코드 2 */}
<div className="group flex flex-row w-[200px] h-[100px] bg-red-300 justify-center items-center gap-5">
<svg
className="w-[30px] h-[30px] opacity-0 group-hover:opacity-100 transition duration-150 -translate-x-5 group-hover:translate-x-0 delay-150 ease-in-out"
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
>
<path
d="M17.707 9.293l-5-5a.999.999 0 10-1.414 1.414L14.586 9H3a1 1 0 100 2h11.586l-3.293 3.293a.999.999 0 101.414 1.414l5-5a.999.999 0 000-1.414z"
fill="currentColor"
></path>
</svg>
<h1 className="text-[30px] font-bold -translate-x-7 group-hover:translate-x-7 duration-150 delay-150">
text
</h1>
<svg
className="w-[30px] h-[30px] opacity-100 group-hover:opacity-0 transition duration-150 translate-x-0 group-hover:translate-x-5 delay-150 ease-in-out"
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
>
<path
d="M17.707 9.293l-5-5a.999.999 0 10-1.414 1.414L14.586 9H3a1 1 0 100 2h11.586l-3.293 3.293a.999.999 0 101.414 1.414l5-5a.999.999 0 000-1.414z"
fill="currentColor"
></path>
</svg>
</div>
</div>
);
}- TailwindCSS > Transitions & Animation > Transition Property 를 참고하였습니다
- 실습 코드 1
- 처음에는 아이콘이 안보여야 하기때문에 기본적으로 hidden을 부여하고 호버를 하면 보이도록 하기위해 group-hover:block으로 처리하려고하였습니다.
- 하지만 group-hover와 hidden을 함께 사용하면 요소가 완전히 숨겨져서 제대로 동작하지 않는 문제가 있어서 투명도를 조절하는 방법으로 해결하였습니다.
- opacity-0 , group-hover:opacity-100 , duration-150으로 자연스럽게 나오도록 처리해주었습니다.
- 이외 나머지 핵심 코드는 다음과 같습니다.
- tarnsition
- 기본적인 전환효과를 사용하기 위해 필요
- -translate-x-5 , group-hover:tranlate-x-0
- 약간 왼쪽에서 중앙으로 이동하는 애니메이션을 위해 필요
- delay
- 호버하고 약간 지연시간을 부여하기위해 필요
- tarnsition
- 실습 코드 2
- 기본적으로 화살표 아이콘 두개 중 하나는 보이고 하나는 안보임
- 호버시 안보이는 화살표 아이콘은 보이고 보이는 화살표 아이콘은 안보이게 되어야함
- 실습 1에서 했듯이 opacity를 사용하여 보이기/숨기기 처리
- 동작도 똑같이 왼쪽에서 오른쪽으로 이동하며 나타나거나 사라지는 것이기 때문에 사실상 동일한 방식으로 코드를 작성하여 처리
- 다만, 텍스트도 같이 움직여야 하기때문에 이번에는 텍스트 왼쪽에서 나타나는 화살표 아이콘이 이동하는만큼 텍스트도 이동해서 마치 화살표와 텍스트가 같이 이동하는 것처럼 스타일 처리하였음
정답 코드
<a
href="https://themes.shopify.com?locale=en"
className="group flex justify-start items-center"
data-component-name=""
>
<span className="underline font-semibold inline-block mr-2">
Theme Store
</span>
<svg
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
className="group-hover:opacity-100 opacity-0 w-4 h-4 inline-block transition-all duration-500 group-hover:translate-x-2 will-change-transform align-bottom"
>
<path
d="M17.707 9.293l-5-5a.999.999 0 10-1.414 1.414L14.586 9H3a1 1 0 100 2h11.586l-3.293 3.293a.999.999 0 101.414 1.414l5-5a.999.999 0 000-1.414z"
fill="currentColor"
></path>
</svg>
</a><div className="w-96">
<a
href="/sell"
className="text-lg overflow-hidden border-b pb-4 font-medium group flex flex-row default:border-black w-4/5"
>
<svg
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
className="motion-reduce:group-hover:-translate-x-full h-6 w-6 origin-left -translate-x-full self-center opacity-0 transition-all duration-500 will-change-transform group-hover:translate-x-0 group-hover:opacity-100"
>
<path
d="M17.707 9.293l-5-5a.999.999 0 10-1.414 1.414L14.586 9H3a1 1 0 100 2h11.586l-3.293 3.293a.999.999 0 101.414 1.414l5-5a.999.999 0 000-1.414z"
fill="currentColor"
></path>
</svg>
<span className="motion-reduce:group-hover:translate-x-0 -translate-x-5 transition-transform duration-500 will-change-transform group-hover:translate-x-2">
Start selling
</span>
<svg
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
className="motion-reduce:group-hover:translate-x-0 ml-auto h-6 w-6 origin-left translate-x-0 self-center justify-self-end opacity-100 transition-all duration-500 will-change-transform group-hover:translate-x-full group-hover:opacity-0"
>
<path
d="M17.707 9.293l-5-5a.999.999 0 10-1.414 1.414L14.586 9H3a1 1 0 100 2h11.586l-3.293 3.293a.999.999 0 101.414 1.414l5-5a.999.999 0 000-1.414z"
fill="currentColor"
></path>
</svg>
</a>
</div>실습하기 - 커스텀 셀렉트
- 커스텀 셀렉터
- nexui의 Select 컴포넌트를 이용하여
- 다음 이미지와 같은 셀렉트 컴포넌트를 만드는데
- 커스텀 색상을 정의한 뒤(codeit_purple: #6500c3)
- 컴포넌트가 포커스 됐을 때는 테두리가 codeit_purple로 바뀌고
- 선택창이 열렸을 때는 아래 두 모서리가 직각이 되며
- chevron 아이콘 애니메이션은 “ease in out” 함수로 애니메이션되고
- chevron 아이콘 애니메이션 지속 기간은 250ms 가 되도록
정답 코드
import { Select, SelectItem } from "@nextui-org/react";
import React from "react";
type Selectable = {
key: string;
label: string;
};
type CustomSelectorProps = {
items: Selectable[];
onSelect: (key: string) => void;
initialItem: Selectable;
};
function CustomSelector(props: CustomSelectorProps) {
const { items, onSelect, initialItem } = props;
const [isOpen, setIsOpen] = React.useState(false);
const triggerRadius = isOpen ? "rounded-t-md rounded-b-none" : "rounded-md";
const listItemHeight = "min-h-12";
return (
<Select
isOpen={isOpen}
onOpenChange={() => setIsOpen((prev) => !prev)}
onSelectionChange={(keys) => {
const selectedKey = Array.from(keys as Set<React.Key>)[0] as string;
onSelect(selectedKey);
}}
variant="bordered"
defaultSelectedKeys={[initialItem.key]}
classNames={{
base: ['max-w-32'],
trigger: [
"border",
listItemHeight,
triggerRadius,
"data-[open=true]:border-codeit_purple",
"data-[focus=true]:border-codeit_purple",
"data-[hover=true]:border-codeit_purple",
],
listbox: "p-0",
selectorIcon: ["!ease-in-out", "!duration-[250ms]"],
}}
selectionMode="single"
disallowEmptySelection
listboxProps={{
variant: "light",
}}
popoverProps={{
offset: 0,
classNames: {
content: [
"p-0",
"border",
"border-default-200",
"shadow-none",
"rounded-b-md rounded-t-none",
],
},
}}
>
{items.map((item) => (
<SelectItem
key={item.key}
classNames={{
base: ["m-0", "text-neutral-400", listItemHeight],
}}
showDivider
hideSelectedIcon
>
{item.label}
</SelectItem>
))}
</Select>
);
}
export default CustomSelector;
반응형
'교육 > 코드잇 스프린트 : 단기심화 5기' 카테고리의 다른 글
| [ 코드잇 스프린트 ] 교육기간 6일차 TIL (3) | 2024.11.15 |
|---|---|
| [ 코드잇 스프린트 ] 교육기간 5일차 TIL (1) | 2024.11.14 |
| [ 코드잇 스프린트 ] 교육기간 4일차 TIL (3) | 2024.11.13 |
| [ 코드잇 스프린트 ] 교육기간 3일차 TIL (0) | 2024.11.12 |
| [ 코드잇 스프린트 ] 교육기간 1일차 TIL (1) | 2024.11.07 |