영어하는개발자산가누렁이

4.9 Responsive Modifiers

일반적으로 반응형은 Desktop먼저 생각하고 mobile로 바꾸는데,
tailwind는 모두 mobile에 먼저 적용된다.

sm:, md:, lg:, xl:, 2xl: ...etc

4.9 Responsive Modifiers part Two - grid속

mobile에서 landscape:, portrait:

4.4 Modifiers

4.5 Transitions,
4.6 Modifiers for Lists (07:00)

4.7 Modifiers for Forms
Group modifier

4.8 More Modifiers 
focus-within:bg-slate-800
required:border-2 border-yellow-400
invalid:border-2 border-red-400
placeholder-shown:border-2 border-red-400
disabled:, valid:

peer modifier - input의 state에 따라 다른 엘리먼트 상태 바꿀 수 있다.

peer는 결국 ~ 셀렉터사용하는 거니까 peer 일리먼트가 먼저 와야 함.
peer-invalid같은건 그 다음 시블링으로 와야하는거지

:marker

file:

4.0 Intro

utility-first css framework
클래스 많이 갖고 있는 엄청 뚱뚱한 css다.

부트스트랩이랑 다른점은뭐지?
=> 부트스트랩으로만들어진 데 가면 다 똑같음.
=> 정해진 스타일이 없고, 조합하면 다르다는거

vscode extension -> tailwind css 받으면 자동완성 됨
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
hover하면 tailwind의 소스도 보임

경고도 해줌

4.1 Test Drive part Two
자동완성 안되면 control + i 눌러
치다가 지워서 자동완성 또 안되면 control + space 눌러

4.2 Test Drive part Two, 4.3 Test Drive part Three

vscode에서 이모지나오게 하려면:
Windows: 윈도우+마침표
Mac: 커맨드+컨트롤+스페이스바

nextjs 셋업

https://nextjs.org/docs/getting-started

타입스크립트 사용하는 nextjs 어플 설치(react18버전이 정식출시된 상태라 딴짓 할 필요 없음. 아래처럼 하면 됨.)
타입스크립트 싫으면 --typescript 빼고.

npx create-next-app@latest --typescript

공식 릴리즈 전 코드상태 3단계
1. Alpha
2. Beta
3. RC(Release Candidate)
RC는 확정된 버전임. 다만 오류같은거만 수정하겠지.
강의 당시의 리액트 18은 RC이고, 지금은 정식버전이다.
RC버전 따로 설치하는 방법 있음.

tailwindcss, postcss, autoprefixer 설치

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

아래 처럼 파일 두개가 생김

참고,
NPM - node package manager
NPX - node package execute
NPX는 Run a command from a local or remote npm package
npm 패키지의 커맨드를 실행 시키는 명령어.
npx는 npm run과 비슷하다는 것.
-p는 npm에서 package의 줄임말.
-p옵션으로 특정된 패치지는 실행 명령의 path에 포함이 된다 = 같이 섞여서 바로 실행된다(?)
로컬 프로젝트에 해당 패키지가 없으면, 실행된 프로세스의 PATH 환경 변수에 추가된,  npm 캐시 안의 폴더에 설치된다.
즉, 바로 설치하고 실행 시킨다는거 같음.
https://docs.npmjs.com/cli/v7/commands/npx

아래처럼 두개가 생김 postcss.config.js 는 안건드려도 됨

tailwind.config.js를 아래처럼 수정해준다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
//tailwind를 어디에서 사용할 것인가 설정
//./pages/**/*.{js,jsx,ts,tsx}의 의미는
//page폴더 아래 모든 폴더(**)의 모든 파일(*)에서 {}안의 확장자들.

그리고 global.css에 아래 내용을 추가한다.

아래 다 있음.
https://tailwindcss.com/docs/installation/using-postcss

계속...