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. ..

위와 같은 코드에서 비디오를 재생하려면autoplay =”autoplay”를 넣어야 한다.→ 근데 안되는 경우도 있다. 소리가 있다면 재생이 되지 않는다. muted=”muted”→ 음소거 처리를 해야 영상 재생이 된다 loop=”loop”→ 재생을 계속하겠다. 위 속성들은 값이 생략이 가능하다.autoplaymutedloop이렇게 값 생략이 가능하게 속성만 사용 가능하다.