CSS 요소 숨기기 (display, opacity, visibility, overflow, hidden, clip 등)
display: none;→ 레이아웃에서 완전히 제거 (전환 효과 X)opacity: 0;→ 요소는 자리를 차지하지만 보이지 않으며, 페이드 인/아웃에 적합 (전환 효과 O)visibility: hidden;→ 요소가 보이지 않고, 마우스 이벤트도 막지만, 공간은 유지 (전환 효과 가능)max-height / height + overflow: hidden;→ 슬라이드 효과 등 높이 변화를 애니메이션 할 때 사용HTML hidden input → 화면에 표시되지 않고 값만 전달 (폼 데이터에 사용)추가 기법 (clip-path, transform: scale, off-screen positioning)→ 다양한 상황에 맞게 요소를 숨기거나 애니메이션 효과를 줄 수 있음1. display 속성display:..
2024. 12. 13.
HTML <img>와 CSS background 어떤 걸 사용할까?
태그→ 사용 상황: 데이터 이미지, 클릭해야 하는 이미지, 정해진 크기와 비율 유지 필요, SEO 및 접근성 강화→ 특징: 이미지 자체가 요소 크기에 맞게 렌더링되며, 브라우저 기본 동작(예: alt 텍스트, 링크 등)을 지원배경 이미지 (background-image)→ 사용 상황: 디자인 요소, 반복적이거나 꾸밈용 이미지, hover 및 전환 효과, 투명도 적용, 전체 영역 채우기 등→ 특징: CSS를 통해 배경 위치, 크기, 반복 여부 등을 자유롭게 제어하며, 해당 요소의 크기를 직접 지정해주어야 함1. 기본 원칙클릭하거나 특정 영역 내에서 보여져야 하는 이미지→ 사용자 인터랙션(클릭, 터치)이 필요하거나, 이미지 자체의 크기와 비율이 중요하다면 태그를 사용합니다.예: 제품 이미지, 썸네일, 콘텐..
2024. 12. 13.
CSS Display
1. 기본 Display 값Block 요소예시: div, header, section, footer, ul, li, ol, dl, dt, dd, p, address, aside, nav특징:기본적으로 가로 전체(100%)를 차지합니다.세로 크기는 내용에 따라 자동으로 늘어납니다.위아래로 쌓이며, 상하좌우의 마진과 패딩을 모두 지정할 수 있습니다.요소 내부에 다른 block 요소나 inline 요소를 포함할 수 있습니다.Inline 요소예시: a, span, em, strong, label, b, i, u특징:텍스트처럼 흐르는 성질을 가지며, 가로 및 세로 크기가 내용만큼 결정됩니다.여러 요소가 한 줄에 나란히 배치되고, 줄바꿈은 공간이 부족할 때 자동으로 발생합니다.좌우의 마진과 패딩은 적용되지만, 상하..
2024. 12. 13.
