Tailwind CSS 주요 속성별 기준점 정리

간격 시스템 (Spacing Scale)기준: 1 = 0.25rem = 4px0 = 0px1 = 4px, 2 = 8px, 3 = 12px, 4 = 16px5 = 20px, 6 = 24px, 8 = 32px, 10 = 40px12 = 48px, 16 = 64px, 20 = 80px, 24 = 96px32 = 128px, 40 = 160px, 48 = 192px, 64 = 256px적용: padding(p-), margin(m-), width(w-), height(h-), top/right/bottom/left, gap 등폰트 크기 (Font Size)text-xs = 12pxtext-sm = 14pxtext-base = 16px (기본값)text-lg = 18pxtext-xl = 20pxtext-2xl =..

• format_list_bulleted CSS
• · 2025. 6. 22.
• textsms

애니메이션과 3D관련 속성을 이용한 간단한 동작구현

오늘은 CSS로 3D animation을 구현하는 방법을 공부했다.transform의 여러 속성들과 animation 관련 속성들로이런 결과물을 만들어 냈다.N장의 이미지가 원통 모양으로 배치되어 회전하는 구조 원의 둘레 = 이미지의 너비 * 이미지 갯수원의 반지름 = 원의 둘레 / (2 * 3.14)각 이미지 사이의 각도 = (360 / 이미지 갯수 ) * N 처음에 너무 많은 속성들을 한번에 공부해서 어떤 속성을 배웠는지 가물가물했다.그래도 각 속성들을 이해하고 도움없이 다시 처음부터 만들어보는 작업을 하고나니 머릿속에 정리가 잘된거같다. 일단 위 공식을 이용해야한다. wrapper(할아버지) item-container(부모님) item1(자식) img ..

• format_list_bulleted CSS
• · 2025. 6. 14.
• textsms

CSS 선택자

선택자일반 선택자div button => 자손 선택자div > button => 자식 선택자div ~ button => 형제 선택자div + button => 인접 선택자속성 선택자[속성이름]: 해당 속성을 가진 모든 요소를 선택[속성이름='속성값']: 해당 속성값을 가진 모든 요소를 선택[속성이름~='속성값']: 특정 단어를 포함하는 요소를 선택[속성이름|='속성값']: 해당 문자열만 또는 특정 문자열로 시작하면서 하이픈(-)이 오는 요소를 선택[속성이름^='속성값]: 해당 문자열로 시작하는 요소를 모두 선택[속성이름$='속성값']: 해당 문자열로 끝나는 요소를 모두 선택[속성이름*='속성값']: 해당 문자열을 포함하는 요소를 모두 선택가상 클래스 선택자요소의 특정 상태를 선택할 수 있게 해주며 콜론(..

• format_list_bulleted CSS
• · 2025. 6. 2.
• textsms