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

728x90

Ninny Design Skill/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 - 텍스트에 테두리/외곽선 그리는 두가지 방법 -webkit-text-stroke, text-shadow

-webkit-text-stroke텍스트에 테두리 선을 추가하는 속성. 텍스트 안쪽으로 테두리가 추가된다. 간단하게 테두리 너비와 색상만 지정해주면 된다. 그렇기 때문에 다양한 효과를 구현하기에는 어려움이 있다. 하지만 테두리에만 색상이 추가되기 때문에 텍스트 색상을 투명하게 바꿔주면 테두리만 있는 텍스트 디자인을 할 수가 있다. h1 { -webkit-text-stroke: 1px red; color: transparent; } 예시텍스트 테두리ABCDEFG 텍스트 테두리만ABCDEFG text-shadow텍스트에 그림자를 추가하는 속성. 기본값은 텍스트 바깥쪽으로 그림자를 추가하지만 마이너스(-) 값을 이용하면 텍스트 안쪽으로 그림자를 추가할 수 있다. 입체적인 느낌이나 강조효과를 줄..

reviews calendar_month 2024.04.22
Skill/CSS
CSS - 필터(filter)로 다양한 그래픽 효과주기

filterHTML 요소에 다양한 시각 효과를 적용하기 위해 사용한다. 이 속성은 이미지나 배경뿐만 아니라 텍스트나 다른 요소에도 그래픽 효과를 적용할 수 있다. 여러 함수를 조합하여 사용할 수 있으 순서는 상관없다.blur(px)블러 효과. 픽셀 단위로 블러 정도를 지정하고 값이 클수록 더 흐릿해진다.brightness(%)밝기를 조절. 100%가 기본값이며, 그 이상의 값은 밝게, 그 이하의 값은 어두워진다.contrast(%)명암 대비를 조절. 100%가 기본값이며, 그 이상의 값은 대비를 높이고, 그 이하의 값은 대비를 줄인다.drop-shadow(x y blur spread color)이미지에 그림자 효과. x, y 값은 위치를 나타내고 필수사항이다. blur는 블러정도(음수값 X)를, spre..

reviews calendar_month 2024.04.12
Skill/CSS
CSS - 영어, 한글 등 다국어/숫자 폰트 동시 적용 방법 2가지

font-family 하나 이상의 폰트계열 이름이나 일반계열 이름의 우선순위를 지정한다. 폰트계열 이름은 작은따옴표('')나 큰 따옴표("")로 표시해야하며, 일반계열 이름은 따옴표 없이 표시한다. 값은 쉼표로 구분하고 브라우저는 목록에서 설치되었거나 @font-face 규칙을 사용하여 다운로드 할 수 있는 첫번째 글꼴을 선택한다. 우선순위가 높은 것부터 가장 낮은 순으로 폰트 목록을 지정한다. 이러한 특성을 이용하여 영문/숫자, 한글 폰트를 다르게 설정할 수 있다. 적용방법 body { font-family: 'helvetica', 'gulim'; /* 반드시 영문/숫자폰트, 한글 폰트 순서로 */ } check_circle Check 일반적으로 영문폰트의 경우 한글폰트를 지원하지 않기 때문에 영문만 ..

reviews 1 calendar_month 2024.04.08
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
Skill/CSS
CSS - 자식 요소 가상 선택자 :nth-child(), :nth-of-type()

자식요소 가상 선택자부모안에 모든 요소중 특정 조건을 만족하는 요소를 선택하여 스타일을 적용할 수 있다. 다양한 방법으로 요소를 선택할 수 있다.:first-child자식 요소 중에서 제일 첫 번째에 위치하는 요소:first-of-type자식 요소 중에서 특정유형(태그)들 중 제일 첫 번째에 위치하는 요소:last-child자식 요소 중에서 제일 마지막에 위치하는 요소:last-of-type자식 요소 중에서 특정유형(태그)들 중 제일 마지막에 위치하는 요소:nth-child(n)자식 요소 중에서 인덱스를 기준으로 n 번째에 위치하는 요소들:nth-of-type(n)자식 요소 중에서 특정유형(태그)들을 기준으로 n번째에 위치하는 요소들:nth-las..

reviews calendar_month 2023.10.24
Skill/CSS
CSS - transform: rotate, scale, translate, skew (애니메이션 효과)

transform 요소의 모양, 크기 및 위치를 변경하는 데 사용된다. 다양한 변형 함수를 사용하여 요소를 회전(rotate), 크기 조정(scale), 이동(translate), 기울이기(skew) 등을 할 수 있다. 공통적으로 x, y, z축 또는 3D(x,y,z) 방향으로 변경한다. x축은 가로방향, y축은 세로방향, z축은 3D 변환에서 사용된다. x, y, z축을 함축해서 사용 할 수도 있는데 이때는 x, y, z축 순으로 작성한다. 여러 속성을 함께 사용하여 요소에 다양한 변형을 적용할 수 있다. 시각적 모양을 동적으로 변경하기 위해 주로 사용되며, 다양한 애니메이션 효과를 구현하는 데도 자주 활용된다. 애니메이션 효과를 구현할때 자연스러운 움직임을 위해 transition 속성을 함께 사용한..

reviews calendar_month 2023.10.07
Skill/CSS
CSS - display: flex 속성과 사용법

display: flexdisplay 속성의 값 중 하나인 "flex"는 CSS의 레이아웃을 제어 할 때 아주 유용하다. 부모 요소(이하 컨테이너)의 자식 요소(이하 아이템)들 간의 간격, 크기, 정렬 등을 편리하게 제어할 수 있습니다. flex의 속성은 컨테이너에 적용하는 속성과 아이템에 적용하는 속성이 있다..container { display: flex;} flex 컨테이너 속성flex-direction아이템들이 배치되는 축의 방향을 결정하는 속성..container { flex-direction: row; flex-direction: column; flex-direction: row-reverse; flex-direction: column-reverse;}row가로로 배치(기본값)column세로..

reviews calendar_month 2023.10.06
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

티스토리툴바