1. 공간 나누기 Section Contents Section Header Section Contents 이러한 식으로 section을 통해 서로의 공간을 나누는 것이다.예를 들면 반찬이 들어간 식판의 공간들을 나누며, 그 반찬이 아니더라도 공공재, 레이아웃 느낌으로 만들어야 한다. 여기서 .section의 역할을 제한시킨다. 아래 2번에 title 컴포넌트를 만들어 역할 제한간격 100px 부여배경색 테마 2. 공간안에서의 컴포넌트 나누기 아래와 같이 헤더 부분에 한덩어리에 타이틀을  같이 한다면 이 컴포넌트는 강제성을 띄게 된다.여기..

1. transform이는 요소의 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있는 속성을 말한다.transform은 translation, animation과 함께 사용하게 되면 다채로운 애니메이션 효과를 만들 수가 있다. 여기서 변형이 가능한 요소만 transform을 할 수 있다.즉, CSS 박스 모델이 레[이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있다. transform의 속성은 다음과 같다scale (크기)skew(x-angle, y-angle)translate(x, y)rotate(angle)변환 함수를 프로퍼티 값으로 쉼표 없이 나열을 하는데, 나열 순에 따라 차례대로 효과가 적용이 된다.transform: s..

네거티브 마진 /* 전체 뷰포트 너비 */ --viewport-width: 100vw; /* margin의 % -> 컨테이닝블록의 너비 기준으로 계산, 즉 100%는 컨테이닝 블록의 너비 */ --containing-block-width: 100%; /* 양쪽 날개 너비 구함 */ --wings-width: calc(var(--viewport-width) - var(--containing-block-width)); /* 한쪽 날개 너비 구함 */ --wing-width: calc(var(--wings-width) / 2); /* 네거티브 마진으로 변환 */ --wing: calc(var(--wing-width) * -1); --wing: calc(((100vw - 100%) / 2) ..

1. auto-fill grid-template-columns: repeat (auto-fill, minmax(200px, 1fr));이렇게 하면 200px 만큼씩 채우게 되는데 만약 공간이 남게 된다면 아래와 같이 공간을 만든다. 2. auto-fitgrid-template-columns: repeat (auto-fit, minmax(200px, 1fr));이는 빈공간 없이 꽉 채우는 것이다.

1. justify-content / align-contentjustify-content, align-content의 초기값은 stretch이다.여기서 원래 초기값은 normal이지만, flexbox에서는 flex-start, grid는 stretch이다.-> normal로 설정된 이유는 범용적으로 사용할 수 있게 개발자들이 설정해둔 것이다. 원룸(가상 컨테이닝 블록)자체의 너비가 최대치로justify-content: stretch;align-content: stretch; 위와 같이 부모 컨테이너 안에서 이렇게 정렬이 된다. 아래와 같이 컨테이닝블록이 설정이 되어있다.  2. justify-items / align-itemsjustify-items : stretch(초기값) -> 아이템 1개 내부에서의..

Flex vs Grid2. Flexbox(Flexible Box Layout)1차원 레이아웃 : flexbox는 한 방향(가로 또는 세로)으로만 아이템을 배치하는 데 최적화된 레이아웃 시스템이다. 주로 하나의 축(수평 또는 수직)에서의 정렬과 배치에 적합하다.아이템 정렬 : Flexbox는 개별 아이템 간의 공간 분배와 정렬에 유연한 옵션을 제공한다. 예를 들어 아이템을 중앙 정렬하거나 균등하게 간격을 두는 것이 매우 쉽다.순서 변경 : Flexbox는 DOM 순서와는 별개로 레이아웃에서 아이템의 순서를 쉽게 변경할 수 있는 기능을 제공한다.사용 사례 : Flexbox는 작은 UI 요소의 레이아웃(예: 버튼 그룹, 네비게이션 바, 카드 목록)이나 한 방향으로 배치해야 하는 간단한 레이앗에 적합하다.3. ..