조각모음

HTML/CSS 네이밍 시 container와 wrapper의 차이 참고 : https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper 모달 컴포넌트를 만들다가 문득 container와 wrapper의 차이가 궁금해졌다. 퍼블리싱할 때 별 생각 없이 혼용해서 사용하던 단어였는데 규칙이나 관례가 있는지 찾아봤는데 stackoverflow의 한 답변이 가장 잘 정리되어 공유한다. 결론 둘다 레이아웃을 위한 div지만 container는 주로 여러 개의 요소를 감싸는 div이고, wrapper는 단일 요소의 레이아웃을 위한 div를 말한다. 예를 들면 아래와 같다. ... ... ... ... ...

애니메이션 최적화 (Reflow, Repainting) 참고 Jank(쟁크) 현상 일반적으로 모니터의 주사율은 1초당 60개(60FPS 60프레임) 화면을 보여준다. 이에 맞춰 브라우져도 1초에 60개를 보여주려 한다 이때 브라우져가 60개를 못보여주고 1초에 20개, 30개 정도만 보여준다면 애니메이션은 버벅거리게 되는데, 이 현상을 Jank(쟁크) 현상이라고 한다. 그럼 어떤 상황에서 브라우져는 1초에 60개를 못 그릴까? 브라우져 렌더링 과정 브라우저가 화면을 렌더링하는 과정은 아래와 같다. HTML + CSS + JS 다운로드 -> DOM + CSSOM 변환 -> Render Tree 생성 -> Layout -> Paint -> CompositeDOM은 HTML 요소를 tree 구조로 만든 것이..

HTML checkbox 디자인 커스텀하기 문제상황 디자인 시안을 받았는데 기본 체크박스가 아닌 다른 모양의 체크박스였다. 해결 기본 체크박스는 숨김 처리하고 label을 이용해 스타일을 만든다. 텍스트의 위치 조정을 위해 별도의 wrapper를 만들고 position relative를 설정해준다음, text 요소의 position 은 absolute로 잡아 조정한다. 예시 코드 텍스트 생각할 점 이거보다 좀더 좋은 방법이 있을까..? 체크박스나 라디오 박스는 실무에서 자주 사용할 테니 저장해놔야겠다. 사이트에서 자주 볼 수 있는 요소들은 미리 만들어 놓는 게 좋겠다.

calc() 안에서 scss 변수 사용하기 참고 문제 상황 SCSS 작업 중 공통된 수치들을 SCSS 변수로 처리하여 작업을 하고 있었는데 calc() 에서 작동하질 않았다. 해결 매우 간단하다. 변수에 #{}을 둘러준다. // bad .problem { width: calc(100% - $example); } // good .problem { width: calc(100% - #{$example}); }