![]()
display : flex 값을 가진 엘리먼트는 자식 요소로 인해 넘침이 일어나도 스크롤이 작동되지 않는다. 이 이유 자세히 설명해줘 display: flex;에서 스크롤이 동작하지 않는 이유display: flex;를 가진 부모 요소에서 자식 요소가 넘쳐도 스크롤이 작동하지 않는 이유는 기본적인 Flexbox의 동작 방식 때문입니다.즉, Flex 컨테이너는 기본적으로 자식 요소를 '압축'하지 않고, 오히려 컨테이너의 크기를 조절하려고 하기 때문입니다.1. Flexbox는 기본적으로 컨테이너 크기를 조절한다.Flexbox는 자식 요소가 넘칠 경우, 부모 컨테이너 크기를 늘리는 방식으로 배치합니다.즉, 부모 요소는 자식 요소의 크기에 맞춰 확장되며, 스크롤이 발생하지 않습니다.📌 예제 (스크롤이 안 되는..
![]()
기본 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 "..
