닌니디자인의 포스팅을 검색 해주세요.

728x90

Ninny Design css

Skill/CSS
CSS - min-content, max-content, fit-content

min-content요소의 콘텐츠가 최대로 줄어들었을 때의 크기. 텍스트나 이미지가 줄어들 수 있는 최소한의 크기다..example { width: min-content;} max-content요소의 콘텐츠가 줄어들지 않고 자연스럽게 늘어났을 때의 크기. 콘텐츠가 차지할 수 있는 최대 크기다..example { width: max-content;} fit-content요소의 크기를 min-content와 max-content 사이에서 적절하게 맞춰준다. 주어진 크기에 맞춰 요소가 축소되거나 확장되며, 특정 크기 범위 내에서 콘텐츠에 맞게 요소의 크기가 조정된다..example { width: fit-content(300px);}

reviews 1 calendar_month 2024.05.29
Skill/CSS
CSS - 그라데이션(gradient) 이용하여 격자 무늬&줄무늬&체크 무늬&도트&삼각&지그재그 패턴 배경 만들기

CSS Gradients그라데이션(gradient) 속성을 사용하면 두 개 이상의 지정된 색상이 변화한다. linear-gradient, radial-gradient, conic-gradient 세 가지 유형의 그라데이션 종류가 있다. 이 세가지의 그라데이션 종류와 색상, 위치, 각도 등의 속성을 이용하면 다양하고 독특한 그래픽 효과를 만들 수 있다. /*아래로/위로/왼쪽/오른쪽/대각선으로 이동*/#grad-linear { background-image: linear-gradient(red, yellow); }/* 중심에서부터 이동 */#grad-radial { background-image: radial-gradient(red, yellow);}/* 중심점을 중심으로 회전 */#grad-conic ..

reviews 2 calendar_month 2023.12.21
Tip/사이트 추천
display: flex; 아이템 속성/정렬 한눈에 확인 가능한 사이트

사이트소개 CSS Flexbox에 대한 이해를 돕기 위한 유용한 웹사이트입니다. Flexbox는 웹 개발에서 레이아웃을 조정하는 데 사용되는 강력한 CSS 속성입니다. 이 사이트는 Flexbox의 기본 개념과 사용법을 보여주며, 실제 예제를 통해 사용자가 이해하고 적용할 수 있도록 도와줍니다. display: flex flexbox.help 사용방법 해당 사이트에 접속한다. 원하는 요소의 갯수대로 CHILD COUNT를 조정한다. 적용하고자 하는 속성의 버튼을 클릭한다. 원하는 결과물의 CSS OUTPUT을 복사하여 사용한다. flex 컨테이너 속성 flex-direction 아이템들이 배치되는 축의 방향을 결정하는 속성 row 가로로 배열(기본값) column 세로로 배열 row-reverse 가로로 ..

reviews calendar_month 2023.10.25
Skill/CSS
CSS - text-overflow: ellipsis; 글자/글씨 자르기 (한줄/여러줄)

text-overflow: ellipsis; CSS에서 "ellipsis"는 텍스트가 요소의 영역을 벗어날 때 사용되는 효과이다. 이를 사용하여 긴 텍스트를 축약하고 생략 부호 (...)를 추가하여 사용자에게 더 많은 정보가 있음을 알리는 데 도움이 준다. 요소에 적합하지 않는 긴 텍스트를 축약하고, 요소의 크기 내에 맞출 수 있다. 예시 /* 한줄 자르기 */ .text { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-wrap: normal; } /* 여러줄 자르기 */ .text { white-space: normal; text-overflow: ellipsis; overflow: hidden; display: -webki..

reviews calendar_month 2023.09.23

chevron_left이전

1

chevron_right다음

728x90

티스토리툴바