Sticky 스펙을 구현하는 방법 스펙에 필요한 조건을 하나씩 추가해가면서 어떻게 해결할 지를 고민해보자. css의 poistion: sticky; 를 이용하자. 우선 Sticky되어야 하는 Element가 최상단에 위치해있다면 쉽다. css를 이용하면 position: relative; 인 부모의 상단에 해당 Element가 sticky된다. .sticky{ position: sticky; top: 0; } https://codepen.io/bucketressi/pen/GROoeKE Sticky-1 ... codepen.io sticky container를 만들자. 이번에는 sticky header(첫번째 Sticky Element) 아래에 sticky sub-header가 위치해야 한다고 생각해보자...

개발을 진행하면서 안드로이드 OS에서 네이버 앱을 사용할 때 (특정 안드로이드 버전 - 아마도 11 이상 에서만) flex 레이아웃이 깨지는 이슈가 발생하였다. css를 다방면으로 고쳐보면서 해결해보았는데, 원인은 'flex-shrink를 지원하지 않는 것'이었다. (caniuse) 반응형 웹을 구축할 경우 해당 사례를 피하기 위해 css 코드에 flex-shrink 사용을 지양하도록 하자.

선택자 충돌 시 /*css*/ .special{ color: blue; } p{ color: red; } css는 cascade와 specificity라고 불리는 rule을 가지고 있고, 해당 rule에 따라 충돌 시 더 강한 선택자가 적용된다. cascade rule : 뒤에 적용된 스타일이 앞선 스타일을 덮어쓴다. specificity rule : 요소를 더 특정하는 선택자가 스타일을 차지한다. 따라서 위의 예제에서 specificty rule에 의해 color는 blue가 된다. specificity specificity는 4가지의 단위로 측정된다. Thousands : style 속성 내에 정의되어 있는 style(inline style)일 경우 Hundreds : ID selector를 사용하여..