gradient border mask를 활용해서 border-radius도 가능하고 중간을 비울 수도 있는 방법입니다. .box { position: relative; } .box::before { content: ""; position: absolute; inset: 0; border-radius: 50px; padding: 10px; background:linear-gradient(45deg,red,blue); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } 출처: https://dev.to/afif/bord..
input을 선택했을 때 앞에 위치한 select에도 스타일을 넣기 위해 한참 연구한 결과 방법을 찾아냈습니다. focus-within을 사용하면 뒤쪽에 위치한 요소에 focus가 갔을 때도 앞쪽에 있는 요소에 스타일을 줄 수 있습니다. html이 이렇게 짜여 있을 때 input에 focus가 있을 때 앞쪽에 있는 요소에도 함께 스타일을 넣어야 할 때 사용할 수 있습니다. div { &:focus-within > * { // style } } // or div { &:has(input:focus):focus-within select { // style } }
웹 디자인을 하다 보면 숫자를 사용할 일이 반드시 있습니다. 값의 변화 없이 고정된 위치에서만 사용되는 숫자라면 폭 변화에 신경 쓰지 않아도 되지만 카운트 다운(Count down)이나 진행상태(Progress bar)를 표현할 때는 실시간으로 숫자가 바뀌게 됩니다. 이때 고정폭 폰트를 사용하지 않으면 빠르게 변화가 일어날 때는 텍스트의 길이가 좌우로 계속 왔다 갔다 하는 모습을 보게 됩니다. 계속 일정한 상태를 보여주기 위해서는 두 가지 방법을 사용해 볼 수 있습니다. 고정폭 글꼴(Monospaced font) 폰트를 사용한다. OpenType 기능을 지원하는 폰트를 사용하고 스타일(css)에서 고정폭에 대한 값을 세팅해준다. 1. Monospace 폰트 사용 구글 폰트(https://fonts.goo..
grid-template-areas를 사용하며 하는 단순하지만 발견하기 어려운 실수가 있습니다. grid-template-areas를 사용하다가 갑자기 안되면 한 번 확인해보세요. 1. 따옴표(" , ')를 확인하세요 grid-template-areas로 영역을 이름으로 지정할 때는 따옴표(Quotation marks)를 사용해 구분합니다. 그리고 각 영역의 이름은 grid-area로 지정해주는데 grid-area는 따옴표가 필요없습니다. grid-area를 사용할 때는 따옴표(", ')를 쓰지 않습니다. grid-template-areas: "header header" "side main" "footer footer"; .header { grid-area: header; } .side { grid-ar..
npm install --save-dev gulp gulp-postcss gulp-sourcemaps autoprefixer browser-sync cssnano gulpfile.js var gulp = require("gulp"), sass = require("gulp-sass"), postcss = require("gulp-postcss"), autoprefixer = require("autoprefixer"), cssnano = require("cssnano"), sourcemaps = require("gulp-sourcemaps"); var browserSync = require("browser-sync").create(); var paths = { styles: { //scss 파일 위치 src..