box-sizing 속성은 요소의 너비와 높이를 계산하는 '방법'을 지정한다. 우선 두 개의 div로 이루어진 box가 위처럼 똑같은 크기로 있다고 하자. 지정을 따로 해주지 않으면 기본적으로 content-box 방법이 지정된다. 이 방법은 요소의 너비가 100px라면 콘텐츠 영역이 100px의 너비를 가지고, border와 padding은 아래처럼 요소의 겉에 덧붙여진다. 빨간색 box가 원래 크기. padding 10px이 이 겉에 붙고, 다음으로 border 10px이 겉에 붙은 걸 확인할 수 있다. 하지만 아래의 div에만 border-box를 지정해 주면? border-box는 border와 padding도 요소의 크기에 포함되는 것으로 고려하기 때문에, 전체 크기는 유지한 채로 콘텐츠 영역을..

body { -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; } 위 코드를 css 파일에 넣어 주면 거슬렸던 스크롤바가 사라진다. css 스크롤바 숨기기 css 스크롤바 없애기 css 효과

동아리 홈페이지를 만들던 중 mouse hover 시 프로젝트 명이 포함된 바로가기...? 아무튼 클릭을 유도하는 식으로 이미지가 변하는 걸 구현해야 했다. 이전 프로젝트에서도 비슷하게 hover 때 바뀌는 이미지를 구현했었는데 그때 코드를 참고하려고 봤더니 웬 state까지 동원해서 onMouseEnter, onMouseLeave 이런 걸로 구현을 했었다 (...) 이것도 좋은 방법인지는 모르겠지만 전보단 훨씬 낫기 때문에 ^__^ 처음에는 어차피 그냥 배경이 검은색이니까 이미지에 hover 시 opacity 속성을 주려고 했으나 프로젝트 명도 들어가야 되기 때문에 방향을 틀었다. 그래서 Card 컴포넌트로 CardImage, CardHover를 감싸서 두 개를 겹쳐놓고 CardHover는 보였다 안 ..