Coding Story

이미지를 px로 지정하면 이미지가 늘어나거나 뭉개지는 현상이 발생한다. 이미지를 지정한 px을 제외하고 다른 부분은 안보이도록 자르게 하려면 이렇게 하면 된다. img { object-fit: cover; }

.box { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .box::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ }

div{ overflow:hidden; height:auto; } 이미지와 같이 안의 컨텐츠가 div 박스의 height 범위를 넘어설 때가 있다. 그럴 때 위와 같이 해주면 자동으로 div크기가 조절되어 늘어난다.

노마드코더 React JS 마스터 클래스 #2 STYLED COMPONENTS npm i styled-components 로 styled-components를 설치해준다. import styled from "styled-components"; function App() { return ( ); } export default App; 기존의 코드는 태그 안에 일일히 style을 지정해주는 것이였다. styled component 사용하면 className이나 style을 사용할 필요가 없다. styled component에서 import한 styled를 이용한다. div를 사용해 닫아줄 필요가 없다. 모든 style은 컴포넌트를 사용하기 전에 미리 컴포넌트에 포함된다. css코드를 css 방식 그대로 쓸 ..

https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check, copy and edit CSS Goodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click. getcssscan.com 항상 이리저리 해보면서 box shadow를 조정하는데, 그런 시간을 단축시켜줄 사이트를 발견했다. box shadow 미리보기 모양과 코드를 제공해주기 때문에 원하는 모양을 골라 코드를 복붙하기만 하면 된다!

Reset CSS 각 브라우저마다 제공하는 기본 스타일이 다르다. Reset css란, 브라우저 간의 요소들 차이를 없애 디폴트 값으로 초기화시키는 코드다. reset.css 파일을 추가하고, https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a ..