728x90

utility 우선 프레임워크

TailwindCSS
마크업에서 직접 모든 디자인을 구축하도록 구성할 수 있는 flex, pt-4, text-center 및 rotate-90과 같은 다양한 클래스로 가득 찬 유틸리티 최초의 CSS 프레임워크입니다.
https://tailwindcss.com

Tailwind CSS IntelliSense (확장 프로그램)
Tailwind CSS IntelliSense는 Visual Studio Code 사용자에게 자동 완성, 구문 강조 표시 및 린팅과 같은 고급 기능을 제공하여 Tailwind 개발 환경을 향상시킵니다.
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

TailwindCSS 클래스 검색 사이트
https://tailwind.spacet.me/
https://tailwind.build/classes

rem = document font 사이즈 기준으로 하므로

브라우저에 따른 사이즈를 가질 수 있게해 반응형 사용하기 용이

자동완성이 뜨지 않는다면 ctrl +space

space-y-5

자식요소들에게 y축에 5만큼 여백을 줌

맨 위 요소만 자동으로 padding-top 적용 안시킴

<div className="bg-slate-400 py-10 flex flex-col space-y-5 "> //space-y-5 자식요소들

</div>

mx-auto border-dashed

import type { NextPage } from "next";

const Home: NextPage = () => {

return (

<span className="text-3xl font-semibold">Select Item</span>

<span className="text-gray-500">Grey Chair</span>

</div>

<span className="text-gray-500">Grey Chair</span>

</div>

<span>Total</span>

</div>

Checkout

</div>

</div>

);

};

export default Home;

const Home: NextPage = () => {

return (

<span className="text-3xl font-semibold">Select Item</span>

<span className="text-gray-500">Grey Chair</span>

</div>

<span className="text-gray-500">Grey Chair</span>

</div>

<span>Total</span>

</div>

Checkout

</div>

<span className=" text-2xl text-white">Profile</span>

</div>

Orders

</span>

</div>

<span className="text-sm text-gray-500">Spent</span>

</div>

Tony Mollloy

</span>

</div>

</div>

);

};

</div>

Swoon Lounge

</span>

<span className="text-xs text-gray-500 ">Chair</span>

</div>

</button>

</button>

</div>

Add to cart

</button>

</div>

aspect-square

css

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

tailwind

https://tailwindcss.com/docs/aspect-ratio

ClassProperties

aspect-auto	aspect-ratio: auto;
aspect-square	aspect-ratio: 1 / 1;
aspect-video	aspect-ratio: 16 / 9;

min-h-screen

ClassProperties

min-h-full	min-height: 100%;
min-h-screen	min-height: 100vh;

https://tailwindcss.com/docs/min-height

Min-Height - Tailwind CSS

Utilities for setting the minimum height of an element.

tailwindcss.com

helper function// space-x-3
자식에게 ml,mr 할필요 x

modifer

ex)

className=""
hover:속성
hover:text-black
hover:bg-teal-500
active:bg-yellow-500
focus:text-red-500

TailwindCSS Modifier 리스트

기본적으로 Tailwind에 포함된 모든 단일 modifier들입니다.
(~일 때 실행하는 것들)
```
Modifier(왼쪽), CSS(오른쪽)
hover (&:hover)
focus (&:focus)
active (&:active)
first (&:first-child)
disabled (&:disabled)
sm (@media (min-width: 640px))
md ( @media (min-width: 768px))
lg (@media (min-width: 1024px))
dark (@media (prefers-color-scheme: dark))
등등
```
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

ring-2 //링 두께

ring-offset-2// 링거리

ring-yellow-500 //링 색

</div>

테일윈드는 수 많은 클래스로 이루어져있다.

예를들면 bg-yellow-500에 커서를 올리면 나오는 수 많은 class안에 있는 변수로 변경가능
bg-opacity:2로 bg-yellow-500 속성이 변경 됨

Ring Width
상자 그림자가 있는 윤곽선을 만들기 위한 유틸리티입니다.
ring-{width} 유틸리티를 사용하여 특정 두께의 solid box-shadow를 요소에 적용합니다. 링은 기본적으로 반투명한 파란색으로 많은 시스템의 기본 포커스 링 스타일과 유사합니다.
ex) ring-2 ring-offset-2 focus:ring-2 ring-red-500
```
button class="ring-2 ring-offset-2 focus:ring-2"
div class="ring-2 hover:ring-4 md:ring-4"
```
https://tailwindcss.com/docs/ring-width

<span className=" text-2xl text-white">Profile</span>

</div>

Orders

</span>

</div>

group

상위(부모) 상태를 기반으로 한 스타일 지정
일부 부모 요소의 상태를 기반으로 요소의 스타일을 지정해야 하는 경우 부모를 group 클래스로 표시하고 group-hover와 같은 group-* 수정자를 사용하여 대상 요소의 스타일을 지정합니다.
이 패턴은 group-focus, group-active 또는 group-odd와 같은 모든 유사 클래스 수정자와 함께 작동합니다.
```
< a href="#" class="group">
< h3 class="group-hover:text-white">New project< /h3>
< /a>
```
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

peer

형제 상태를 기반으로 한 스타일 지정
형제 요소의 상태를 기반으로 요소의 스타일을 지정해야 하는 경우 형제를 peer 클래스로 표시하고 peer-invalid와 같은 peer-* 수정자를 사용하여 대상 요소의 스타일을 지정합니다. 이 패턴은 모든 유사 클래스 수정자(예: peer-focus, peer-required 및 peer-disabled)와 함께 작동합니다.
< input class="peer"/ >
< p class="peer-invalid:visible"> Pizza< /p>
```
https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

Handling Hover, Focus, and Other States - Tailwind CSS

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

tailwindcss.com

list 다룰 때 쉬운 modifer

first: last:
자식 컴포넌트가 하나일 때
onlyChild의 only:
odd:
even:
배열이 빌 때
empty: hidden

form 다룰 때 쉬운 modifer

group modifer
className group을 주고
modfied 하고싶은 item에 group-hover:bg-red-300
focus-within:bg~
required 일 때
required:border-2 bg-yelo-300
invalid:bg-red-500
placeholder를 보이고있을 때
placeholder-shown:bg-yeelo-300

disabled일 때
disabled:opacity-0

peer modifier 사람들이 많있느느 패턴을 implement해줌
peer는 peer selector보다 앞에 위치해야함
state에 따라 css modify 할 수 잇게해줌
~ sbliing selector css에도있는ㄴ기능

https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state

https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer ..."/>
    <p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
      Please provide a valid email address.
    </p>
  </label>
</form>

details
HTML details 요소는 "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성합니다. 요약이나 레이블은 summary 요소를 통해 제공할 수 있습니다. 정보 공개 위젯은 보통 레이블 옆의 작은 삼각형이 돌아가면서 열림/닫힘 상태를 나타냅니다. details 요소의 첫 번째 자식이 summary 요소라면, summary의 콘텐츠를 위젯의 레이블로 사용합니다.
```
< details>
< summary>Details
Something small enough to escape casual notice.
< /details>
```
https://developer.mozilla.org/ko/docs/Web/HTML/Element/details

File input buttons
파일 수정자를 사용하여 파일 입력의 버튼 스타일 지정
ex) file:mr-4 file:py-2 file:px-4
https://tailwindcss.com/docs/hover-focus-and-other-states?email=george%40krugerindustrial&password=Bosco#file-input-buttons

::file-selector-button
::file-selector-button CSS 의사 요소는 type="file"의 input 버튼을 나타냅니다.
ex) input[type=file]::file-selector-button
https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button

::file-selector-button - CSS: Cascading Style Sheets | MDN

The ::file-selector-button CSS pseudo-element represents the button of an <input> of type="file".

developer.mozilla.org

반응형디자인
대부분 desktop->mobile버전
tailwind css 모바일 먼저 적용하고 그 다음 큰 화면을 위한 선택자가 잇음
모바일만 타켓으로하는 선택자는 없음
반응형 modifier은 그다음 modifier들에 의해 정지됌

Mobile First

기본적으로 Tailwind는 Bootstrap과 같은 다른 프레임워크에서 사용하는 것과 유사한 모바일 우선 breakpoint 시스템을 사용합니다. 이것이 의미하는 바는 접두사가 붙지 않은 유틸리티(예: uppercase)는 모든 화면 크기에 적용되는 반면 접두사가 붙은 유틸리티(예: md:uppercase)는 지정된 breakpoint 이상에서만 적용됩니다.

이 접근 방식이 사람들을 가장 자주 놀라게 하는 부분은 모바일용으로 스타일을 지정하려면 sm: 접두사가 붙은 버전이 아니라 접두사가 없는 버전의 유틸리티를 사용해야 한다는 것입니다. sm을 "작은 화면에서"를 의미하는 것으로 생각하지 마십시오. "작은 breakpoint"로 생각하십시오.
div class="sm:text-center" => 작은 사이즈 (not 모바일)

이러한 이유로 디자인을 위한 모바일 레이아웃을 먼저 구현한 다음 sm 화면에 적합한 변경 사항을 레이어링한 다음 md 화면 등을 적용하는 것이 좋습니다.
```
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }
```
https://tailwindcss.com/docs/responsive-design#mobile-first

Customizing breakpoints
https://tailwindcss.com/docs/responsive-design#customizing-breakpoints

col-span-2

col-span-1	grid-column: span 1 / span 1;
col-span-2	grid-column: span 2 / span 2;

grid 속성 place-content-center

place-content

The place-content CSS shorthand property allows you to align content along both the block and inline directions at once (i.e. the align-content and justify-content properties) in a relevant layout system such as Grid or Flexbox

세로축 가로축

landscape:bg-teal-500 portrait:bg-yellow-400

Viewport orientation

portrait 및 landscape 수정자를 사용하여 뷰포트가 특정 방향에 있을 때 조건부로 스타일을 추가합니다.
```
div class="portrait:hidden"
div class="landscape:hidden"
```
https://tailwindcss.com/docs/hover-focus-and-other-states#viewport-orientation

다크모드

Tailwind에는 dark 모드가 활성화되어 있을 때 사이트 스타일을 다르게 지정할 수 있습니다. 현재 사용 중인 컴퓨터에서 설정한 라이트 모드 또는 다크 모드에 따라 dark가 자동으로 적용됩니다.
ex) dark:bg-slate-900
https://tailwindcss.com/docs/dark-mode
테일윈드 css에서 조작하기 매우 쉬ㅁ움
기본적으로 브라우저 설정을 따라감
dark:
중첩도가능
dark:hover:bg-black-500

Dark Mode - Tailwind CSS

Using Tailwind CSS to style your site in dark mode.

tailwindcss.com

브라우저 설정 따라가지않고 수동으로 아이콘 선택할 때
tailwind.config.css
에서 컴퓨터 다크모드 설정을 따라 갈껀지, 리엑트나 js로 직접 토글 시킬지 설정해야함.
darkMode:"media"// 다크모드 설정은 환경설정을 따라감
darkMode:"class"//엘리먼트의 부모에 넣으면 해당 엘리먼트에 한 해 다크모드를 수동으로 활성화 할 수 있다.
사용법 예) 유저가 버튼을 클릭하면 state에 넣어놓고 html태그에 dark클래스 추가

Dark Mode

수동으로 다크 모드 전환
운영 체제 기본 설정에 의존하는 대신 수동으로 다크 모드 전환을 지원하려면 media 대신 class을 사용하십시오.
```
// tailwind.config.js
module.exports = {
// 클래스를 기준으로 다크모드 적용 (최상위 부모에 dark클래스 지정)
darkMode: 'class',

// @media(prefers-color-scheme)를 기준으로 다크모드 적용 (기본 값)
darkMode: "media",
}
```
https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

prefers-color-scheme
prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.
```
@media (prefers-color-scheme: light) {
.themed {
background: white;
color: black;
}
}
```
https://developer.mozilla.org/ko/docs/Web/CSS/@media/prefers-color-scheme
tailwind css 3.0 이 전에는just intime 컴파일러 때문에 중첩 클래스가 불가능 햇음.
진짜 큰 css 파일 이였기때문에 컴파일 시에 사용하지 않는 걸 지우는 형식
필요에 따라 생성되는 방식
테일윈드에 제약 받지않고 다음과 같이 원하는 사이즈나 컬러등  지정가능
text-[px]
text-[#000]
bg-[url(`/vercel.svg`)]
Migrating to the JIT engine

2021년 3월에 발표한 새로운 Just-in-Time 엔진이 Tailwind CSS v3.0의 클래식 엔진을 대체했습니다. 새로운 엔진은 프로젝트에 필요한 스타일을 주문형으로 생성합니다.

Tailwind CSS v3.0 이전: 거대한 CSS파일을 생성하고, 그 파일에 이미 정의해놓은 클래스들을 가져와 사용하는 방식.
대략 20만줄 정도 되는 클래스로 가득찬 파일을 가져와 개발 단계에서 사용하기 때문에 매우 무겁고, 배포 전에는 purge를 해줘야 해서 번거로움

Tailwind CSS v3.0이후: 사용자가 사용하는 스타일들만 그때 그때 생성해서 사용하는 방식. 여러 클래스들을 조합해서 사용할 수 있고, 매우 가볍고, 배포 전 purge를 해주지 않아도 되서 편함

https://tailwindcss.com/docs/upgrade-guide#migrating-to-the-jit-engine
libs/utils
function cls(...classnames: string[]) {
    return classnames.join(" ");
}
  <button
                            className={cls(
                                "pb-4 font-medium text-sm border-b-2",
                                method === "phone"
                                    ? "border-orange-500 text-orange-400"
                                    : "border-transparent hover:text-gray-400"
                            )}
                            onClick={onPhoneClick}
                        >

함수 사용하기 전 className={`"pb-4 font-medium text-sm border-b-2"

     method === "phone"
                                    ? "border-orange-500 text-orange-400"
                                    : "border-transparent hover:text-gray-400"

)`}
배열이아닌데 type이 []로 정해져있어서 검색해보니
... 는 spread 연산자 뿐만아니라 rest파라미터의 뜻도 갖고있다.
❗️Rest 파라미터
Rest 파라미터(나머지 매개변수) 구문을 구조 분해 할당 문법과 같이 사용하면 나머지 (객체, 배열)을 rest에 담아서 추출할 수 있다.
Rest 파라미터(나머지 매개변수) 구문을 사용하면 함수에서 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.

rest의 생김새가 spread와 비슷하지만 역할은 매우 다르다.
rest는 객체, 배열, 함수의 매개변수에서 사용가능하다.
rest는 객체와 배열에서 사용할 때는 구조 분해 할당 문법과 함께 사용된다.
사용할 때는 주로 rest 라는 키워드를 사용하게 되는데 추출값의 이름이 꼭 rest 일 필요는 없다.
👉 함수 매개변수에서의 rest
함수의 매개변수가 몇 개가 될지 모르는 상황에서 rest 매개변수를 사용하면 유용하다.
result 가 가리키고 있는 것은 함수에서 받아온 매개변수들로 이뤄진 배열이다. 즉, 매개변수가 배열 형식으로 들어온다.
조 분해 (Destructing)
구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.
의미있는 변수로 만들어 편하게 사용할 수 있도록 자바스크립트에서 ‘구조분해할당’을 제공해주었다.
// 구조 분해 할당
let a = [1, 2, 3, 4];
let [one, two, three, four] = a;
one // 1
two // 2

css 요소
Plugins
재사용 가능한 타사 플러그인으로 Tailwind 플러그인을 사용하면 CSS 대신 JavaScript를 사용하여 사용자의 스타일시트에 삽입할 Tailwind에 대한 새 스타일을 등록할 수 있습니다.
https://tailwindcss.com/docs/plugins

@tailwindcss/forms
(form요소에 다양한 기본 스타일을 추가해줍니다.)

form의 기본 스타을 갖도록해주는 plugin
form 요소를 유틸리티로 쉽게 재정의할 수 있도록 하는 form 스타일에 대한 기본 reset을 제공하는 플러그인입니다. @tailwindcss/forms 플러그인은 유틸리티 클래스를 사용하여 form 요소의 스타일을 쉽게 지정할 수 있도록 하는 독창적인 form reset layer를 추가합니다.
npm install -D @tailwindcss/forms

@tailwindcss/forms 플러그인 설치 후, tailwind.config.js에 아래와 같이 plugins에 추가
```
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
// ...
],
}
```
https://tailwindcss.com/docs/plugins#forms
https://github.com/tailwindlabs/tailwindcss-forms

user-select

CSS user-select 속성은 사용자가 텍스트를 선택할 수 있는지 지정합니다.
ex) user-select: none;
https://developer.mozilla.org/ko/docs/Web/CSS/user-select
select:none
이 경우 클릭이나 드래그로 선택할 수 없습니다.

저도 임의로 배열 만들때 자주 사용하는 방식인데
[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1].map 대신 [...Array(10)].map으로도 가능합니다.

Space Between (space-x, space-y)
자식 요소 사이의 공간을 제어하기 위한 유틸리티입니다.
https://tailwindcss.com/docs/space#add-vertical-space-between-children

Space Between - Tailwind CSS

Utilities for controlling the space between child elements.

tailwindcss.com

매우 유용한 CSS 선택자 중 :focus-within이 존재합니다. :focus-within은 폼 엘리먼트에 사용하며 방문자의 포커스된 엘리먼트에 스타일을 부여할 수 있는 매우 유용한 선택자입니다. 특징으로는 부모 요소에 사용하면 내부 자식 요소에 포커스 된 경우까지 스타일을 쉽게 적용됩니다.선택자입니다. 특징으로는 부모 요소에 사용하면 내부 자식 요소에 포커스 된 경우까지 스타일을 쉽게 적용됩니다.

point-events-none

pointer-events 는 HTML 요소들의 마우스/터치 이벤트들(CSS hover/active, JS click/tap, 커서 드래그등)의 응답을 조정할 수 있는 속성이다.

inline-flex

일반적으로 flex는 display:block이고

inline-flex는 container가 display:inline 임

divide-y divide-y-2 divide-x-[1px]

형제요소가 있으면 구분 선을 줌

https://tailwindcss.com/docs/divide-width

Divide Width - Tailwind CSS

Utilities for controlling the border width between elements.

tailwindcss.com

divde-컬러

대화 주고 받는거 만드는 중에

Flex-row-reverse —> space-x 해놓은 여백 사라져서 space-x-reverse 추가 함

inset-0

ClassProperties

inset-0	top: 0px; right: 0px; bottom: 0px; left: 0px;
inset-x-0	left: 0px; right: 0px;
inset-y-0	top: 0px; bottom: 0px;

Outline-none

input 태그 활성화 될 때 하이라이트 표시되서 적용 함.

Aspect-video
Aspect-square rounded-full(원형 만들 때)//

Css속성임

video 아이콘 복사할 때 SVG가 아닌 JSX로 복사해오시면 속성 수정하지 않고 바로 사용가능합니다. (Copy JSX)
https://heroicons.dev

Heroicons

Heroicons is a collection of MIT open source interface icons for web and app development. Icons are free, no attribution required. Icons by @steveschoger. Website by @username_ZAYDEK.

heroicons.dev

혹시 스크롤바를 안 보이게 숨기고 싶으신 분들은 globals.css에 아래 속성을 추가해주시면 됩니다.
```
body{
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
```

5.16
Max-Width

요소의 최대 너비를 설정하는 유틸리티입니다.
```
max-w-none => max-width: none;
max-w-xs => max-width: 20rem; /* 320px */
max-w-sm => max-width: 24rem; /* 384px */
max-w-md => max-width: 28rem; /* 448px */
max-w-lg => max-width: 32rem; /* 512px */
max-w-full => max-width: 100%;
max-w-screen-sm => max-width: 640px;
max-w-screen-md => max-width: 768px;
max-w-screen-lg => max-width: 1024px;
max-w-screen-xl => max-width: 1280px;
등등
```
대괄호를 사용하여 임의의 값을 사용하여 즉시 속성을 생성할 수도 있습니다.
div class="max-w-[50%]"

https://tailwindcss.com/docs/max-width

최상단에 홈 추가하려는데

Fixed는 평면 상에 있는 것이기 때문에
최상단에 max-width 주었더라도 먹지않음
홈 해당 엘리먼트에 max-w-xl이라고 똑같이 주어야함

← <-

Const Router = useRouter()
Cons onClick= ()=>Router.back()

router.back()
history로 navigate합니다. 브라우저의 뒤로 버튼을 클릭하는 것과 같습니다. window.history.back()을 실행합니다.
https://nextjs.org/docs/api-reference/next/router#routerback

router.push()
클라이언트 측 전환을 처리합니다. 외부 URL에 대해 router.push를 사용할 필요가 없습니다. window.location은 이러한 경우에 더 적합합니다.
https://nextjs.org/docs/api-reference/next/router#routerpush

'코딩 > NextJs' 카테고리의 다른 글

당근마켓 :6 Authorization (0)	2023.04.11
당근마켓 5 : authentication (0)	2023.04.03
당근마켓 4 :Refactoring (0)	2023.03.30
당근마켓 3: database setup (0)	2023.03.29
당근마켓 :1 NextJs, Tailwind setup (0)	2023.03.15

코딩 메모장

당근마켓 2:Tailwind css

space-y-5

aspect-square

modifer

group

peer

list 다룰 때 쉬운 modifer

form 다룰 때 쉬운 modifer

col-span-2

place-content

다크모드

user-select

point-events-none

inline-flex

divide-y divide-y-2 divide-x-[1px]

Flex-row-reverse —> space-x 해놓은 여백 사라져서 space-x-reverse 추가 함

inset-0

Outline-none

Aspect-video
Aspect-square rounded-full(원형 만들 때)//

'코딩 > NextJs' 카테고리의 다른 글

티스토리툴바

당근마켓 2:Tailwind css

space-y-5

aspect-square

modifer

group

peer

list 다룰 때 쉬운 modifer

form 다룰 때 쉬운 modifer

col-span-2

place-content

다크모드

user-select

point-events-none

inline-flex

divide-y divide-y-2 divide-x-[1px]

Flex-row-reverse —> space-x 해놓은 여백 사라져서 space-x-reverse 추가 함

inset-0

Outline-none

Aspect-video Aspect-square rounded-full(원형 만들 때)//

'코딩 > NextJs' 카테고리의 다른 글

'코딩/NextJs' Related Articles

티스토리툴바

Aspect-video
Aspect-square rounded-full(원형 만들 때)//