타쿠꺼

스크롤바의 크기는 해당 컨테이너의 크기와 같다.해당 컨테이너의 크기값에 비해 자식요소가 더 공간을 많이 차지하는 경우 스크롤바가 생기는 것이다.이 당연한 것을 항상 염두해 두자.

- html의 기본 넓이값은 화면의 100%이다.- 모든 요소는 자신보다 앞에 있는 형제 공간요소의 흐름에 영향을 받는다(형제의 자식에겐 안 받음). static이건, relative건, absolute건, fixed건, float이건 위치값인 top과 left가 특정지어지지 않는다면 자신의 앞에 있는 공간요소의 흐름에 영향을 받아 배치된다.- 위치의 기준점인 top: 0, left: 0은 static이 아닌 가장 가까운 부모요소의 왼쪽 상단이 기준점이다.- 요소의 크기값이 정해지지 않으면 자신이 담고있는 내용물(텍스트, 자식요소 등)의 공간값에 의해 크기값이 결정된다. 즉 내용물이 position: absolute, fixed; float이면 크기값에 반영되지 않는다.- 텍스트는 inline 요소이다...

border로 삼각형 만들기 - content: '';- height, width: 0;- border: solid transparent;- border-pos-color: #color- border-width: npx; 만약 border-top-color만 지정하면 ▼가 나옴. right는 ◀. 보통 :after나 :before 속성에 사용.

text를 없애고, text-shadow만 준다면 blur효과를 낼 수 있다.

visibility: hidden; 은 보이진 않지만, 공간은 차지하고 있다. 그러나 마치 없는것 처럼 상호작용은 하지 않는다.예를 들어 이 속성이 적용된 엘리먼트에 mouseenter 이벤트리스너를 등록해도, hidden이기 때문에 작동하지 않는다.

block 엘리먼트들은 디폴트값으로 width: 100%, height: auto; 값을 갖는데 이는 position: static, relative 일 때만이다.position: absolute, fixed인 경우 block 엘리먼트들은 자신들이 담고있는 자식요소의 크기만큼 컨테이너 크기를 갖게 된다.이는 hover 영역과 연관이 있으므로 잘 알아두도록 하자.

https://developer.mozilla.org/en-US/docs/Web/CSS/background background-attachment 관련https://css-tricks.com/almanac/properties/b/background-attachment/

elem:nth-child(n) elem을 선택하는데, 부모컨테이너에서 모든 자식요소 중 n번째에 있는 elem을 선택한다.n이 odd이면 부모컨테이너에서 홀수번째에 있는 elem, n이 even이면 짝수번째에 있는 elem이 선택된다.n을 3n+1과 같이 사용하면 n=0, 1, 2... 인 경우의 1, 4, 7... 번째에 있는 elem이 선택된다. 12

display: inline-block; 을 여러 엘리먼트에 주면, 이상하게도 엘리먼트간에 빈 공백이 발생한다.이는 inline 속성 자체가 스페이스바, 줄바꿈을 공백으로 인식하기 때문이다.따라서 이를 해결하는 방법은 여러가지가 있으나 이는 https://css-tricks.com/fighting-the-space-between-inline-block-elements/ 을 확인하면 되고, 현실적인 방안은 부모컨테이너에 폰트사이즈를 0으로 주는 것이다.

해결1 div의 top 위치를 함께 transition 시킨다. div {position: absolute;top: 0px;width: 100px;height: 0px;transition: all .5s;} div:hover {top: -50px;height: 100px;} div의 top이 위로 올라가면서 height의 크기가 커지기 때문에 가운데서 확장되는 효과를 볼 수 있다. 해결2 사실 top, left 등을 변화시키는건 시스템에 무리를 준다.transform을 사용하면 된다. transform은 기준 앵커값이 요소의 중앙이므로, scale(0) -> scale(1)로 변화시키면 중앙에서부터 원래 사이즈로 확장되는 효과를 볼 수 있다.