프론트엔드/CSS

`@extend`와 `@mixin`은 SCSS에서 스타일을 재사용하기 위한 두 가지 주요 방법입니다. 이 두 가지 방법은 스타일 코드의 유지보수와 재사용성을 높여주지만, 각각의 사용 방식과 성능에 차이가 있습니다. 아래에서 두 방법의 실제 성능 차이와 사용상의 장단점을 비교해 보겠습니다. ### 1. **`@extend`의 특성 및 성능** `@extend`는 선택자 간에 **스타일을 공유**하도록 해줍니다. 이를 통해 중복 코드를 제거할 수 있지만, **CSS의 구조**에 영향을 미칩니다. - **장점**:   - **코드 중복 제거**: 여러 클래스가 동일한 스타일을 공유할 때 중복된 스타일 정의를 피할 수 있습니다.   - **간결한 코드**: `@extend`를 사용하면 특정 스타일을 다른 셀렉터..

코드HTML 1 2 3 4CSS.scroll-container { height: 100vh; /* 부모 컨테이너가 화면 전체의 높이를 차지하도록 설정 */ overflow: auto; /* 스크롤이 가능하도록 설정 (세로 방향 스크롤) */ scroll-snap-type: y mandatory; /* 세로 방향(y축)으로 스냅 효과를 강제 적용 (페이지처럼 넘기기) */}.scroll-area { scroll-snap-align: start; /* 각 스크롤 섹션이 스냅될 때 시작 지점에서 정렬되도록 설정 */} 참고문서 🎨 스크롤을 부드럽게 - Scroll Snap 속성CSS Scroll snap CSS Scroll snap은 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치..

https://velog.io/@chchaeun/%ED%8C%8C%EC%9D%BC-%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%B2%A8%EB%B6%80-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8 파일 Drag and Drop 기능을 구현하자!사용자 경험 개선을 위한 파일 Drag and Drop 기능 추가velog.io  import React, { useState } from "react";import styled from "styled-components";import dndImage1 from "../assets/DnDBox1.svg";import dndImage2 from "../assets/DnDBox2.svg";import uploadIcon1 from "..

const StyledRadio = styled.input.attrs({ type: 'checkbox' })` -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; border: 2px solid #ccc; border-radius: 50%; outline: none; cursor: pointer; &:checked { background-color: #22d3ee; // 체크 시 원형 색깔 background-clip: content-box; //컨텐츠 영역만 색칠(원래는 컨텐츠+패딩 색칠) padding:2px; // 보더와 컨텐츠 사이 빈공간 생성 }`;

import styled from 'styled-components'; // 기본 스타일 const Button = styled.button` background-color: ${(props) => (props.primary ? 'blue' : 'green')}; color: ${props => props.color || 'black'}; /* props로 전달된 color 값이 없으면 기본값은 검정색 */ padding: 10px; border: none; `; // 예제에서 사용할 컴포넌트 const MyComponent = () => { return ( {/* primary prop이 true인 경우 파란색 배경, 그렇지 않으면 녹색 배경 */} Primary Button Secondary Butt..

https://codingbroker.tistory.com/66 [HTML, CSS] 스크롤바 스타일(디자인)하는 방법 - webkit-scrollbar 스크롤바 스타일에 관한 웹표준은 존재하지 않습니다. 다만 wekbit 브라우저(크롬, 사파리, 오페라)에 한해서 가상요소를 사용하여 스타일을 적용할 수 있습니다. 다음과 같이 스크롤바가 생성된 codingbroker.tistory.com

// index.css 에 추가 html, body, #root { width:100%; height:100%; }