Microsoft Edge 및 IE의 특별한 입력 필드 아이콘 숨기기 Microsoft Edge 및 이전 버전의 Internet Explorer 브라우저는 사용자 편의성을 위해 텍스트 및 비밀번호 입력 필드에 특별한 아이콘을 기본적으로 제공한다. 하지만 때로는 이러한 아이콘이 디자인이나 사용성 측면에서 방해가 될 수 있다. 아래에는 이 두 아이콘을 숨기는 방법이 설명되어 있다. -ms-clear 아이콘 숨기기 -ms-clear 아이콘은 텍스트 입력 필드()에 문자가 입력되었을 때 나타나며, 입력된 텍스트를 한 번에 지울 수 있는 ‘X’ 아이콘을 표시한다. 이 아이콘을 숨기려면 다음 CSS 코드를 사용한다. input::-ms-clear { display: none; } -ms-reveal 아이콘 숨기기 ..
시작하기 버튼의 클릭 영역 에러 시작하기 버튼의 바깥쪽 영역을 클릭하면 반응은 하지만 버튼의 기능은 하지 못한다.(로그인/회원가입 페이지로 안넘어간다는 뜻) export const LoginButton = styled.button` ... padding: 0.4rem 1.2rem; `; 수정 전에는 a태그(리액트라우터의 Link)를 감싸고 있는 button에 padding이 있다. export const LoginButton = styled.button` ... /* padding: 0.4rem 1.2rem; */ a { padding: 0.4rem 1.2rem; } `; button태그에 있던 padding을 지우고 자식인 a태그에 padding을 옮겨줘서 a태그의 영역으로 버튼영역을 채워줘서 해결했다..
Sass(Syntactically Awesome StyleSheets) Sass Sass(Syntactically Awesome StyleSheets) 는 CSS pre-processor(전처리기)로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. CSS의 간결한 문법은 배우기 쉬우며 명확하여 프로젝트 초기에는 문제가 없이 보이지만 프로젝트의 규모가 커지고 수정이 빈번히 발생함에 따라 쉽게 지저분해지고 유지보수도 어려워지는 단점도 가지고 있다. 이러한 CSS의 태생적 한계를 보완하기 위해 Sass는 다음과 같은 추가 기능과 유용한 도구들을 제공한다. 변수의 사용 조건문과 반복문 Import Nesting Mixin..
Emotion이란? Emotion – Introduction (Edit code to see changes) emotion.sh Emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 프레임워크와 관련없이 사용하는 Framework Agnostic과 React 두 가지 방식으로 사용된다. emotion 설치 # Framework Agnostic $ npm install @emotion/css # React $ npm install @emotion/react import 하기 emotion.js를 사용해야 할 컴포넌트에 먼저 import를 해야한다. /** @jsxImportSource @emotion/react */..
성능 최적화 내지는 웹성능 최적화를 구글에 검색하면 수많은 이론과 자료가 나온다. 어떤 부분에 초점을 맞추느냐에 따라서 그 방법은 분류 또한 다양해진다. 우선 생각나는대로 빠르게 나열을 해보자면 style은 상단, js는 하단에서 불러온다 웹팩(Webpack) 사용 js의 공백 줄이기 html 작성시 불필요한 div를 제거 css 최적화 - 리플로우, 리페인트(Reflow/Repaint)를 고려한 스타일 작성 - 사용하지 않는 css 제거 이미지 최적화 - picture, img 지연로딩 활용하기 - 스프라이트 이미지 사용 핵심적인 웹 지표(LCP,FID,CLS) 최적화 애니메이션은 js보다는 css로 사용한다 헤더에 만료기한 넣기 SEO (검색엔진최적화) CDN 사용 Gzip 사용 파일 개수 줄이기 라..
스타일코드 컨벤션 스타일 코드에서 컨벤션이 존재한다는 사실 일반 CSS나 SCSS를 작성 할 때에는 CSS Sort 익스텐션을 사용해서 쉽게 정렬했지만 지금 이 프로젝트는 emotion을 사용해 css-in-js형식으로 작성하고있다. 그래서 기본적인 스타일코드의 문법이 이런식이다. export const Loading = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; width: 100%; height: 30vh; `; 막상 스타일링하고 작성할 때에는 머리에 생각나는대로 편한대로 작성하곤 한다. 하지만 이 프로젝트도 당연히 컨벤션을 적용해야지. 스타일 컨벤션 ..
