JHeaon 개발일지

이번에는 tailwind을 이용한 플렉스, 그리드를 조절하는 방법에 대해서 소개하고자 한다. 플렉스 tailwind에서 flex는 하나의 공간을 의미하며, 공간의 크기를 조절하기 위해서 사용 한다. 일반적인 flex는 가로로 아이템이 쌓이며 flex-col을 통해 세로로 아이템들을 세울 수 있다. 만약 아이템이 flex박스를 넘어갈 때, 줄바꿈이 되길 원한다면 flex flex-wrap 클래스를 사용하면 된다. 항상 flex를 사용하다 보면, items와 justify에 대해서도 같이 나오는데 이에 대해서 알아본다. justify와 items 간단하게 설명하면 justfiy와 items는 정렬을 하기 위한 클래스이다. 아이템들을 위, 아래로 정렬하기 위해서는 items, 좌, 우로 정렬하기 위해서는 ju..

이번에는 tailwind을 이용한 테두리, 필터, 상호작용을 조절하는 방법에 대해서 소개하고자 한다. 테두리 일반적으로 테두리를 표현하기 위해서 border을 사용한다. 만약에 테두리를 상, 하, 좌, 우 이렇게만 표현하고 싶다면, border-t, border-b, border-l, boder-r 처럼 표현이 가능하며 굵기는 뒤에 숫자를 붙여 boder-y-2 처럼 표현이 가능하다. 가끔 테두리의 각진 부분을 깎고 싶은 경우도 있는데 이는 rounded을 이용하여 처리한다. rounded-lg ~ full 까지 이용하여 깍임의 정도를 조절할 수 있다. 물론 상, 하 처럼 깎고 싶은 부분을 조절 할때는 rounded-t-xl, rounded-b-xl 처럼 중간에 방향만 추가하면 된다. 마지막으로 테두리의..

이번에는 Tailwind을 활용한 공간 사이즈, 레이아웃, 그림자를 조절하는 방법에 대해서 소개하고자 한다. 공간 사이즈 tailwind에서는 공간의 크기를 조절하기 위해서는 w(가로), h(세로)를 이용한다. 다음은 공간 사이즈에 조절 하는 방법에 대한 이야기이다. 화면에 퍼센티지를 이용하여 나타내고 싶을때는,w-1/2 h-1/3 처럼 표현한다. 화면 전체를 사용하기 위해서는 w-screen, h-screen을 사용하며 100% 퍼센티지를 사용하기 위해서는 w-full을 이용한다. w-min, w-max 처럼 크기에 대한 최소, 최대의 제약을 설정할 수 있다. -index.html w-0 w-1 w-1.5 w-2 w-3 w-5 w-6 w-7 w-8 w-9 w-10 w-11 w-12 w-14 w-16 w..

현 포스팅 부터는 Tailwind에서 자주사용하는 18가지의 문법을 정리하고자 한다. 하나의 포스팅에는 3개 ~ 4개 정도의 분량의 내용을 정리하고 이를 복습하고자 한다. 이번 포스팅에서는 색, 컨테이너와 공간(마진, 패딩), 타이포그래피(글 간격, 폰트, 폰트 크기 조정)에 대해서 소개하고자 한다. Tailwind로 색을 표현하는 방법 tailwind로 색을 표현하기 위해서는 요소-색깔-색의 진함 정도를 사용하여 표현한다. 색의 진함의 정도는 100 ~ 900까지 가능하고 흰색이나 검은색 같은 경우는 진함 정도를 표현 할 수 없다. - index.html Tailwind is awesome Tailwind is awesome Tailwind is awesome tailwind is awesome tai..

최근 CSS에 대해 관심이 많던 도중, Tailwind 프레임워크가 눈에 들어와서 이를 공부하게 됬다. 몇 개의 미니프로젝트도 해봤었는데 CSS자체에 조금 허덕였던 나에게는 좋은 도구인 것 같아서 한번 소개해보고자 한다. Tailwind가 뭐고 왜 쓰는데요? tailwind는 Utility-First(미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 스타일링) 을 지향하는 CSS 프레임워크 입니다. CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 html 파일 내에서 작성함으로써, 빠르게 구축한다는 것에 이점을 두고 있습니다. tailwind을 이용하여 코드를 작성한 예시는 아래와 같습니다. - Tailwind 적용 전 ChitChat You have a new message! ..