[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 18일차 기록 및 복습

---

목차

1. 수업 외 특별 활동

2. Tailwind 개요

3. Tailwind 로 이력서 만들기

---

1. 수업 외 특별 활동

- 책 집필 (8월 중순, 팀구성 자유, 주제 구상해오기)

- 오픈소스 프로젝트

- 신입 개발자 자기소개 작성 문의 (희망 연봉 명시된 이력서를 보낼 것)

 - Sass TailwindCSS Bootstrap (Bootstrap 이 가장 빠름, 돈으로 해결함)

2. Tailwind 개요

- Tailwind : 만족도가 높고 꼭 배워야 한다고 생각함

- 부트스트랩 : 찍어내야하고 빨리 만들어 낸다면 사용

- 프론트엔드 스쿨에서 유료강의도 제공해줄 것이지만 지원회사에서 Tailwind 를 사용할 때 시간내서 더 볼 것

Tailwind CSS 만족도

 

 

2-1. Tailwind CSS

HTML 을 벗어나지 않고 모던 웹사이트를 빠르게 빌드할 수 있다.

- 미리 구현된 CSS (utility-first) 를 사용하는 것이다.

- 취직 후 컨벤션은 외워야한다. (위니브에 컨벤션 강의가 있다.)

- 글로벌 회사 Google 컨벤션, Airbnb 컨벤션 등이 있다.

- CLI 방식 / CDN 방식 (보여지는 화면이 다른 부분이 있다.)

- CLI 방식 : npm 설치하여 설정하고 사용한다.

- CDN 방식 : JS 코드를 사용하여 가볍다.

- Tailwind 는 무겁다? NO

- 픽셀 단위로 조절하는 상세한 작업을 못한다? NO

- 공공기관에서 사용할 수 없다. (IE 미지원)

- 앱에 최적화 되어 있다.

- 카카오엔터테인먼트를 비롯한 여러 기업들이 Tailwind 를 도입함

 

Tailwind CSS장점

(1) 오직 HTML 문서만 보면 된다.

(2) 클래스 이름을 고민할 필요 없고, 협업에 있어서도 문제가 없다.

(3) 유지보수에 용이하다.

 

- HTML/CSS 는 JS처럼 빠르게 변하지 않아서 공식 문서를 보면 된다.

- 유료 컴포넌트 (컴포넌트 사용을 위한 UI 제공)

- 공식 유튜브 채널이 잘 되어 있음

- JetBrains IDEs

 

2-2. Tailwind 튜토리얼

- 폰트, 테두리

- 테일윈드가 더럽다라고 하는건 px, rem 을 섞어 쓰기 때문이지만 px 별로 없다는 것은 오해다

- 테일윈드는 모든것이 구현되어 있지 않은 것이다. (중간중간 비어 있다.)

- 값이 없으면 전체를 채우거나, 없어진다. (그래서 세세한 픽셀 제어가 안된다고 생각함)

- Tailwind는 특정 부분만 구현되어 있다. (JS 로 세부 조정도 가능하다.)

- (tutorial) template

- (tutorial) sizing

- (tutorial) color : text-gray-300

-  (tutorial)typo

- (tutorial) Arbitrary values 내가 원하는 픽셀 크기을 넣을 수 있다.

- 자주 쓰는 typo 속성

(1) text-sm, text-lg, text-2xl, text-3xl

(2) text-[14px]

- (tutorial) shadow-2xl 는 cdn 에서 작동하지 않음 (코드만 공유하고 넘어감)

- 웹을 구성하는 언어 HTML/CSS, JS, Watson

-  (tutorial) flex, grid

- flex 에서 자주 쓰는 것 flex, flex-wrap, justify-center, items-center

- grid

- Tailwind 는 빠르게 쭉 다 작성하고 마지막에 실행해서 고친다. (속도가 중요)

- 오늘은Tailwind 를 한번 경험해봤다로 해도 됨

- 전주에 한번 프로젝트 해보고 해봤다고 이야기 해도 됨

- cli 방식은 다르게 class 에서 선언한 순서대로 정의됨 (중복 안됨)

 

2-3. 다른 이야기들

- 일상 속에 성장 패턴 : 출근시간, 짜투리 시간을 줄여서 공부 시간을 마련해서 성장을 만들었다.

- 좋은 교육이란? 

- 교육 학습효과를 올리는 것은 동기!

- 기술은 경영과 다르게 뾰족함이 생긴다. 뾰족해지면 낭중지추가되어 결국은 된다!

- 평온함을 유지하세요. 조급함을 없애고 마음을 흔드는 요인들을 제거하세요.

- 평온함을 해지는 곳의 피드백

- 그래서 실무에서 할 수 있겠냐?

- 니가 비전공자여서 그것밖에 안되는 것이다.

 

3. Tailwind 로 이력서 만들기

Tailwind 로 빠르게 만들어보는 랜딩페이지

See the Pen resume-form by redcontroller (@redcontroller) on CodePen.