내마음대로만들어보자/CSS25 CSS Animation -tail body { height: 100vh; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%); } .circle { position: absolute; animation: movex 1s ease-in-out alternate infinite; //alternate는 움직임의 방향을 순방향을 진행 후 역방향으로 설정 //infinite는 애니메이션 반복 횟수를 무한으로 설정 } .circle > div { background: #fff; width: 50px; height: 50px; border-radius: 50%; ani.. 2021. 12. 12. Hover Effect 참고자료3 //figure 태그는 img태그와는 다르게 설명을 넣을때사용하며, 이미지/영상 등을 올릴때 쓴다. //설명을 넣을때는 figcaption태그를 활용 mouse hover mouse hover body{ height: 100vh; background: #0F2027; background: linear-gradient(120deg, #2C5364, #203A43, #0F2027); font-family: 'Jua', sans-serif; } .hover_wrap{ display: flex; justify-content: center; align-items: center; height: 100vh; } .hover_wrap figure{ position: relative; width: 400px; margi.. 2021. 12. 12. display-flex display: flex 속성을 통해 리액트앱을 만들때 각각의 위치를 잡아주도록 해보자. * display: flex 우선, 모든 요소들을 감싸는 container에 display: flex를 적용하게되면 요소들의 width값 만큼 가로로 배치가 되게된다! 요소1 | 요소2 | 요소3 container에 안에 각각 요소가 요소1,요소2,요소3이라고 했을때 위와같이 각각의 width값에 맞게 가로로 배치될것이다. (흡사 inline요소들처럼 배치되게된다.) height 높이의경우 컨테이너의 높이만큼 늘어나게되므로, 레이아웃을 만들때 유용하게 사용할 수 있다. (각 요소들 마다 높이를 별도로 지정해줄 필요가 없다.) * 배치방향설정(flex-direction) - row : 아이템들이 행(가로) 방향으로 배.. 2021. 8. 8. overflow 참고용 공식문서 https://developer.mozilla.org/ko/docs/Web/CSS/overflow overflow - CSS: Cascading Style Sheets | MDN overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. overflow-x (en-US), overflow-y (en-US)의 값을 설정합니다. developer.mozilla.org 언제 사용하는지에 대해서만 간단히 알아보고 자세한 내용은 위 공식문서를 참고하자. visible : 기본값으로 내용이 넘쳐도 그대로 보임 hidden : 내용이 넘치면 자른다. 넘친 부분은 보이지 않음 scroll : 내용이 넘치지않아도 스크롤바가 항상 생성되.. 2021. 8. 8. 이전 1 2 3 4 5 6 7 다음