1. Tailwind CSS

• 프리 빌트인 (Pre Built-in) 컴포넌트
  미리 만들어져있는 내장 함수

• 유틸리티 기반(Utility-first)
  하나하나 클래스 조각(유틸리티)을 만들어서 사용하는 것

📌 특징

• 유틸리티 퍼스트(Utility-first) CSS Framework
• 유지 보수에 용이하다.
• 클래스 이름을 고민할 필요가 없고 협업에 있어서도 문제가 없다.

2. 설치 및 환경설정

1. 확장 프로그램 깔기

• Tailwind CSS IntelliSense

2. 환경 구성 및 빌드

• touch src/index.html src/css/input.css
• Tailwind 파일 이름은 input.css 로 해야한다.

3. 패키지 깔기

• npm install -D tailwindcss
• -D 개발 의존 모드(데브 디펜더 시스)

4. 추가 패키지 깔기

• npm i -D live-server npm-run-all postcss-cli@latest

5. Tailwind CSS 초기화 시키기

• npx tailwindcss init -p

• -p postcss.config.js 까지 같이 깔리는 명령어
• package-lock.json package.json postcss.config.js tailwind.config.js 깔린 것 확인!
• 만약 위의 4개가 안깔리면 npm init -y 하고 다시 3번부터 다시 시작하기

6. tailwind.config.js 파일 수정

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

• content: ["./src/**/*.{html,js}"]

→ 현재 파일을 기준으로 src 폴더로 넘어간 후 혹시 모를 폴더 때문에 ** 더 안에 들어간다. 그 다음 확장자 html 또는 js 를 찾아라

7. input.css 파일 수정

@tailwind base;
@tailwind components;
@tailwind utilities;

• 지원하는 모듈 가져오기

8. package.json 에 단축키 등록

"scripts": {
    "start": "run-p server watch",
    "tailwind": "tailwindcss -i ./src/css/input.css -o ./src/css/output.css",
    "watch": "npm run tailwind -- --watch",
    "server": "live-server ./src"
  },

• "tailwind" : "tailwindcss -i ./src/css/input.css -o ./src/css/output.css”
  • -i 현재폴더/파일 -o 내보낼폴더/파일
  • -i input
  • -o output

9. ⚙️(관리) → 설정 → tailwind 검색 → settings.json 파일 선택

🔻 맨 마지막 줄에 추가하기

"files.associations": {
    // "*.css": "tailwindcss",
    "*html": "html",
    "*css": "css"
  },
  "editor.quickSuggestions": {
    "strings": true
  },
  "tailwindCSS.includeLanguages": {
    "plaintext": "html",
    "postcss": "css"
  },

10. index.html 시작하기

• <link rel="stylesheet" href="./css/output.css" /> 연결

3. 연습

✔️ top-1 = 4px , 4px이 기준!!

✔️ bg-gray-200 이건 tailwind 기본 유틸리티

✔️ bg-gray3 이건 내가 tailwind.config.js에서 커스텀한 유틸리티

✔️ md: @midea-query

✔️ darkMode: "class"

• media로 설정하면 각 운영체제의 설정으로 전환해야한다.
• class로 설정하면 classname 속성으로 설정이 가능하다.

✔️ underline 밑줄

✔️ sr-only

• .a11y 같은 접근성 관련 속성이다.
• sr-only 코드를 확인해보면 이렇다.

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

• clip: rect(0, 0, 0, 0); 이건 구형 버전

• clip-path: (50%) 신형 버전

• input.css → 자주 쓰는 명령어 단축키 설정

.클래스명{
  @apply ;
}

✔️ appearance

• none : 브라우저 에이전트 스타일 없앤다. 눈에 보이지만 않을 뿐 요소는 존재한다.

4. 회고

오늘은 Tailwind의 기초를 가볍게 배웠다. 처음에는 가독성때문에 별로라고 생각했는데 배우면 배울 수록 빠르게 스타일링이 가능하다는 장점이 정말 컸다. 시간이 너무 빠르게 지나갈 정도로 재미있었고 프로젝트가 끝나고나면 Tailwind로 페이지를 한번 제작해보고자 한다. 새로 배우는 것들을 빠르게 익히는 방법은 역시 코드를 직접 많이 쳐보는 수밖에 없다. Sass를 통해 배운 것..💬
오늘이 HTML/CSS 슬비쌤과의 마지막 수업이였는데 너무 아쉬웠다. 아직 난 배울게 너무 많은데 벌써 끝이 나다니ㅠㅠ 슬비쌤 덕분에 정말 많은 것을 배우고 느꼈던 한달이였다. 프로젝트 기간동안 담당 강사님이셔서 계속 모르는게 있으면 물어볼 수 있지만 이제 수업이 없다는게 너무너무 아쉽다ㅠㅠㅠㅠ 한달이 이렇게 금방가다니😭😭😭😭

프로젝트 시안이 나왔는데 4가지가 있었다. 반응형, 고정형, 모바일용, 데스크탑용 많은 것을 배울 수 있는 시안이라고 생각됐다. 그 중 팀원들과 회의 끝에 정한 시안은 마켓컬리시안🛒 한편으로는 이듬페이지를 하고싶었지만 팀원들과의 대화 중 느낀 점은 내가 가장 실력이 뒤쳐진다는 것이였다. 그렇기 때문에 괜히 공부해보겠다고 어려운 시안 고르면 내가 너무 민폐가 될 것같아서 의견을 내지는 않았다. 마켓컬리 시안도 쉬운 것은 아니기 때문에!! 다들 낯을 많이 가리셔서 조장분께서 역할을 정해주셨다. 나는 메인부분이였는데 쉬워보이는 듯 생각보다 까다로운 것들이 많아보였다. 내일부터 시작인데 민폐가 되지 않게 정말 열심히 해야겠다! 무임승차는 절대 안할꺼지만 버스를 타게 될 것같은 이 기분은 뭘까😓 첫 프로젝트이니 소통도 열심히 하고 좋은 결과물을 내야지🔥🔥🔥🔥

내일부터 프로젝트 끝날 때까지는 TIL을 작성할 일이 없을 듯하다.
대신 프로젝트 진행하면서 이슈같은거 작성해야겠다.