Flex FlexBox는 Flexible Box의 줄임말이다. 일단 크게 Flex에서는 두가지 형태의 요소들이 존재한다. 컨테이너 아이템 Flex - Container 처음에는 다음과 같이 시작된다. Flex 아이템들의 default direction은 row
transform 속성은 요소의 형태와 위치를 변경하기 위해서 사용됩니다. 이 속성은 2D 혹은 3D공간에서 요소를 회전확대 / 축소기울이기이동 등 다양한 변환을 적용할 수 있습니다.translateX(value)x축을 따라 요소를 이동합니다.translateY(val
css의 position속성은 문서 내의 요소의 위치를 지정하는데 사용됩니다. 이 속성을 사용하면 문서의 특정 위치로 이동시키거나, 다른 요소에 상대적으로 배치하는 것이 가능해집니다.default 위치 지정방식입니다.top, right, bottom, left속성을 사
A~B와 같은 형태로 사용될 때, A와 같은 부모를 공유하는 B요소들에 스타일을 적용한다. 다만, A요소 뒤에 나오는 B요소만 해당된다.slide1이라는 id를 가진 요소가 체크된 상태를 의미한다.체크된 위에서 선택된 .slider 요소 내부의 slide-content
object-fit은 대체 컨텐츠(<img> 또는 <video>)가 지정된 너비와 높이에 어떻게 맞추어질지를 지정합니다.이 속성은 주로 이미지나 주로 비디오와 같은 미디어 요소에 적용되며, 해당 요소의 비율을 유지하면서 특정 너비와 높이 내에서 어떻게 배치될
box-sizing은 css에서 요소의 크기를 계산하는 방법을 결정하는 속성이다.두가지 값이 사용된다.content-boxborder-box이 값이 설정되면, 요소의 너비와 높이는 오로지 콘텐츠 영역만을 포함하여 계산된다.패딩(padding)과 테두리(border)는