민자의 지식창고

시작하며... css 스타일을 쓰다보면, 마우스클릭 후 발생하는 효과 혹은 테이블에 특정 컬럼에 마우스를 가져갔을때 효과등 동작에 대한 효과에 대해서 수행하는 경우가 빈번이 발생합니다. 각 태그 정의 후에 관련한 동작들은 항상 쓰고 있으나, 정리를 하지 못하여, 정의와 사용법에 대해서 정리해 보았습니다. CSS Pesudo-classes는 사용자가 활성화한 요소(버튼)을 나타냅니다. 마우스를 사용하는 경우, "활성" =Active는 보통 마우스 버튼을 누르는 순간부터 뗴는 시점을 의미합니다. :active ,과 함꼐 사용합니다. 뒤에 오는 (:link, :hover, :visted)가 덮어씁니다. 디자인하려면, LVHA-순서(:link -> :visited -> :hover -> :active ) 따라 ..

시작하며... Flex는 레이아웃에 배치를 하며, 가장 많이 사용하는 방식인것 같습니다. Flex는 레이아웃 전용 배치 기능입니다. Flex는 표준스펙을 지원하지만, Grid는 legacy 버전만 지원하기 때문에 둘다 알아두면 좋지만, 일단 Flex를 가장 많이 사용하고 있습니다. HTML의 기본구조는 다음과 같습니다. Parent 요소는 container를 `Flex container`라 부르고, Childeren 요소는 `Flex Item` 이라고 부릅니다. `컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 떤 형태로 배치되는 것`이라고 생각하시면 됩니다. Flex의 속성들은, Container에 적용하는 속성 Item에 적용하는 속성 Container에 적용하..

Positioninig contexts containing element of an absoultely positioned elements. This is much dependent on the position property of the ancestors of the positioned element. The result of this is, the absolutely positioned elements will be contained in the initial containing block Try adding the following to your CSS, to make the first paragraph absolutely positioned too: p:nth-of-type(1){ position..