타쿠꺼

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

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

CSS로 애니메이션효과를 만들 수 있다.애니메이션은 우선 키프레임을 정의하여 효과를 부여한다. 1234567@keyframes name { 0% { ... } n% { ... } 100% { ... }}cs 와 같이 키프레임을 정의한다. 키프레임을 정의했으면 애니메이션을 적용할 셀렉터에 animation 프로퍼티로 적용한다. 1234567891011.selector { animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state;} cs anim..

font: style | variant | weight | stretch | size / line-height | family

z-index는 엘리먼트들의 z축을 설정한다. 높은 값이 낮은 값을 가려버린다.여기서 중요한 점은, z-index는 position이 static이면 안 된다. relative, absolute로 특정 지어져야 작동한다.

display는 대표적으로 inline과 block 속성이 있다. block속성 - 기본값으로 width는 100%, height는 내용물에 따라 변한다.(auto) - 한 행에 단 하나의 block 엘리먼트만 들어갈 수 있다. - 한 행에 여러개의 block이 들어가려면 position: aboslute, 혹은 float으로 띄워줘야 한다. inline속성 - width, height값은 전적으로 내용물에 달려있다. 따로 설정이 불가능하다. (무조건 auto) - 한 행에 여러개가 들어갈 수 있다. inline박스 자체가 하나의 글자라고 보면 된다. inline-block속성 - inline과 block을 합친 속성이다. - width, height값을 가질 수 있는데 엘리먼트 하나하나가 lnline처..