WEB개발/PUBLISHING (3) 썸네일형 리스트형 Animation (transition, transform, keyframes) 기본적인 의사 클래스 이벤트 :hover 사용자가 요소 위에 마우스를 올렸을 때 스타일을 변경할 때 사용합니다.일반적으로 버튼, 링크 등의 강조 효과에 많이 사용됩니다. :focus 사용자가 요소를 포커스(클릭하거나 키보드 Tab으로 이동)했을 때 적용됩니다.주로 input, textarea 같은 폼 요소에 사용됩니다. :active 사용자가 요소를 클릭하고 있는 동안 적용됩니다.버튼을 클릭할 때 눌리는 효과를 만들 때 유용합니다. :target :target은 URL의 해시(#id)가 해당 요소를 가리킬 때 적용됨.주로 앵커링(페이지 내 이동)과 모달/토글 효과 등에 활용됨. :focus-visible :focus와 유사하지만, 키보드로 포커스할 때만 적용됩니다.마우스로 클릭하면 :focus-visib.. [PUB] position, display, line-height, letter-spacing 1. position 값 의미 static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 > 요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다. absolute 부모(조상) 요소를 기준으로 배치 가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다. 조상 요소 위치를 기준으로 위쪽(top), 아래쪽(bottom), 왼쪽(left), 오른쪽(right)에서 얼마만큼 떨어질 지 결정한다. 조상 중 Position을 가진 요소가 없다면 초기 컨테이닝 블록(요소)를 기준으로 삼는다. (static을 제외한 값) 문서 상 원래 위치를 잃어버린다. (아래에 있는 div가 해당 자리를 차지한다) fixed 뷰포트를 기준으로 삼고 싶은 경우? absol.. [PUB] position : 기본 값은 static이며 top, left, bottom, right 속성값은 무시됩니다. 1. absolute : 부모 엘리먼트애 구애받지 않고 엘리먼트를 자유롭게 배치 부모 엘리먼트가 aboulute, fixed, relative일 경우 부모기준 위치선정 2. fixed : position 속성을 fixed로 지정하면 이렇게 요소를 항상 고정된(fixed) 위치에 배치할 수 있습니다. 3. relative : position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요. 요소의 위치 지정은 top, bottom, left, right 속성을.. 이전 1 다음
