본문 바로가기

Code/css

스크롤를 이용해 인터랙티브 한 페이지 만들기 joshua-dev-story.blogspot.com/2020/11/javascript-css-scroll-animation.html 순수 JavaScript + CSS 스크롤 애니메이션 (샘플 코드) 웹 브라우저의 스크롤을 내리면 생동감 있게 나타나는 애니메이션을 구현하는 샘플 코드를 소개합니다. 순수 JavaScript와 CSS로 작성되었습니다. joshua-dev-story.blogspot.com 이거 보고 공부하면 됩니다. 더보기
grid 배우기 cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com 여기서 배우면 됩니다. 더보기
flex box 배우기 flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 이걸로 공부하면 됩니다. 더보기
[css] & + & 알아보기 const NewsItemBlock = styled.div` & + & { margin-top : 3rem; } `; & 은 부모 태그를 가리킵니다. 저 상황에서는 div 를 가리킵니다. {urlToImage && ( )} {title} {description} & + & 하면 &의 부모의 &의 바로옆 & 를 가르킵니다. 첫번째 포스트에서 아래포스트를 가리키고 두번째 포스트에서는 세번째 포스트를 가리키고 세번째 포스트에서는 네번째 포스트를 가리킵니다. 그리고 margin-top: 3rem; 을 주면 맨위랑 맨밑에는 적용안되고 사이간격만 조정할수 있습니다. 더보기
[css] flex 공부 사이트 flexboxfroggy.com/ Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 좋습니다. 더보기