object-fit : fill (기본값)  - 주어진 너비/높이에 딱 맞게 사이즈가 조절됨 (원본 비율 유지 X)  object-fit : contain  - 원본 비율을 유지하면서 이미지 전체를 보여줌 (여백이 생길 수 있음) object-fit : cover   - 원본 비율을 유지하면서 컨테이너를 완전히 채움  object-fit : none   - 원본 이미지 사이즈 유지

1. 검색 → 선택 → + 버튼 (펼치기) 클릭 2. HTML 태그 복사 클릭 3. 지도 크기 설정 4. 일반지도 or 이미지지도 선택 후 코드 붙여넣기 → 끝  " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스

Flexbox (플렉스 박스)  - 웹 페이지의 레이아웃을 조정/배치하는 데 사용되는 CSS 속성  - 요소를 수평/수직으로 정렬하고 공간을 분배함 # 자식 요소의 배치/정렬은 항상 부모 요소를 기준으로 생각해야 함 구성요소   1) 플렉스 컨테이너 (Flex container)      - Flexbox를 사용하여 요소를 배치하는 부모 요소      - height를 지정해주지 않으면, 컨테이너 내 자식 요소의 높이만큼으로 자동 지정됨      - 플렉스 컨테이너는 바로 아래 자식 요소까지만 영향을 미침  2) 플렉스 아이템 (Flex items)      - 플렉스 컨테이너 내에서 배치되는 자식 요소  3) 주축 (Main axis) & 교차축 (Cross axis)      - 플렉스 컨테이너 내에..

미디어 쿼리 (Media Query)  - 웹 페이지를 출력하는 디바이스의 종류/크기에 따라 CSS 스타일을 변경할 수 있는 기능  - 디바이스의 특성에 맞게 화면을 보여주기 위해 사용함  - 브라우저 크기에 맞게 자동으로 스타일을 조정함 → 사용자 경험 개선에 큰 도움 @media [only | not] 미디어유형 [and 조건1] [and 조건2] ... { 스타일속성 : 속성값 ;}  - and      : 조건을 계속 추가할 수 있음  - 콤마(,)      : 동일한 스타일을 사용할 미디어 유형/조건이 있다면 콤마로 추가할 수 있음  - only      : 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 함  - not 미디어 유형      : 해당 미디어를 제외하고 적용함  e..

가변 그리드 레이아웃  - 화면 크기에 따라 요소의 크기가 자동으로 변하도록 함      · 전체를 감싸는 요소의 너비를 %로 변환      · 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비 계산          → width : ( 요소의 너비 / 전체 요소 너비 ) * 100 가변 이미지#  부모 요소만큼만 크기가 변하도록 하기선택자 { max-width : 100% }#  너비에 따라 다른 이미지 출력하기    - 최소 너비 미만이 되면 다른 이미지로 전환됨  ...  가변 비디오/* 최대 너비는 원본과 같게, 브라우저 창을 작게 하면 고정 비율로 줄어듦 */비디오선택자 { max-width : 100% ; }/* 너비를 화면에 꽉 차게 */비디오선택자 { min-w..