Archived/CSS (5) 썸네일형 리스트형 nth child의 의미 li div div div li div div div 가 있다고 할때, li: first-child는 div 이다. li, 너의 첫번째 자식 녀석을 내놓아라! 그런 의미. li들 중 첫번째를 내놓아라고 하는게 아니다. 아래의 예시를 보고나니 아주 명확해짐! (내 삽질들 안녕) 예시 https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_firstchild Tryit Editor v3.6 p:first-child { background-color: yellow; } This paragraph is the first child of its parent (body). Welcome to My Homepage This paragraph is not the.. list의 첫번째 child 빼고 hover effect 주고싶을 경우 (옳은 예) &:hover:not(:first-child) { scale } (틀린 예: 첫번째까지 선택됨) &:hover:not(first-child) { scale } 와 같이 :를 빼먹을 경우 안된다. 근데 not operator는 원래 not(first-child)와 같이 사용되는데 왜 :가 이 경우에 필요한지는 모르겠다. Grid 왜 Flexbox만으로는 부족했을까? Why grid? ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ 이렇게 오류가 생겨버리니까. 우리가 원한건 ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ ㅁ 이건데! .father { display: grid; grid-template-columns: 30px 50px; // 첫번째 column width는 30px, 두번째 칼럼은 50px grid-template-rows: 30px 12px; // // 첫번째 row height는 30px, 두번째 row는 50px grid-gap: 10px } .box { background-color: pink; } 1 2 3 4 5 grid-auto-flow 추가적인 child component가 더해지는 방향. 기본적으로 row임. 예시 grid-auto-flow: r.. Flexbox 왜 Flexbox를 써야하는가? 이전의 inline-box 를 쓸 경우 margin 일일히 숫자 적어줘야하는데, 이게 찾아내기도 어렵고, 찾아내도 아이폰등 다양한 기기에서는 또 깨져버린다. 아래의 예시에서 볼 수 있듯이, 브라우저 사이즈에 따라 width가 300px 보다 작아지게 될 경우, flexBox가 비율에 맞게 자동으로 width 수정해준다. 개꿀! 사용시 유의사항 Father에게 적용한 예시는 children 컴포넌트에 영향을 미친다! 예시 CSS .father { display: flex; justify-content: space-between; //다른 옵션: flex-start, flex-end align-items: flex-end; } .box { width: 300px; height.. ease-in, ease-out / forwards / animation-delay / box-shadow / overflow-wrap ease-in/ease-out https://css-tricks.com/ease-out-in-ease-in-out/ ease-in 처음에 느리게 시작해서 속도가 마지막에 빨라짐. Component가 화면 빠져나갈때 ease-out 처음에 빠르게 시작해서 속도가 마지막에 느려짐. Component가 화면 들어올때 forwards 애니메이션 실행시 사용. 애니메이션 끝났을때 해당 컴포넌트의 마지막 상태 유지. https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp animation-delay start the animation after n seconds. box-shadow box-shadow: 0 13px 27px -5px rgba(50, 50.. 이전 1 다음
