data life

:active 마우스 클릭 시 : hover 마우스가 위에 있을 시 : focus 키보드로 선택 시 : visited 방문한 사이트에 효과 적용 : focus-within 부모 요소에게 적용하여 자식 요소들 중 하나에 focus되었을 때 효과 적용

Position 문서 상 요소를 배치하는 방법을 지정함 position : static(default) position : fixed 뷰포트 기준으로 위치 설정 웹 페이지를 스크롤하여도 항상 같은 곳에 위치 position : relative : element가 처음 놓인 자리에서 상하좌우로 움직임 position : absolute relative한 부모를 찾을 때, 부모 기준 relative한 부모를 못 찾을 경우, body 기준

padding : 상하좌우 모두 적용 margin : 좌우에만 적용 ▶️ inline 성질!!! hello hello Class .class name { property: property-value ; } : 연이어 여러 개를 가질 수 있음 Id #id name { property: property-value ; } : class와 달리 한 번에 여러 개를 가질 수 없음 차이점 우선순위 id > class > tag

Border : box의 경계 border : width style color border-style 종류 한 개의 값 모든 면의 테두리 스타일 설정 두 개의 값 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 테두리 스타일 설정 세 개의 값 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 스타일 설정 네 개의 값 상, 우, 하, 좌(시계방향) 순서로 테두리 스타일 지정 border-radius : 테두리를 둥글게 만드는 효과 : 50% (circle⭕️) border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y

Margin : box의 border(경계) 바깥 공간 margin : 10px(상하) 20px(좌우) / (상)(우)(하)(좌)↩️시계방향 or margin-top/bottom/left/right Collapsing Margins : 상하 margin이 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합되는 현상 : 좌우 margin은 상관 없음 MDN 참조 1. 인접 형제 박스 겹쳐진 두 마진 값을 비교해서 더 큰 마진 값으로 상쇄 또는, 겹쳐진 두 마진 값이 같을 경우 중복을 상쇄 2. 빈 블록 height / min-height / padding / border 상하로 늘어나는 속성을 주지 않음 내부 inline 콘텐츠가 존재하지 않음 3. 부모와 자식 마진이 겹칠 때 부모의 margin..