Front-end/CSS 6

font-family 상속 시키기

공통 컴포넌트를 만들면서 서체 적용 작업(라고 쓰고 노가다)을 하고 있는데 위와 같이 부모 컴포넌트에 font-family를 적용해도 하위 컴포넌트에는 font-family가 적용되지 않는 문제점이 있었다. 그 이유를 찾아본 결과 global.css에서 모든 컴포넌트에 default로 폰트를 먹이고 있었고, font-family가 상속이 되는게 아니라 하위 컴포넌트에서는 위 default font가 적용이 되어.. 무시된 것이었다. 해결방법은 간단한데, font family가 앞에서 뒤로 적용된다는 점을 떠올려서 그냥 맨 앞에서 inherit로 상속받게 하면 해결이 된다.

Front-end/CSS 2022.11.04

css 챌린지

css 고수가 되고 싶어서 자료를 찾던중 유용한 사이트를 하나 발견해서 공유해본다~ https://100dayscss.com/ 1일부터 100일까지 챌린지가 준비되어 있는데 아래와 같은 애니메이션을 See the Pen Untitled by lodado (@lodado) on CodePen. 직접 만들어보면 된다 진짜 어려운데.. 다른사람의 코드를 참고할 수 있으니 많이 배울 수 있는것 같다 내 아이디 >> https://100dayscss.com/progress/lodado/

Front-end/CSS 2022.10.05

[CSS] box-sizing

박스의 width와 height를 어떻게 구하는지 정하는 방식 box-sizing = content-box | border-box | initial | inherit 값 content-box 기본값. width와 height가 콘텐츠 영역만 포함하고 안팎 여백 & 테두리를 포함하지 않는다 border-box width와 height가 안팎 여백 & 테두리를 포함한다. initial 초기 값으로 지정 inherit 부모로부터 상속 예제 HTML 삽입 미리보기할 수 없는 소스 border-box content-box 가로 세로 길이의 정확한 값을 원하면 border-box 설정을 해두자 reference https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Front-end/CSS 2022.07.11

[CSS] Gap

Gap '내부의 children 요소'들이 일정한 간격으로 떨어져 위치할 수 있게 사용하는 요소 grid 혹은 flex에서 사용 가능하다. margin과의 차이점 -> gap 스타일 속성은 인접한 요소가 있을때만 Gap을 만든다 HTML 삽입 미리보기할 수 없는 소스 호환성 메이저 브라우저는 전부 지원하는거 같은데 앞으로 호환성이 더 좋아지면 편리하게 쓸 수 있을것으로 기대된다. ref https://webisfree.com/2020-12-05/[css]-%EC%8A%A4%ED%83%80%EC%9D%BC%EC%86%8D%EC%84%B1-gap%EC%9D%84-flex%EC%97%90%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [css] 스타일속성 gap을 flex에..

Front-end/CSS 2022.06.13

CSS 애니메이션 성능 개선

reflow, repaint를 피하거나 최소화 1. transition(CSS option) 성능 개선? 주제에 맞는 내용은 아니지만 부드러운 애니메이션을 구현하고 싶을때 참고 transform 속성은 reflow, repaint가 일어나지 않고 composite만 발생 (transform, opacity, cursor, orphans, perspective등도 Reflow, Repaint를 건너 뛴다, 원리는 브라우저에서 GPU를 사용해 하드웨어 가속하는 Update Layer Tree라는 내용 참고) https://kyu9341.github.io/WEB/2021/02/03/WEB_GPU/ WEB - 하드웨어 가속 - kwon | kwon's Blog 하드웨어 가속 특정 작업을 CPU가 아닌 다른 특별..

Front-end/CSS 2022.01.27