CSS

🤔 transition을 공부하다 보니 animaition의 차이에 대해 궁금해졌습니다.💡 transition과 animation의 차이transition을 사용하면 두가지 상태밖에 지정할 수 없고, 종료 후에 상태유지도 되지 않는다. 반면 animation은 %를

code정의: role 속성은 웹 콘텐츠의 특정 역할을 정의합니다. 주로 ARIA(Accessible Rich Internet Applications) 속성으로 사용되며, 스크린 리더와 같은 보조 기술이 페이지의 구조와 기능을 이해하는 데 도움을 줍니다.용도: 특정 요

정의: class 속성은 여러 HTML 요소에 공통적으로 적용할 수 있는 스타일을 정의합니다.용도: 여러 요소에 동일한 스타일을 적용하고 싶을 때 사용합니다. 하나의 클래스는 여러 요소에 적용할 수 있습니다.정의: id 속성은 문서 내에서 고유한 요소를 식별하기 위해

정의: checked 속성은 체크박스(<input type="checkbox">)와 라디오 버튼(input type="radio">)이 선택되었는지를 나타냅니다.용도: 사용자가 체크박스를 선택했는지, 또는 라디오 버튼 그룹에서 특정 옵션을 선택했는지를 확인하는 데

.parent의 직접적인 자식인 .child 요소만 선택합니다.자식 선택자를 사용하지 않으면, 모든 .child 요소가 선택됩니다.손자 요소를 선택하려면, 자식 선택자 없이 모든 하위 요소를 선택할 수 있습니다.code\> 기호를 사용하면 특정 요소의 직접적인 자식만

정의: 요소를 화면에 표시하지 않습니다. 해당 요소는 문서 흐름에서 완전히 제거됩니다.용도: 특정 요소를 숨기고 싶을 때 사용합니다.정의: 요소가 블록 레벨 요소로 표시됩니다. 블록 요소는 새로운 줄에서 시작하며, 가로 전체를 차지합니다.용도: 주로 레이아웃을 구성할

CSS의 가상 선택자는 특정 상태나 위치의 요소를 선택하는 데 사용되는 선택자입니다. 기본 선택자와는 달리, 실제 DOM 요소가 아닌 가상의 상태를 선택합니다. 정의: 마우스 커서가 요소 위에 있을 때 적용됩니다.용도: 버튼이나 링크에 마우스를 올렸을 때 스타일을 변경

static - 기본값relative - 요소 자기 자신을 기준으로 배치absolute - 부모 요소를 기준으로 배치, static이 아닌것이 있으면 그것을 기준, static 아닌것이 없으면 body를 기준fixed - 스크롤 상관 없이 좌측 상단을 기준sticky

media query는 일반적을 viewport의 너비를 기준으로 적용된다.container query는 viewport 대신 영역을 감싼 container를 기준으로 적용된다.모달dialog에 open 속성을 추가하지 않으면 기본적으로 dialog 요소가 숨겨진다.하