h2 element에 적용하는 사례 gradientText { background: -webkit-linear-gradient(45deg, red, blue); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

📍배경 styled-components로 팀 프로젝트를 시작했는데, 어떻게 폴더 구조를 정해야 할까? 다양한 글을 읽고 내가 내린 결론은... 📍폴더 구조 ✅프론트엔드 기술 스택 - Next.js - TypeScript - Styled-components ⭐ 여기에 중점! ✅폴더 구조 /* root ├─components │ ├─common │ │ ├─Button.styled.ts : 재사용 스타일 (에시) │ │ ├─Input.styled.ts │ ├─Header : 개별 컴포넌트 (예시) │ │ ├─index.tsx : 로직 │ │ └─styled.ts : 스타일 │ ... ├─enum │ └─index.tsx : 상수화를 위한 문자열 데이터 보관 폴더 ├─pages │ ├─404.tsx : /err..

팀 프로젝트에서 반응형 헤더를 구현한 기록을 정리 📍max-width 를 사용하여 화면이 꽉차지 않게 하기 랜딩 페이지에서 헤더 아래의 캐러셀만 화면에 꽉차게 하고, 헤더(GNB), 메인 컨텐츠, 푸터는 max-width: 1200px 을 주어 화면에 꽉차지 않게 설정 width 1200px이 넘는 뷰포트에서도 최대 1200px 까지만 늘어남 추가로 padding: 0 1rem; 을 부여 📍모바일 드롭다운 메뉴 구현 width 768px 이하의 뷰포트에서는 display: none; 으로 navbar를 없어지게 하고, 모바일 메뉴 버튼 (햄버거 아이콘)을 생기게 한다 레이아웃 컴포넌트에서 모바일 메뉴 버튼을 클릭함에 따라 메뉴 오픈, 클로즈상태로 바뀌게 한다 왜 헤더가 아닌 레이아웃 컴포넌트에서 상태를 ..

📍타겟 이미지 📍문제 풀이 ✅z-index를 활용하여 우선순위를 낮춰서 겹치는 레이어를 구현한다 - z-index를 사용할 때는 position이 default 이외 어떤 것이든 적용되어야 함을 유의 ✅반원형은 border-radius를 각 꼭지점에 적용하여 구현한다 - border-raduis: 11시 2시 5시 8시 방향 순이다 📍코드 📍결과 100% match

📍타겟 이미지 📍문제 풀이 각 원의 위치를 막대 끝(상단)에서 위로 절반 만큼 올리기 위해 position: relative 와 bottom 프로퍼티를 부여한다 - 이를 통해 원래 자기 자신의 위치에서 이동하게 할 수 있다 📍코드 📍결과 100% match

📍SCSS 변수 기능과 CSS 변수 기능의 차이 ✅SCSS - 변수가 오직 단 하나의 값만 가진다 - 변수를 변경하면 이전 사용값은 변하지 않음 ✅CSS - 변수가 다른 element에 대해 다른 값을 가질 수있다 - 변수를 변경하면 이전 사용값도 변함 (모든 전역에서 영향을 받음) 📍SCSS 변수의 특징 - 언더바와 대시를 똑같이 취급 즉, $font-size 와 $font_size 는 같은 변수로 취급됨

📍코드 샌드박스 링크 https://codesandbox.io/s/determined-david-mfjfme?file=/index.html determined-david-mfjfme - CodeSandbox determined-david-mfjfme by jong-k using parcel-bundler codesandbox.io 블러처리 : backdrop-filter: blur(px) 활용 📍HTML living standard 참고 https://html.spec.whatwg.org/dev/interactive-elements.html#the-dialog-element HTML Standard, Edition for Web Developers The details element represents ..

📍출처 https://github.com/jgthms/minireset.css GitHub - jgthms/minireset.css: A tiny modern CSS reset A tiny modern CSS reset. Contribute to jgthms/minireset.css development by creating an account on GitHub. github.com 📍특징 - 그 옛날의 reset.css 보다 짧다 - 레포에 .sass 파일만 있어서 내가 .scss 문법으로 바꿈 📍코드 (SCSS) /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */ // Blocks html, body, p, ol, u..