# tailwind

129개의 포스트
post-thumbnail

[tailwindCSS] breakpoints 를 커스터마이징하기

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

약 11시간 전
·
0개의 댓글
·
post-thumbnail

230329 멋쟁이사자처럼 프론트엔드스쿨

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

3일 전
·
0개의 댓글
·
post-thumbnail

개인프로젝트: VarGen(5.4)-버튼 디자인 및 결괏값 디자인

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

4일 전
·
2개의 댓글
·
post-thumbnail

개인프로젝트: VarGen(5.2)-다크모드 적용 디테일, 헤더

전편에 쓰는 걸 까먹었는데, config 작성하는 게 더 있다.테일윈드 설정파일 tailwind.config.js에 작성할 때, darkMode라는 속성을 또 따로 써줘야한다. 다크모드를 class로 사용한다는 것!전편과 이어서 디자인하는 하는 걸 기록하겠다. 특히 다

2023년 3월 24일
·
10개의 댓글
·

개인프로젝트: VarGen(5.1)-테일윈드, 다크모드 발동

전편에서 봤던 것처럼 이제 다크모드를 직접 적용토록 해보자.nextjs와 가장 어울리는 테일윈드를 쓸 것이니 일단 세팅을 해주어야 한다.next.js에 관해 설치법은 여기 공식문서에 있다. 한번 봐보자.npm을 통해 Tailwind에 필요한 설정 파일과 피어 종속 요소

2023년 3월 23일
·
7개의 댓글
·
post-thumbnail

Tailwind

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

2023년 3월 22일
·
0개의 댓글
·
post-thumbnail

너무도 많은 스타일 라이브러리 무엇을 선택해야 하나

세상에는 많은 스타일 라이브러리들이 있다. 그중에서 가장 유명한 것들을 사용해본 필자가 개드립과 함께 장단점을 빠르게 훑어보는 포스트입니다.

2023년 3월 14일
·
0개의 댓글
·

CSS 장단점

순수 css 모듈각 파일 별로 안정성을 보장해준다.고립성과 독립성이 보장되어 이름 충돌에 걱정하지 않아도 된다.JS에서 CSS를 작성할 수 있다.JS가 꼭 필요하므로 변경될 때마다 재컴파일 되어야 한다.고립성과 독립성이 보장되고 js, css 파일을 왔다갔다 하지 않아

2023년 3월 7일
·
0개의 댓글
·

Tailwind CSS 도입 및 세팅 (feat. Next 13, Atomic css)

Tailwind CSS 장점 및 단점 그리고 설정

2023년 3월 5일
·
0개의 댓글
·
post-thumbnail

Next.js를 사용한 LCK View

LCK뷰는 진행중인 LCK시즌에 대한 정보를 보여주는 사이트입니다.Next.js를 배워서 사용해보았습니다.LCK데이터는 네이버e스포츠와 qwer.gg에서 크롤링해옵니다.3개(일정, 순위, 로스터)의 뷰로 구성되어있으며일정 page는 요청을 받을때 getServerSid

2023년 3월 5일
·
0개의 댓글
·

firebase getDocs로 데이터받아오기(feat. React)

1차시도 콘솔에 q는 잘 나왔지만 그 다음 함수인 newItems가 찍히지 않았다. 리액트네이티브때 썼던 코드인데 그때는 맞고 지금은 틀린 이유가 뭐야 대체 2차 시도 새로고침할때마다 같은 데이터가 반복해서 추가.. 완성코드 map을 쓸 때는 꼭꼭 retur

2023년 2월 24일
·
0개의 댓글
·
post-thumbnail

next 13 tailwind 적용하기

유데미 에서 영어로 되어있는 강의를 끊었다.트렌디함을 따라가기 위한 도전이었다.https://beta.nextjs.org/docs/installation첫 내용은 NEXT를 install하는 내용이었다.인상적이었던 것은 NEXT 13부터는 TS를 제공한다는 것

2023년 2월 24일
·
0개의 댓글
·
post-thumbnail

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

2023년 2월 12일
·
0개의 댓글
·

TIL : 최종프로젝트 3일차

tailwind 사용하기

2023년 2월 8일
·
0개의 댓글
·

TIL : 최종프로젝트 2일차

tailwind 셋팅하기

2023년 2월 7일
·
0개의 댓글
·

[TIL] 내배캠4기-NextJs-99일차

space-y: child 요소 사이에 수직 방향으로 간격을 추가

2023년 2월 6일
·
0개의 댓글
·
post-thumbnail

디자이너와의 협업 방식 - insight

프론트엔드 개발자의 퍼블리싱 더 좋을 순 없을까?

2023년 2월 5일
·
0개의 댓글
·
post-thumbnail

[TIL] 내배캠4기-NextJs-94일차

Tailwind CSS 장점: 클래스명에 대한 고민을 안해도 됨 직관적이다. >npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p >> tailwind.config.js 파일 생성 📌

2023년 2월 1일
·
0개의 댓글
·

Tailwind

tawilwind 는 utility-first css 이다. (즉 테일윈드가 많은 클레스네임을 갖는 다는 말. 엄청 큰 css 파일이다.)스타일을 할때 클래스 네임을 조합해서 하면 된다.vscode 의 extension : Tailwind CSS intelliSense

2023년 1월 27일
·
0개의 댓글
·