[CSS] 텍스트 그라디언트 text gradient 사용하는 법. TailwindCSS

TailwinCSS를 사용하면서, 텍스트에 gradient를 사용해야 할 필요가 생겼습니다. 요소의 배경에 gradient를 넣어 본 적은 있어도, 텍스트에 적용한 적이 없다는 것을 알고 기록하고자 포스팅 해봅니다! ❓CSS에서 Text Gradient를 사용하는 방법? 검색해본 결과, CSS에서 텍스트에 gradient를 적용시키기 위해선, webkit에서 제공하는 도구를 사용하면 된다는 것을 알았습니다. HTML 삽입 미리보기할 수 없는 소스 background-clip - CSS: Cascading Style Sheets | MDN The background-clip CSS property sets whether an element's background extends underneath its b..

• format_list_bulleted 개발관련/CSS
• · 2024. 2. 8.
• textsms

[CSS] “flex : 1”이 뭘까?

클론 코딩을 하는 와중, flex:1이란 코드를 발견하였습니다. 이 코드로 인해서 요소가 딱 원하는 너비를 가지게 되었는데, 도대체 왜 이런 현상이 나타나는 건지 짚고 넘어 가보려 합니다! 🤔”flex : 1”이 뭐지? flex : 1 속성은 flex-grow, flex-shrink, flex-basis의 단축 속성으로 flex : “grow” “shrink” “basis” 순서를 따릅니다. ‘flex-grow” 속성이 생략되면 기본값은 0, ‘flex-shrink 속의 기본값은 1, ‘flex-basis’의 기본값은 auto입니다. flex : 1 의 값은 shrink, basis 속성값이 생략된 것으로 다음과 같습니다. flex-grow : 1; flex-shrink : 1; flex-basis : ..

• format_list_bulleted 개발관련/CSS
• · 2023. 7. 22.
• textsms

CSS linear-gradient 배경에 transition 트랜지션 적용시키기

일반적으로 background에 linear-gradient 적용하는 법 .element { background: linear-gradient(red, blue); } 일반적으로 linear-gradient는 위와같이 작성합니다. 하지만 background 속성은 transition에 적용되지 않습니다. .element { background: linear-gradient(red, blue); transition: background 0.2s ease; //적용안됨 } linear-gradient 속성을 transition 적용하는 법 간단하게 background-image 속성을 이용하면 됩니다. .element { background-image: linear-gradient(red, blue); tr..

• format_list_bulleted 개발관련/CSS
• · 2023. 6. 30.
• textsms

CSS 반응형 사각형 만들기. Responsive Square with CSS

How to Create a Responsive Square with CSS I needed to create a square element that would maintain its square shape as it responsively resized to a changing window size. spin.atomicobject.com 위의 글을 참고하였습니다 너비를 알 때 높이 지정 없이 반응형 사각형 만들기 CSS의 너비, 높이 값을 %값으로 적용함으로 써 반응형 요소를 만들 수 있는데, 정확한 %값을 알지 못하는 경우가 많다. 그럴경우 반응형 사각형을 만드는 일이 까다롭게 느껴져 방법을 찾았다. width값을 지정한다. 원하는 요소의 width값을 %로 지정하여 요소의 원하는 크기를 설정한다...

• format_list_bulleted 개발관련/CSS
• · 2023. 6. 16.
• textsms