- z-inex (높을 수록 앞에 온다) 여러 오소중에 위에 오고싶은게 다르다면 z-index값을 바꿔가면서 넣어보면 된다. .explain-box{ width: 400px; margin:auto; padding:20px; text-align: center; background-color: #eee; /* 붕띄우면되지 */ position:relative; top:-40px; z-index:100; } - max-width (최대폭 지정, 반응형 같은데서 쓰기 좋다) min-width,, min-height, max-height 등... 다만 이런 속성은 content영역의 너비를 의미하고, border, padding등과는 상관없다. 즉 padding등에 따라 maxwidth보다커질 수 도 있음 - b..

- 배경 이미지삽입하기 (background-image) - margin collapse (테두리가 겹쳐질 때 div margin이 합쳐지는 현상) ->하나의 혹은 바깥 div에 padding 1px라도 주면됨 - 박스가 붙어 있을 때도 마찬가지(위아래로) 이럴때는 margin collapse가 합쳐지는게 아니라, 더 큰 margin을 따라가게 된다. (우측 그림처럼) - 배경관련 CSS속성 .main-background { background-image : url(../img/shoes.jpg); background-size : cover; background-repeat : no-repeat; background-position : center; background-attachment : fixed;..

과거 이와같이 만들어서 효과를 사용했었는데 다시 만들 필요성이 있었다. 그리고 좀더 부드럽게 만들고 싶었다. 아래와같이 다시 만들게 됬는데 추후 스타일링은 다시 해야할거 같다. 사용한 CSS애니메이션 스타일은 이와같이 사용했다. next.js의 style jsx안에서 사용했고, 어디서 사용해도 크게 다를건없다. 다만 좀더 디테일하게 설정한 부분이 두 가지 있다. 단어 태그하나하나당 div로 감싸서 사용하기도 했지만 각 단어에 위아래 움직이는 효과를 주지않고 한 묶음으로 아래와 같이 묶어서 사용해줬다. #꼬들 #탱글 #쫄깃 #파 #달걀 #소고기 그렇게 묶어서 사용해줘야 다시 단어 하나하나 마다 좌우로 배치해줘서 자연스러운 position설정이 가능했다. .side{ position:relative; lef..

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position background-position - CSS: Cascading Style Sheets | MDN The background-position CSS property sets the initial position for each background image. The position is relative to the position layer set by background-origin. developer.mozilla.org 위의 링크에 전부다있다. 부트스랩이나, MUI같은경우는 해당 문서에 더 정확하게 혹은 저거보단 적게 지원하기도 하니까 확인해보면서 위치를 정하자!