타쿠꺼

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

- 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효과를 낼 수 있다.

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

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