본문 바로가기

전체 글

 (76)
[React] daisyui CSS 컴포넌트 이해하기 CSS 컴포넌트란?  원하는 HTML요소의 스타일링을 쉽게 할 수 있는 CSS 클래스를 'CSS 컴포넌트' 라고 하며 이를 제공하는 테일윈드CSS, daisyui 등을 CSS 프레임워크(혹은 CSS라이브러리)라고 한다.  색상 테마  웹 페이지에서 가장 많이 사용되는 색상을 주 색상(primary color)라고 한다.  웹 페이지 성격에 따라 주 색상이 다를 수 있으며 주색상과 함께 사용되는 보조 색상(secoundary-color)가 있다.     또한 필요에 따라 좀 더 다양한 색상을 사용할 수도 있다.  이런 테마 색상들을 '색상 테마 라고 한다.  Button 컴포넌트 구현하기  daisyui button CSS 컴포넌트의 형태를 react를 통해 간결하게 사용할 수 있음을 알 수 있다.// 컴..
[React] 플렉스 레이아웃 이해하기 플렉스박스 레이아웃이란?  플렉스박스 레이아웃(flexbox layout)이란 flex 컨테이너가 될 요소에 display:flex 설정 후 그 안에 자식 콘텐츠 아이템을 배치하는 것을 의미한다.  플렉스 컨테이너는 콘텐츠 아이템의 inline과 block의 성질을 완전히 무시한다.  테일윈드CSS에서는 flex 클래스를 지원한다.  flex-direction 스타일 속성  CSS에서는 flex-direction 속성을 제공하며 display 설정값이 flex일 경우에만 사용할 수 있다.  flexdirection의 설정값은 row, row-reverse, column, column-reverse 등이 있으며 기본값은 row이다.  테일윈드CSS는 flex-direction 설정값에 대응하는 클래스를 제..

티스토리툴바