# tailwind

[tailwindCSS] breakpoints 를 커스터마이징하기
나는 최근에 사용방법을 학습한 tailwindCSS 라는 css 라이브러리를 포트폴리오 페이지 개발 프로젝트에적용하여 실습 감각을 익히고 있다. 그러던 중 모바일 반응형 레이아웃을 구현하면서 반응형 breakpoints를 커스터마이징하여 사용하는 방법을 알게 되었는데

230329 멋쟁이사자처럼 프론트엔드스쿨
오늘의 꿀팁 > 💡 이력서 색상을 브랜드 컬러에 맞춰주면 좋다 > 💡 풀페이지 캡처 방법 크롬 개발자 도구 -> 메뉴 -> Run Command -> Capture full size screenshot 💨 Tailwind CSS https://github.c

개인프로젝트: VarGen(5.4)-버튼 디자인 및 결괏값 디자인
이제 디자인을 해보자.이제 전 결괏값을 보고, 피그마로 계획한 디자인으로 수정하겠다!메인 제목과 소제목을 작성하고 꾸며보자! 태그 생성 수 다크모드 적용시킨 디자인을 적용해보자.hN 태그에 대한 기본적인 css를 적용해보자.기본적인 디자인은 적용됐으니, 크기와 위치를

개인프로젝트: VarGen(5.2)-다크모드 적용 디테일, 헤더
전편에 쓰는 걸 까먹었는데, config 작성하는 게 더 있다.테일윈드 설정파일 tailwind.config.js에 작성할 때, darkMode라는 속성을 또 따로 써줘야한다. 다크모드를 class로 사용한다는 것!전편과 이어서 디자인하는 하는 걸 기록하겠다. 특히 다
개인프로젝트: VarGen(5.1)-테일윈드, 다크모드 발동
전편에서 봤던 것처럼 이제 다크모드를 직접 적용토록 해보자.nextjs와 가장 어울리는 테일윈드를 쓸 것이니 일단 세팅을 해주어야 한다.next.js에 관해 설치법은 여기 공식문서에 있다. 한번 봐보자.npm을 통해 Tailwind에 필요한 설정 파일과 피어 종속 요소

Tailwind
Tailwind CSS는 클래스 이름에 대한 모든 HTML 파일, JavaScript 구성 요소 및 기타 템플릿을 스캔하고 해당 스타일을 생성한 다음 정적 CSS 파일에 작성하는 방식으로 작동합니다.Tailwind DocsHTML 태그에 Tailwind에서 제공하는 클

너무도 많은 스타일 라이브러리 무엇을 선택해야 하나
세상에는 많은 스타일 라이브러리들이 있다. 그중에서 가장 유명한 것들을 사용해본 필자가 개드립과 함께 장단점을 빠르게 훑어보는 포스트입니다.
CSS 장단점
순수 css 모듈각 파일 별로 안정성을 보장해준다.고립성과 독립성이 보장되어 이름 충돌에 걱정하지 않아도 된다.JS에서 CSS를 작성할 수 있다.JS가 꼭 필요하므로 변경될 때마다 재컴파일 되어야 한다.고립성과 독립성이 보장되고 js, css 파일을 왔다갔다 하지 않아

Next.js를 사용한 LCK View
LCK뷰는 진행중인 LCK시즌에 대한 정보를 보여주는 사이트입니다.Next.js를 배워서 사용해보았습니다.LCK데이터는 네이버e스포츠와 qwer.gg에서 크롤링해옵니다.3개(일정, 순위, 로스터)의 뷰로 구성되어있으며일정 page는 요청을 받을때 getServerSid
firebase getDocs로 데이터받아오기(feat. React)
1차시도 콘솔에 q는 잘 나왔지만 그 다음 함수인 newItems가 찍히지 않았다. 리액트네이티브때 썼던 코드인데 그때는 맞고 지금은 틀린 이유가 뭐야 대체 2차 시도 새로고침할때마다 같은 데이터가 반복해서 추가.. 완성코드 map을 쓸 때는 꼭꼭 retur

next 13 tailwind 적용하기
유데미 에서 영어로 되어있는 강의를 끊었다.트렌디함을 따라가기 위한 도전이었다.https://beta.nextjs.org/docs/installation첫 내용은 NEXT를 install하는 내용이었다.인상적이었던 것은 NEXT 13부터는 TS를 제공한다는 것
[React] react-google-map/api GoogleMap/MarkerF/InfoWindowF 사용
@react-google-map/api 을 이용해보자.

Tailwind CSS 적용 오류
Tailwind CSS 를 인식하지 못해서 생긴 오류이다.https://velog.io/@jinsunkimdev/React%EC%97%90%EC%84%9C-TailwindCSS-%EC%82%AC%EC%9A%A9-%EC%8B%9C-warning-Unknown-a

[TIL] 내배캠4기-NextJs-94일차
Tailwind CSS 장점: 클래스명에 대한 고민을 안해도 됨 직관적이다. >npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p >> tailwind.config.js 파일 생성 📌
Tailwind
tawilwind 는 utility-first css 이다. (즉 테일윈드가 많은 클레스네임을 갖는 다는 말. 엄청 큰 css 파일이다.)스타일을 할때 클래스 네임을 조합해서 하면 된다.vscode 의 extension : Tailwind CSS intelliSense