Dev/css

    outline 은 border와 다르다

    https://ossam5.tistory.com/139 [CSS3강좌] 31강 CSS outline속성 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요! https://www.youtube.com/watch?v=TaXDcQFAOkw 1. outline 속성이란? - outline(윤곽선)은 요소를 눈에 띄게 하기 위해 테두리(border)의 바깥쪽에 그려지는.. ossam5.tistory.com 내가 프로파일 이미지에 호버 하면 동그렇게 border가 생기는 기능을 만들고 있는데, outline으로 해야한다. 그래야 안쪽에는 적용안되서 이미지가 밀리는 일이 없당

    css -> scss -> module.scss

    컴포넌트 스타일 보다는 module 이 더 괜찮은것 같다. 모든 팀원이 스타일에 도가 터서, 날고긴다면, 컴포넌트 스타일도 나쁘지않을 것 같지만, 현실적으로 그냥 scss를 쓰는게 맞는것 같다. 리액트는 컴포넌트가 재귀적으로 호출 되기 때문에, scss. 해도 다른 컴포넌트의 스타일이랑 충돌이 나거나 곂칠수 있다. 그래서 module.scss 를 사용하는게 속 편하고 좋은것 같다. 다만, 단축키 누르면 자동으로 className={cn('')} 요렇게 나오는 플러그인을 만들던가 해야겠다. 저거 다 치고 있으니깐, 또 생산성이 안나온다. 찾아보니깐 className 까지는 Shortcut 이 있는데 모듈형 까지는 숏컷을 지원해주는 플러그인은 못찾겠다. https://www.google.com/search?..

    input 태그에 레이블 애니메이션

    https://material.io/components/text-fields 이런식으로 Placeholder 에서 좌상단으로 이동하는 효과를 만들수 있을까? https://jacobruiz.com/blog/2021/2/11/how-to-transition-placeholder-text-into-a-label-in-react-floating-label-inputs 이거 보고 참고하면 됨

    span 이 display: block?

    어떻게 된걸까? 응~ 위에 부모가 flex 인가봄

    스크롤를 이용해 인터랙티브 한 페이지 만들기

    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; 을 주면 맨위랑 맨밑에는 적용안되고 사이간격만 조정할수 있습니다.