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

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) 이용하여 격자 무늬&줄무늬&체크 무늬&도트&삼각&지그재그 패턴 배경 만들기

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

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

사이트소개Flex는 레이아웃을 활성화하는 속성으로, 컨테이너 내의 요소들을 효율적으로 배치하고 정렬할 수 있는데 그 속성들을 직관적으로 볼 수 있는 사이트이다. Flex의 기본 개념과 사용법을 볼 수 있으며, 실제 예제를 통해 사용자가 이해하고 적용할 수 있다. display: flex flexbox.help 사용방법해당 사이트에 접속한다.원하는 요소의 갯수대로 CHILD COUNT를 조정한다.적용하고자 하는 속성의 버튼을 클릭한다.원하는 결과물의 CSS OUTPUT을 복사하여 사용한다. flex 컨테이너 속성flex-direction아이템들이 배치되는 축의 방향을 결정하는 속성row가로로 배열(기본값)column세로로 배열row-reverse가로로 역순 배열column-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: h..

reviews calendar_month 2023.09.23

chevron_left이전

1

chevron_right다음

티스토리툴바