웹개발 (3) 썸네일형 리스트형 [CSS] 텍스트에 그라데이션(Gradient) 넣기 이미지 파일 필요 없이, CSS만으로 글자에 그라데이션(Gradient)를 넣을 수 있다. background: linear-gradient(방향, 컬러1, 컬러2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; HTML 삽입 미리보기할 수 없는 소스 참고 링크 https://cssgradient.io/blog/css-gradient-text/ https://css-tricks.com/snippets/css/gradient-text/ [CSS] 코드 한 줄로 숫자 폭(Width) 고정하기 숫자의 폭이 고정되야할 경우가 있다. 고정폭 폰트를 쓰는 것이 근본적인 해결책이겠지만, 디자인상 필요에 의해 가변폭 폰트(예: Pretendard)를 쓰는 경우도 많다. 해결방법 font-variant-numeric: tabular-nums; HTML 삽입 미리보기할 수 없는 소스 간단한 카운트 다운을 만들어봤다. 위쪽은 숫자가 바뀜에 따라, 옆 텍스트가 움직이는 반면 아래쪽은 숫자가 바뀌더라도 움직이지 않는 것을 볼 수 있다. [CSS] 자식 div 동일하게 나누기 UI를 만들다보면, 아이템을 동일한 넓이로 나눠야할 경우가 있다. 내가 기존에 쓰던 방식이 2가지가 있다. 1. calc(100% / 아이템의 숫자) width를 직접 지정하지 않아도 된다는 점은 좋다. 하지만, 아이템 개수가 달라질때마다 분모의 숫자를 일일이 바꿔야 한다. 2. flex-basis: 100% flex를 이용한 방식으로, 일반적인 상황에서는 문제가 없다. 하지만, flex는 content-size를 기준으로 넓이를 설정하기 때문에 아이템의 padding이 동일하지 않은 상황에서는 각각의 width가 달라지게 된다. 해결방법 간단하다. 그냥 부모에 grid를 적용하면 된다. display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; HT.. 이전 1 다음
