일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 |
- EC2
- 프로그래머스
- Next.js
- 코딩테스트
- FIGMA
- webpack
- github
- SSR
- 자료구조
- react
- Stack
- 해시
- axios
- grid
- CSS
- hook
- render
- HTML
- FigJam
- Babel
- useMemo
- TypeScript
- git
- useCallback
- express
- TAILWIND
- Taillwind
- 피그마
- Javascript
- docker
- Today
- Total
목록TAILWIND (3)
나는 오늘도 멋있다
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/mCPac/btsBKl8vuCg/JeKuNUuJLwYCvBKEKNcDF0/img.png)
4 ~ 8 일사이에 많은 일들이 있었다. 당연히 아르바이트 때문에 조금만 작업한 날도 있었지만.... Tailwind가 속을 썩있는 바람에... css 프레임워크는 처음써본다. 기본적으로 React에서는 styled-component를 사용했었고, css파일에 클래스를 정의하여 사용도 해봤다. 그래서 그런지 가독성이 떨어지는 부분이 있긴하다. 또한 유틸리스 클래스를 모르니 공식홈페이지를 보면서 적용하는것도 시간이 들어갔다. 초기작업이라 기본적인 css설정을 해놓고 추가로 설정들을 넣어볼예정이다. 태그 초기화는 할게 많지만 그때그때 필요한 부분만 하는게 좋을것같아서 아직 다하지는 않았다. router-button 클래스는 기본적으로 페이지를 이동하는 Link 태그의 css인데 많이 사용할거 같아 따로 빼두..
@tailwind base; - Tailwind css에서 기본 스타일을 주입하는 부분으로, 기본 스타일 및 글로벌 스타일을 정의하는 부분 - ex) 기본태그들의 초기화 or 프로젝트 전체적으로 사용될 css등(font 등) @tailwind components; - Tailwind css에서 컴포넌트 클래스를 주입하는 부분으로, 컴포넌트 단위의 스타일을 정하는 역할 - ex) 버튼,모달,카드 등의 UI컴포넌트 관련 @tailwind utilities; - Tailwind css의 다양한 유틸리스 클래스를 사용하기 위한 역할 - ex) 레이아웃, 텍스트, 색상, 간격 등 @tailwind variants; - Tailwind css의 가상클래스를 쓰기 위한 역할 우선순위는 utilities > compo..
학습계기 Css파일에 클래스를 정의해서 사용하는 기본사용법, React의 styled-component등 사용해 봤다. 하지만 사용하다보면 이것 또한 불편하다. 그래서 Css 프레임워크를 찾아보다가 Tailwind를 접하게되었고, 많은기업에서도 사용하는 거 같아서 요번 프로젝트에 도입하기위함 tailwind는 Utility-First 컨셉을 가진 css의 프레임워크 이다. [장점] 1. Utility-First 컨셉으로 빠르게 원하는 디자인 개발을 할 수 있다. 2. 클래스 작명을 고민할 필요가 없다. 3. HTML-CSS를 왔다갔다 할 필요가 없다. 4. 클래스명의 속성을 변경하기위해 CSS파일에서 클래스를 찾을 필요가 없다. 5. 기본 스타일 값을 자유롭게 커스텀 6. 반응형 디자인에 유용한 클래스들..