반응형 개발/CSS33 링크로 섹션이동시 고정헤더에 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. Overflow : hidden 이 레이아웃을 부숴버릴때 Overflow : hidden 이 레이아웃을 부숴버릴때 overflow은 CSS에서 요소의 컨텐츠가 요소의 box를 벗어나는 경우 어떻게 처리할 지 지정한다. hidden 은 box를 벗어나는 부분을 숨긴다. 그러나 이 속성을 사용할 때 예상치 못한 레이아웃 문제가 발생하기도 한다. text-overflow:ellipsis 와 overflow:hidden 나의 경우에는 ellipsis를 이용하여 ... 을 만들려는 상황에서 레이아웃이 망가졌다. &-ellipsis { overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; } 검색해보니 overflow : hidden이 레이아웃을 망칠때는 vertical-align : bottom 을 사용하.. 2023. 7. 3. 이전 1 2 3 4 ··· 9 다음 반응형
