반응형 개발/CSS34 Input 자동완성 적용되었을때 background-color, border-radius 바뀌는 이슈 Input 자동완성 적용되었을때 background-color, border-radius 바뀌는 이슈위의 자동완성 기능을 이용하면 아래와 같이 스타일이 확 바껴버린다. background-color대신 box-shadow 이용background가 먹지 않아서 검색해보니 box-shadow를 이용해야 했다.검정색으로 바꿀것이기에 아래와 같이 적용.input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: 0 0 0px 1000px #000 inset; border: 1px solid #000;}input:-webkit-autofill:focus { -webkit-text-fill-color: #fff; box-shadow: 0 0 0p.. 2024. 11. 21. 링크로 섹션이동시 고정헤더에 h태그가 가리는 이슈 문제 : 링크로 섹션 이동시에 고정헤더에 h태그가 가려짐 cc cc 위 gif처럼 링크로 섹션이동시에 해당 id를 가진 h태그가 고정헤더에 가려지는 이슈가 있었다. 해결 ':target'과 가상선택자 '::before' 이용 :target을 이용하여 해당 링크로 이동했을때의 스타일을 다음과 같이 지정해주었다. .anchor{ &:target::before { content: ""; display: block; height: 86px; /* 헤더의 높이와 동일 */ margin-top: -86px; /* 음수 마진으로 헤더 높이만큼 오프셋 조정 */ visibility: hidden; } } {children} 이젠 고정헤더에 가려지지 않는다. https://dev.meye.net/entry/%ED%8E%.. 2024. 2. 28. css-in-js와 css-in-css 생각정리 css-in-js와 css-in-css 생각정리 그동안 css-in-js랑 css-in-css 에 대해 파편화되어 있던 개념들을 정리해보았다. css-in-js css-in-js를 사용하여 스타일을 처리할 때, 스타일 생성 및 동적 스타일 적용과 관련된 런타임 오버헤드가 있을 수 있다. 많은 아티클들에서 css-in-js와 css-in-css를 비교했다고 하면서 같은 사진을 돌려쓰고 있는데, 어떻게든 렌더링 속도를 빠르게 할 수 있다면 좋은 것이다. 다만 css-in-js를 꼭 나쁘게 볼 필요는 없는 것 같다. 런타임 오버헤드가 그리 크지 않다면 사용해도 나쁠게 없다고 본다. 개발하기 편하니깐. 다만 인터렉션이 많다면 css-in-css를 고려하는것이 좋을 듯 css-in-css 브라우저에서 바로 css.. 2023. 9. 5. @mixin로 재사용할 스타일 정의하고 @include로 사용 @mixin로 재사용할 스타일 정의하고 @include로 사용 @mixin과 @include는 SCSS의 강력한 기능 중 하나로, 재사용 가능한 스타일을 만들고 관리할 수 있게 도와준다. 이를 통해 DRY(Don't Repeat Yourself) 원칙을 따르는 깔끔하고 유지보수가 쉬운 코드를 작성할 수 있다. @mixin, @include @mixin : 재사용할 그룹 선언을 정의한다. @include : 재사용할 스타일을 사용한다. /* index.module.scss */ /* mixin 으로 재사용 가능한 스타일 그룹을 정의한다. */ @mixin section-layout { padding : 32px 100px; display:flex; flex-direction:column; align-ite.. 2023. 7. 11. 이전 1 2 3 4 ··· 9 다음 반응형
