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