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 선택자

선택자일반 선택자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

시멘틱 태그

HTML의 시멘틱 태그는 문서의 구조와 의미를 명확하게 나타내기 위해 사용되는 태그다.이 규칙을 잘 지키면 웹접근성이 향상되고, SEO를 강화할 수 있다. 태그의미사용 예시 또는 설명문서나 섹션의 머리말 영역로고, 네비게이션, 제목 등이 위치함내비게이션 링크 영역메뉴, 링크 목록 등문서의 주요 콘텐츠페이지의 핵심 내용문서 내 주제별 구분 영역뉴스, 블로그 글 등 주제 단위로 콘텐츠 구분독립적인 콘텐츠 영역블로그 글, 기사, 포럼 글 등 단독으로 사용 가능한 콘텐츠보조 콘텐츠 영역광고, 관련 글, 사이드바 등문서나 섹션의 바닥글 영역저작권 정보, 연락처, 사이트 링크 등삽입된 이미지, 도표, 코드 등의 그룹화이미지와 캡션을 묶을 때 사용의 설명 또는 캡션이미지나 도표에 대한 설명 텍스트강조 표시형광펜처럼 ..

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