조각모음

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

스크롤바 숨기기 참고 문제상황 회사 장바구니를 고도화하는 도중 스크롤이 스크롤이 매우 거슬렸다. 기능은 남겨두되 보이지 않게 하고 싶었다. 해결 .target { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .target::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } 스크롤바를 숨기고 싶은 영역을 지정하고(위에서는 .target) 위와 같이 적어준다.

box sizing content-box /* width와 height의 기준을 content로 설정한다 * width: 500px; 을 지정하면 content만 500px가 되고 padding, border 등은 따로 계산해야 한다. */ * { box-sizing: content-box; } border-box /* box-sizing: width와 height의 기준을 boder box를 포함한 크기로 설정한다 * width: 500px; 을 지정하면 border를 포함한 크기가 500px로 설정된다. */ * { box-sizing: border-box; }

형제선택자 인접 형제선택자 /* 같은 부모를 갖는 상태에서, E + F * E 바로 뒤에 나오는 F에만 속성값 부여 */ .chat__write:focus + .chat__icon { display: none; } 일반 형제선택자 /* 같은 부모를 갖는 상태에서, E ~ F * E 뒤에 나오는 F들에 속성값 부여 */ .chat__write:focus ~ .chat__icon { display: none; }