# 관련링크 - [몰입코딩 - GIT/GITHUB - slog.gg/p/13751#f](https://slog.gg/p/13751#f) - GITHUB 사용법 - [몰입코딩 - GITHUB PAGE - slog.gg/p/13746#f - 1강 ~ 3강](https://slog.gg/p/13746#f) - GITHUB PAGE 사용법 - [node.js 설치방법](https://www.slog.gg/p/13711#1강) - [GIT 설치방법](https://www.slog.gg/p/13711#2강) - [VS CODE 설치방법](https://www.slog.gg/p/13711#3강) # 1강 - [24 10 02, p 13752, 1강, play.tailwindcss.com 에서 테일윈드가 만들어내는 CSS를 자세히 볼 수 있습니다.](https://youtu.be/VSxlpr7CU0A) - [play.tailwindcss.com](https://play.tailwindcss.com) ## 테일윈드 사용 ```html

``` ## 테일윈드 결과 CSS ```css .bg-\[\#afafaf\] { --tw-bg-opacity: 1; background-color: rgb(175 175 175 / var(--tw-bg-opacity)); } .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .p-10 { padding: 2.5rem; } .hover\:bg-\[\#afafaf\]:hover { --tw-bg-opacity: 1; background-color: rgb(175 175 175 / var(--tw-bg-opacity)); } ``` # 2강 - [24 10 02, p 13752, 2강, tailwind.config 으로 특정한 컬러를 추가하거나 반응형 브레이크 포인트를 원하는데로 고칠 수 있다.](https://youtu.be/Ac_b2PEopLM) - [CODEPEN](https://codepen.io/jangka44/pen/rNXxKvq) # 3강 - [24 10 02, p 13752, 3강, 본인이나 형이나 조상이 on 이라는 클래스를 가졌을 때만 특정 CSS가 작동하도록 할 수 있음](https://youtu.be/jXuDxI7hGVY) - [CODEPEN](https://codepen.io/jangka44/pen/abedGWy) - 본인 EX : on:bg-black, on:w-full - 후손 : group-on:bg-black, group-on:w-full - 동생 : peer-on:bg-black, peer-on:w-full - 후손(named group) : group-on/p1:bg-black, group-on/p1:w-full - 동생(named group) : peer-on/p1:bg-black, peer-on/p1:w-full # 4강 - [24 10 02, p 13752, 4강, 실무에서 웹 퍼블리싱을 할 때 테일윈드 적용](https://youtu.be/9KeywVLXBDg) ## 1 단계 : 프로젝트 폴더 생성 ```bash cd ~ mkdir js_projects cd js_projects mkdir site3 cd site3 ``` ## 2 단계 : VS CODE 열기 ```bash code . ``` ## 3 단계 : 터미널 열기 - `ctrl` + `~` ## 4 단계 : 테일윈드 설정파일 생성 ```bash npx tailwindcss init ``` ## 5 단계 : 테일윈드 설정파일 커스터마이징 ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: { colors: { clifford: "#da373d", }, screens: { "3xl": "1600px", "4xl": "1920px", }, }, }, plugins: [ function ({ addVariant }) { const groupVariantPrefixes = ["p1", "p2", "p3"]; function escapeClassName(className) { return className.replace(/[\[\]\+\*\#\/\%]/g, '\\$&'); } // group-on 변형 추가 함수 const addGroupOnVariant = (name = "") => { const selector = name ? `group\\/${name}` : "group"; const variantName = name ? `group-on/${name}` : "group-on"; addVariant(variantName, ({ modifySelectors }) => { modifySelectors(({ className }) => { return `.${selector}.on .${escapeClassName( variantName )}\\:${escapeClassName(className)}`; }); }); }; // peer-on 변형 추가 함수 const addPeerOnVariant = (name = "") => { const selector = name ? `peer\\/${name}` : "peer"; const variantName = name ? `peer-on/${name}` : "peer-on"; addVariant(variantName, ({ modifySelectors }) => { modifySelectors(({ className }) => { return `.${selector}.on ~ .${escapeClassName( variantName )}\\:${escapeClassName(className)}`; }); }); }; // 기본 group-on, peer-on 변형 추가 addGroupOnVariant(); addPeerOnVariant(); // 특정 그룹과 피어에 대한 변형 추가 groupVariantPrefixes.forEach((name) => { addGroupOnVariant(name); addPeerOnVariant(name); }); // on 클래스에 대한 변형 추가 addVariant("on", ({ modifySelectors }) => { modifySelectors(({ className }) => { return `.on.on\\:${escapeClassName(className)}`; }); }); }, ], }; ``` ## 6 단계 : src/input.css 생성 ```css @tailwind base; @tailwind components; @tailwind utilities; /* 커스텀 CSS(폰트, 기타 등등) */ .box-1 { color: blue; } ``` ## 7 단계 : src/output.css 자동생성모드 시작 ```bash npx tailwindcss -i ./src/input.css -o ./src/output.css --watch ``` - 종료는 : `ctrl` + `C` ## 8 단계 : src/index.html 생성 ```html

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad, porro blanditiis. Expedita odit, velit dicta excepturi nobis perspiciatis incidunt explicabo? Dolorum provident, molestiae aut odit amet dignissimos esse deleniti sint!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius voluptatibus, enim deserunt ipsa, deleniti officiis et dolore amet iure qui voluptas pariatur incidunt molestiae fugit placeat. Veritatis iste praesentium sapiente.

``` ## 9 단계 : live server 로 src/index.html 열기 - ![img](https://i.imgur.com/N8zNazl.png) - live server 익스텐션이 없다면 설치 ## 10 단계 : 작업 - src/output.css 파일은 직접 수정하면 안됩니다. - 프로젝트의 소스코드들(src/input.css, src/index.html, src/a.html ...)을 수정하면 자동으로 src/output.css 가 갱신됩니다. ## 11 단계 : 작업 종료 - 터미널에서 `ctrl` + `C` 입력 - VS CODE 종료 # 5강 - [24 10 04, p 13752, 5강, 이번에는 GITHUB PAGE 배포까지](https://youtu.be/oUz1RybWzPE) ## 1 단계 : 원격 저장소 생성 - [원격 저장소 생성 : https://github.com/new](https://github.com/new) - [원격 저장소 주소 : https://github.com/jhs512/2024-10-24-site4](https://github.com/jhs512/2024-10-24-site4) ## 2 단계 : 프로젝트 폴더 생성 ```bash cd ~ mkdir js_projects cd js_projects mkdir site4 cd site4 ``` ## 3 단계 : 로컬 저장소 생성, GIT 사용자 설정, 로컬 저장소를 원격 저장소와 연결 ```bash git init git config user.name # user.name 확인 git config user.name "test" # user.name을 test 로 설정 git config user.email # user.email 확인 git config user.email "test@test.com" # user.email을 test@test.com 로 설정 git remote add origin https://github.com/jhs512/2024-10-24-site4 ``` ## 4 단계 : VS CODE 열기 ```bash code . ``` ## 5 단계 : 터미널 열기 - `ctrl` + `~` ## 6 단계 : 테일윈드 설정파일 생성 ```bash npx tailwindcss init ``` ## 7 단계 : 테일윈드 설정파일 커스터마이징 ```js /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: { colors: { clifford: "#da373d", }, screens: { "3xl": "1600px", "4xl": "1920px", }, }, }, plugins: [ function ({ addVariant }) { const groupVariantPrefixes = ["p1", "p2", "p3"]; function escapeClassName(className) { return className.replace(/[\[\]\+\*\#\/\%]/g, '\\$&'); } // group-on 변형 추가 함수 const addGroupOnVariant = (name = "") => { const selector = name ? `group\\/${name}` : "group"; const variantName = name ? `group-on/${name}` : "group-on"; addVariant(variantName, ({ modifySelectors }) => { modifySelectors(({ className }) => { return `.${selector}.on .${escapeClassName( variantName )}\\:${escapeClassName(className)}`; }); }); }; // peer-on 변형 추가 함수 const addPeerOnVariant = (name = "") => { const selector = name ? `peer\\/${name}` : "peer"; const variantName = name ? `peer-on/${name}` : "peer-on"; addVariant(variantName, ({ modifySelectors }) => { modifySelectors(({ className }) => { return `.${selector}.on ~ .${escapeClassName( variantName )}\\:${escapeClassName(className)}`; }); }); }; // 기본 group-on, peer-on 변형 추가 addGroupOnVariant(); addPeerOnVariant(); // 특정 그룹과 피어에 대한 변형 추가 groupVariantPrefixes.forEach((name) => { addGroupOnVariant(name); addPeerOnVariant(name); }); // on 클래스에 대한 변형 추가 addVariant("on", ({ modifySelectors }) => { modifySelectors(({ className }) => { return `.on.on\\:${escapeClassName(className)}`; }); }); }, ], }; ``` ## 8 단계 : src/input.css 생성 ```css @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"); @tailwind base; @tailwind components; @tailwind utilities; html > body { font-family: "Pretendard Variable", sans-serif; } ``` ## 9 단계 : src/output.css 자동생성모드 시작 ```bash npx tailwindcss -i ./src/input.css -o ./src/output.css --watch ``` - 종료는 : `ctrl` + `C` ## 10 단계 : src/index.html 생성 ```html 메인

메인 자기소개

메인

``` ## 11 단계 : src/about.html 생성 ```html 자기소개

메인 자기소개

자기소개

``` ## 12 단계 : git add, git commit, git push ```bash git add . git commit -m "index.html, about.html" git push origin main ``` ## 13 단계 : GITHUB PAGE 세팅 - 주소 : https://github.com/jhs512/2024-10-24-site4/settings/pages - 위 주소에서 `jhs512`와 `2024-10-24-site4` 부분은 본인의 주소로 바꿔야 합니다. ![img](https://i.imgur.com/yGHIE4A.png) - [GITHUB PAGE 호스팅 사이트 - 주소 : https://jhs512.github.io/2024-10-24-site4/src](https://jhs512.github.io/2024-10-24-site4/src) - 위 주소에서 `jhs512`와 `2024-10-24-site4` 부분은 본인의 주소로 바꿔야 합니다. ## 14 단계 : 작업 -> git add -> git commit -> git push 의 반복 - 작업 - git add . - git commit -m "work" - git push origin main - [GITHUB PAGE 호스팅 사이트 - 주소 : https://jhs512.github.io/2024-10-24-site4/src](https://jhs512.github.io/2024-10-24-site4/src)에서 확인 - 만약에 호스팅 사이트에 변경사항이 반영되지 않았다면 캐시 삭제 후 리로드(`F5`(페이지 리로드)) - ![img](https://i.imgur.com/5KzwKTv.png) - 이렇게 설정 후 `F5` 키 눌러서 Page Reload ## 15 단계 : 작업 종료 - 터미널에서 `ctrl` + `C` 입력 - VS CODE 종료

테일윈드 정석 사용법