코드사냥꾼의 전리품

pointer-events ? 해당 속성을 통해 마우스 이벤트(hover, click, drag 등)에 어떻게 동작할지 지정할 수 있다. 다만, 대부분의 속성 값은 SVG 전용이기 때문에 기본 html 태그에는 none 또는 auto 값만 설정할 수 있다. [속성 값] none : 요소가 포인터 이벤트의 대상이 되지 않는다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있다. auto : 요소가 pointer-events 속성을 지정하지 않은 것처럼 행동한다. inherit : 부모 요소로부터 pointer-events 값을 상속받는다. (더 많은 속성 값은 https://developer.mozilla.org/en-US/docs/Web/CSS/..

화면을 제작을 하다 보면 내가 작성하지 않았는데 margin, padding 속성이 부여돼서 이상하게 보이는 경우가 있다. '그때마다 수정해주면 되겠지'라고 생각할만한 것은 아니다. 여기서, Reset CSS, Normalize CSS가 필요하고 사용하는 가장 큰 이유는 크로스 브라우징을 위해서이다. 브라우저마다 HTML 시맨틱 태그에 대한 기본값이 다르므로 그 차이를 없애는 데 필요하다. 크로스 브라우징 👉🏻 웹 사이트를 접속했을 때 어느 한쪽에만 최적화됨을 막기 위해 공통 요소를 사용해서 제작하는 것 Reset CSS 웹 브라우저마다 각기 다른 default 스타일이 지정되어 있는데 해당 값을 초기화함으로써 다양한 웹브라우저에서도 동일한 스타일이 적용되도록 하는 설정 파일이다. W3C에서 공식적으로 ..

CSS3 Flexible Box Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. 우선 Flex는 2개의 개념으로 나뉩니다. 첫 번째는 Container 두 번째는 Items 입니다. 위에서 살펴본 바와 같이 Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다. 주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다. Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며, Items에는 order, flex, align-self 등의 속성을 사용할 수 있습니다. Flex Container..