티스토리

해온의 우당탕 개발일지

검색하기

블로그 홈

해온의 우당탕 개발일지

jheaon.tistory.com/m

jheaon 님의 블로그입니다.

구독자: 2

방명록 방문하기

주요 글 목록

Tailwind로 Html 작성할 때 사용했던 단축키나 팁들 이번에는 tailwind를 작성하면서 사용했던 단축키나 여러 팁들을 저장하고자 한다. 해당 내용은 추후 tailwind을 사용하고 배우면서 하나씩 채워 나가는 용도로 사용하고자 한다. html 기본 골격 만들기 일단 html 문서를 건들일때는, , 클래스가 담긴 태그 만들기 일반적으로 태그안에 클래스를 만들려고 하면 태그를 적어둔 뒤, 뒤에 class="" 을 붙여 처리한다. 하지만 이 시간 마저 아깝다면 해당 방법을 사용해보자. .p-2.m-2.justify-center.items-center. + Tap 해당 방법을 이용하게 되면 태그가 새롭게 만들어 진다. 만약에 div 태그가 아닌 다른 태그를 쓰고 싶다면 첫 온점 앞에 자신이 사용하고자 하는 태그를 적어두면 된다. - index.html 태그 반.. 공감수 0 댓글수 0 2023. 11. 7.
트랜스폼, 애니메이션 조절하기 이번에는 tailwind을 이용한 트랜스폼, 애니메이션 기능에 대해서 알아보고자 한다. 트랜스폼 tailwind에서 transform이란 변환을 제어하는 클래스를 의미 한다. 크기 변환, 위치 변환, 등등 여러 움직임에 대한 변환을 제어 할 수 있다. 만약 움직임에 대한 시간을 부여하고 싶다면 duration 옵션을 통해 제어하면 된다. -index.html Click me Click me Click me 애니메이션 요소에 애니메이션적 요소를 추가하기 위한 클래스이다. 주로 아래 3가지가 자주 사용된다. animate-spin : 회전 animate-ping : 핑 animate-bounce : 바운스 animate-pulse : 펄스 애니메이션을 추가하거나, 원래 있던 속성을 변경하려고 한다면, 다음과.. 공감수 0 댓글수 1 2023. 11. 6.
플렉스, 그리드 조절하기 이번에는 tailwind을 이용한 플렉스, 그리드를 조절하는 방법에 대해서 소개하고자 한다. 플렉스 tailwind에서 flex는 하나의 공간을 의미하며, 공간의 크기를 조절하기 위해서 사용 한다. 일반적인 flex는 가로로 아이템이 쌓이며 flex-col을 통해 세로로 아이템들을 세울 수 있다. 만약 아이템이 flex박스를 넘어갈 때, 줄바꿈이 되길 원한다면 flex flex-wrap 클래스를 사용하면 된다. 항상 flex를 사용하다 보면, items와 justify에 대해서도 같이 나오는데 이에 대해서 알아본다. justify와 items 간단하게 설명하면 justfiy와 items는 정렬을 하기 위한 클래스이다. 아이템들을 위, 아래로 정렬하기 위해서는 items, 좌, 우로 정렬하기 위해서는 ju.. 공감수 0 댓글수 0 2023. 11. 5.
테두리, 필터, 상호작용 조절하기 이번에는 tailwind을 이용한 테두리, 필터, 상호작용을 조절하는 방법에 대해서 소개하고자 한다. 테두리 일반적으로 테두리를 표현하기 위해서 border을 사용한다. 만약에 테두리를 상, 하, 좌, 우 이렇게만 표현하고 싶다면, border-t, border-b, border-l, boder-r 처럼 표현이 가능하며 굵기는 뒤에 숫자를 붙여 boder-y-2 처럼 표현이 가능하다. 가끔 테두리의 각진 부분을 깎고 싶은 경우도 있는데 이는 rounded을 이용하여 처리한다. rounded-lg ~ full 까지 이용하여 깍임의 정도를 조절할 수 있다. 물론 상, 하 처럼 깎고 싶은 부분을 조절 할때는 rounded-t-xl, rounded-b-xl 처럼 중간에 방향만 추가하면 된다. 마지막으로 테두리의.. 공감수 0 댓글수 0 2023. 11. 5.
공간 사이즈, 레이아웃, 그림자와 그라데이션 조절하기 이번에는 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.. 공감수 0 댓글수 0 2023. 11. 5.
색 , 컨테이너와 공간, 타이포그래피 조절하기 현 포스팅 부터는 Tailwind에서 자주사용하는 18가지의 문법을 정리하고자 한다. 하나의 포스팅에는 3개 ~ 4개 정도의 분량의 내용을 정리하고 이를 복습하고자 한다. 이번 포스팅에서는 색, 컨테이너와 공간(마진, 패딩), 타이포그래피(글 간격, 폰트, 폰트 크기 조정)에 대해서 소개하고자 한다. Tailwind로 색을 표현하는 방법 tailwind로 색을 표현하기 위해서는 요소-색깔-색의 진함 정도를 사용하여 표현한다. 색의 진함의 정도는 100 ~ 900까지 가능하고 흰색이나 검은색 같은 경우는 진함 정도를 표현 할 수 없다. - index.html Tailwind is awesome Tailwind is awesome Tailwind is awesome tailwind is awesome tai.. 공감수 0 댓글수 0 2023. 11. 5.
Tailwindcss에 대하여, 설치 방법 최근 CSS에 대해 관심이 많던 도중, Tailwind 프레임워크가 눈에 들어와서 이를 공부하게 됬다. 몇 개의 미니프로젝트도 해봤었는데 CSS자체에 조금 허덕였던 나에게는 좋은 도구인 것 같아서 한번 소개해보고자 한다. Tailwind가 뭐고 왜 쓰는데요? tailwind는 Utility-First(미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 스타일링) 을 지향하는 CSS 프레임워크 입니다. CSS의 각 속성들을 클래스에 직관적으로 표현함으로써 효율적으로 html 파일 내에서 작성함으로써, 빠르게 구축한다는 것에 이점을 두고 있습니다. tailwind을 이용하여 코드를 작성한 예시는 아래와 같습니다. - Tailwind 적용 전 ChitChat You have a new message! .. 공감수 0 댓글수 0 2023. 11. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.