프론트엔드/CSS

기본 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 특정 줄 수 이상만 ...으로 표시 display: -webkit-box; -webkit-line-clamp: 3; // 3줄 이상이면 ellipsis 적용 -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; overflow-wrap: break-word;

dd const ImgNutritionalWrap = styled.div` width: 160px; display: flex; scroll-snap-type: x mandatory; overflow-x: auto; /* 스크롤바 제거 */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ &::-webkit-scrollbar { display: none; /* Chrome, Safari */ }`;const Img = styled.img` width: 100%; height: auto; border-radius: 12px; scroll-snap-align: start;`;const Nut..

1. PC (데스크탑)평균 너비: 1280px ~ 1920px평균 높이: 800px ~ 1080px화면 비율은 대부분 16:9나 16:10을 따릅니다.2. 태블릿평균 너비: 768px ~ 1024px평균 높이: 1024px ~ 1366px태블릿은 가로/세로 모드 모두 고려해야 하며, 가로 모드에서 반응형이 어떻게 보이는지도 중요합니다.3. 휴대폰 (스마트폰)평균 너비: 360px ~ 414px평균 높이: 640px ~ 896px최근 스마트폰은 5인치 이상의 대화면이 많아졌지만, 360px ~ 414px 정도의 너비가 여전히 많이 사용됩니다. 높이는 기기마다 다양하지만 세로 길이는 평균적으로 640px 이상입니다.미디어 쿼리 사용 시 대략적인 기준PC: 너비 1024px 이상태블릿: 너비 768px ~ 1..

`@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; // 보더와 컨텐츠 사이 빈공간 생성 }`;