CSS (3) 썸네일형 리스트형 CSS. object-fit 속성 알아보기 object-fit CSS object-fit 속성은 나 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다. object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다. contain 대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 레터박스 처럼 됩니다. cover 대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다. fill 요소 콘텐츠 박스 크기에 맞춰 대.. CSS. flexbox를 이용한 container 배치 화면을 세팅할 때 CSS로 DIV 박스를 마음대로 배치하는 일은 쉬운 일이 아닙니다. 이 경우 flexbox 배치를 통해 배치하면 좀 더 효율적인 배치를 할 수 있습니다. 먼저 flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성되는데 flexbox를 만드는 방법은 간단합니다. 정렬하려는 요소의 부모 요소에 다음과 같이 display: flex 속성을 선언하면 됩니다. .flex_container { display: flex; } display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 됩니다. flex item은 주축(main axis)에 따라 정렬되고, 주축의.. CSS / 기초 / !important CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다. property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 글자색을 빨간색으로 유지합니다. p { color: red !important; } p { color: blue; } 다시 속성값을 재설정하고 싶으면 !important를 다시 붙입니다. 예를 들어 다음은 문단의 글자색을 녹색으로 만듭니다. p.. 이전 1 다음
