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 프론트엔드/TIL
• · 2025. 6. 14.
• textsms

CSS 이미지 비율 주는 방법

padding을 이용한 이미지 비율 정하는 방법👉 레거시 코드에서 많이 사용되었다.container이미지를 감싸는 요소의 높이를 0으로 주고 패딩 위 또는 아래로 너비의 비율과 같게 값을 준다.div는 블록요소이므로 이미지 한줄에 하나씩밖에 위치하지 못하므로 한줄에 여러줄을 주기위해서는 display: inline-block을 준다.img에서 position: absolute를 사용하기위해 container에서 position을 relative로 준다.imgposition: absolute와 top:0, left:0을 주어 부모위치의 왼쪽상단에 위치하도록 한다.이미지의 너비와 높이를 100%로 주어 부모 영역을 채운다.이미지가 흐려진다면 object-fit: cover를 해준다.aspect-ratio를..

• format_list_bulleted 카테고리 없음
• · 2025. 6. 9.
• textsms

CSS 선택자

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

• format_list_bulleted 프론트엔드/CSS
• · 2025. 6. 2.
• textsms

함수 호출 방식에 따라 달라지는 this

자바스크립트에서 this는 헷갈리기 쉬운 개념 중 하나다.특히 객체의 메서드를 다른 객체에 할당하거나 호출 방식이 달라질 때 this가 어떻게 바뀌는지 이해하는 것이 중요하다.아래 예제를 통해 this가 어떤 식으로 바인딩되는지 이해해 보려고한다.const obj = { name: 'John', greet: function() { console.log(this.name); // obj.greet() 호출 시 'John' }};const obj2 = { name: 'Kim', greet: obj.greet }};obj2.greet(); // 1) 결과는?const greetFunc = obj.greet;greetFunc(); // 2) 결과는? 1) obj2.g..

• format_list_bulleted 프론트엔드/JS
• · 2025. 5. 30.
• textsms

HTML 요소의 블록, 인라인, 인라인-블록 차이

block 요소블록 요소는 부모 요소의 전체 공간을 차지하여 블록을 만드는 요소다.좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지한다.줄바꿈이 일어난다.페이지의 구조적 요소를 나타낼 때 사용한다.블록 요소는 인라인 요소 안에 중첩 될 수 없지만 a태그는 블록 요소 중첩이 가능하다.(특이 케이스)inline 요소인라인 요소는 항상 블록 레벨 요소에 포함된다.콘텐츠에 따라 할당된 공간만 차지한다.width, height 크기 지정을 할 수 없다.padding, border, margin(left, right) 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없다.줄바꿈이 일어나지 않는다.inline-block 요소기본적으로 인라인 요소 속성을 따르면서 width, height 크기를 지..

• format_list_bulleted 프론트엔드/HTML
• · 2025. 5. 29.
• textsms