Mong dev blog

CSS28

[CSS] clip-path로 별점(Rating) UI 구현하는 법 (with. vue 컴포넌트 예시 포함)
1. 들어가며…이번 시간에는 별점을 매기는 Rating 기능을 구현하는 법을 알아보았다.Rating을 구현할 때 키 포인트는 (1) 빈 별 & 색이 차있는 별를 겹쳐야 하며, (2) clip-path로 색이 차 있는 별 일부를 보여줘야 한다.해당 포스팅을 다 읽고 나면, css의 clip-path 사용법과 Rating 기능 구현을 할 수 있게 된다.1) clip-path는 무엇일까?clip-path는 CSS 속성 중 하나로, 요소의 일부분을 잘라내거나 요소의 특정 영역만 표시할 때 쓴다..element { clip-path: ;}: 요소를 자르는 도형의 형태(ex. clircle, ploygon, inset 등): 도형의 위치와 크기를 결정하는 좌표 값 (1) 속성 살펴보기circle()은 원형으..
2024. 8. 28.
[JS] RangeSlider를 구현하는 법(feat. 중첩 range input)
1. 들어가기 전에…범위 슬라이더(range slider)는 사용자가 특정 범위 내에서 최소, 최대값을 선택할 수 있는 UI 요소이다.이번 포스팅에서는 두 개의 input을 이용해 범위 슬라이더를 구현하는 방법에 대해 알아보았다!이 포스팅을 다 읽고 나면 아래와 같은 형태의 범위 슬라이드를 구현할 수 있다 🙂2. 어떻게 구현할 수 있을까?1) HTML 구조💡 먼저, 범위 슬라이더를 구성할 기본 HTML 구조를 정의해야한다.구조는 두 개의 input 요소와 진행 상태를 표시하는 요소, 두 개의 핸들로 구성된다.(1) 코드보기 요소역할range-slider-container- 최상위 컨테이너slider-track- 슬라이더의 트랙 또는 배경 역할p..
2024. 7. 14.
input 유효성에 따라 스타일링하는 3가지 방법 (invalid, user-invalid, out-of-range)
1. 입력값이 유효한지 알려줘야지~ 우리는 사이트를 방문할 때 여러가지 입력창을 마주하게 된다. 그리고 특정 입력창은 사용자에게 요구하는 입력 데이터 형식이 있다. 만약 사용자가 입력한 값이 형식에 맞지 않다면, 형식에 맞지 않은 값이라는 걸 알려주는 게 중요하다. 💡 그렇다면, 어떻게 해야 사용자에게 값이 유효하지 않은지 알려줄 수 있을까? 이번 시간에는 사용자가 유효하지 않은 값을 입력했을 때, 그리고 값이 허용 범위를 벗어났을 때, 스타일을 달리 적용하는 방법을 알아보았다. 2. 유효성에 따라 스타일링하는 3가지 방법 (1) :invalid, :valid, 값 유효성에 따라 실시간 스타일링 :invalid는 사용자가 입력한 값이 유효하지 않을 때 스타일이 적용된다. :valid는 사용자가 입력한 값..
2024. 1. 6.
[CSS] 왜 transform 애니메이션 성능이 좋을까? (with. GPU, Reflow)
1. Left 애니메이션은 왜 끊길까? transform, left 속성으로, 대각선 방향으로 움직이는 공 애니메이션을 만들어봤다. See the Pen Animate with Translate and left by KumJungMin (@kumjungmin) on CodePen. 보기에는 둘 다 잘 동작하는 거 같은데, 만약 JS에서 복잡한 연산을 실행하면 어떻게 될까? gif를 보면 알 수 있듯이 JS에서 복잡한 연산을 하자, left 애니메이션이 잠시 끊기는 걸 볼 수 있다. 그럼 두 애니메이션의 성능은 어떨까? [Chrome] > [성능]에서 성능을 측정해보았다. transform 애니메이션의 경우 별다른 성능 이슈가 없는 것으로 보인다. 그에 반해 left 애니메이션은 “누적 레이아웃 변경으로 ..
2023. 11. 28.
CSS 색상 변수에 투명도를 주는 방법(feat. js)
0. 들어가기에 앞서… 서비스에서는 각 서비스의 고유한 성격에 맞는 색상이 존재하며, 각 색상들은 개발자와 디자이너의 원활한 소통을 위해 변수화한다. 이렇게 색상을 변수화하면 서비스 컬러를 유지보수하기 쉽고, 다크모드를 적용할 때도 유용하다. 하지만 색상 변수에 투명도를 주어야 하는 경우, 예상치 못한 문제가 발생한다. 아래 코드는 CSS 색상 변수를 root에 선언한 것이다. /* Light Mode Colors */ :root { --primary-color: #007bff; } See the Pen css variable example by KumJungMin (@kumjungmin) on CodePen. 만약 색상 변수에 투명도를 주고 싶다면 어떻게 해야 할까? rgba() 함수로 투명도를 줄까 ..
2023. 4. 9.
[CSS] placeholder-shown vs placeholder
💡 placeholder(자리표시자)는 입력창(input, textarea)에 글을 입력하지 않았을 때, 보이는 글자이다. placeholder 관련 CSS 가상 선택자, 요소에는 여러가지가 있는데, 이번시간에는 그 중 ::placeholder와 :placeholder-shown에 대해 알아보았다! 1. ::placeholder란? 1) ::placeholder은 무엇인가요? ::placeholder는 placeholder 글자의 가상 요소이다. 가상 요소란, HTML에는 존재하지 않지만 스타일링을 위해 만든 요소를 말한다. ::placeholder를 사용하면, placeholder 글자의 스타일을 변경할 수 있다. /* 사용 방법 */ input::placeholder { ... } 2) 사용 예시 (..
2023. 2. 2.
[CSS] font-display, 글꼴 렌더링 방식을 변경하는 방법
🙂 이번 시간에는 글꼴 랜더링 방식을 컨트롤 하는, font-display에 대해 알아보았다! 1. 글꼴 랜더링 방식 우리가 어떤 사이트에 들어갔을 때 글자가 늦게 나타나거나, 혹은 글꼴이 나중에 적용되는 경우를 볼 수 있다. 이 두 현상은 각각 지칭하여 FOIT, FOUT라고 부르는데, 설명은 아래와 같다. 방식 설명 Flash of Invisible Text (FOIT) 브라우저가 글꼴을 다운로드하기 전까지 글자를 보여주지 않음 Flash of Unstyled Text (FOUT) 브라우저가 글꼴을 다운로드하기 전까지 글꼴이 적용되지 않음 그런데 서비스 특성에 따라 글꼴 랜더링 방식을 변경할 순 없을까? font-display를 사용하면 가능하다 🙂 2. font-display란? 💡 font-dis..
2022. 12. 22.
[CSS] 애니메이션 동작을 컨트롤하는, prefers-reduced-motion
🏃 이번 시간에는 OS의 애니메이션&모션 동작을 줄이는 prefers-reduced-motion에 대해 알아보았다! 1. prefers-reduced-motion란? 1) 동작을 컨트롤하는 prefers-reduced-motion prefers-reduced-motion는 유저의 OS의 동작 줄이기 설정에 따라, 애니메이션을 컨트롤하는 미디어쿼리이다. 이 미디어쿼리는 no-preference, reduce 총 2가지 값을 제공한다. 속성 설명 no-preference - 사용자가 별도의 설정을 하지 않은 경우 - 동작 줄이기 설정을 하지 않은 상태 reduce - 사용자가 동작 줄이기를 지정한 경우 @media (prefers-reduced-motion: no-preference) { /* 동작 모드에서..
2022. 12. 11.
[CSS] Media Query 비교연산자(<, >, =)
1. 미디어 쿼리란? (media query) 미디어 쿼리(media query)는 뷰포트 크기에 따라 스타일을 지정할 수 있는 CSS 기능이다. 만약 모바일, 태블릿, 데스크탑별로 다른 스타일을 적용해야한다면, 미디어 쿼리를 쓰면 된다. /* 미디어 쿼리 기본 문법 */ @media (조건) { 스타일 } 미디어 쿼리 조건에는 min-width, max-width, min-height, max-height 등이 있다. 아래 예시는 뷰포트의 너비가 300px이상일 때, .box의 배경색을 red로 지정하는 코드이다. @media screen and (min-width: 300px) { .box { background-color: red; } } 📌 그런데! Media Queries Level 4에서는 비..
2022. 11. 9.

티스토리툴바