CSS/CSS_KaKaoClone 5

#3.17 States : active, hover, focus / #3.19 Colors and Variables (07:16)

#3.17 States (10:15) : active / hover / focus 더보기 개괄 states 1) active : 대상을 클릭하고 있는 상태 2) hover : 마우스가 대상 위에 있을때의 상태 3) focus : active와 비슷하다고 생각될 수 있는데, 키보드로 선택되었을때를 말한다 ! 4) visited : 링크에만 적요이된다 그 링크에 방문했다면 그 안에 스타일이 적용이된다 5) focus-within : focuse된 자식을 가진 부모 엘리먼트의 상태를 말한다 즉, 위의 예시에서 form은 그 자식들인 input이 focuse가 되면 form의 모습을 바꾼다는 것이다 state들을 다른 엘리먼트와 연계해서 사용할 수도 있다 1) 부모의 state에 따라 조정 form:hover ..

CSS/CSS_KaKaoClone 2023.05.20

#3.14 Pseudo Selectors / #3.15 Combinators : > + ~

#3.14 Pseudo Selectors part One (08:57) 더보기 개괄 pseudo selector 1. last-child{} // 마지막 자신 선택 2. first-child{} // 첫번째 자식 선택 3.nth-child(숫자) {} // 원하는 순서의 자식 선택 4.nth-child(even,odd) {} // 짝수or홀수 자식 선택 5.nth-child(2n+1) - 선택자의 2n+1 요소 선택 - n은 0부터 대입하는 것으로 추측 도큐 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes Pseudo-classes - CSS: Cascading Style Sheets | MDN A CSS pseudo-class is a ..

CSS/CSS_KaKaoClone 2023.05.19

[Kokoa] #3.10 Flexbox Part / #3.12 Fixed (08:19) / #3.13 Relative Absolute (07:45)

#3.10 Flexbox Part One (12:08) : justify-content 더보기 개괄 1. 자식에게 명시하지 않고 부모에게 명시한다 div의 부모를 display:flex로 만든다 2. main axis=> 주축은 (수평)이 기본, justify-content는 main axis를 따라 움직임 3. cross axis=> 교차축은 (수직)이 기본, align-items는 cross axis를 따라 움직임 4. body가 height 값을 갖고있지 않으면 이미 맨 위아래를 차지하고 중심에 있으니까 align-items를 설정하더라도 바뀌지 않음. 이 때 height를 px로 해도 작동하지만, vh를 사용하면 화면 크기에 따라 바뀐다. 아이폰 맥북 아이패드에 따라 다 달라지니까 유용하다. ju..

CSS/CSS_KaKaoClone 2023.05.19

[KokoaClon]#4.0 Transitions / #4.2 Transformations (12:33) / #4.3 Animations part One (04:52) / #4.5 Media Queries (11:21)

#4.0 Transitions (09:40) : Transition 적는 위치 더보기 Go Home #4.1 Transitions part Two (07:45) : ease-in funtion 더보기 ease-in funtion 실습사이트 https://matthewlein.com/tools/ceaser Ceaser - CSS Easing Animation Tool - Matthew Lein Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now tha..

CSS/CSS_KaKaoClone 2023.05.18