-

기본 원칙1. 이미지 크기 유연하게 설정이미지는 크기(px)로 고정하지 않고, 부모 요소 크기에 따라 유동적으로 변하도록 설정해야 함대표적으로 max-width: 100%; height: auto; 조합을 사용하여이미지가 부모 컨테이너 너비를 넘지 않고, 비율(가로/세로 비율)을 유지하며 크기가 조절됨2. 비율 유지이미지는 가로 세로 비율을 깨지 않도록 해야 함height: auto로 가로 크기에 맞춰 세로를 자동 조절하거나width: auto로 세로 기준 가로를 자동 조절임의로 고정 크기(width: 100px; height: 100px;)를 주면 이미지가 찌그러질 수 있음3. 적절한 이미지 해상도 제공디바이스 해상도가 다르기 때문에 동일 이미지라도 해상도별 적절한 이미지를 준비모바일 화면, 일반 데스..

• @supports : 이름이 있는 함수 - 해당 조건을 지원할 때만 요소에 색깔 적용 - 브라우저 지원 조건 구현 가능 - 서로 중첩해서 사용 가능 - 미디어 쿼리 내에 사용 가능 * 기본 문법 @supports (조건) { ... } • Sources * //그리드를 이해하는 브라우저는 이 스타일을 적용 @supports (display: grid) { section#main { display: grid; } // display:grid를 쓰지 않는 레이아웃을 적용할 스타일 // 그리드 레이아웃을 쓴 스타일 } // = 중첩하여 사용 가능 @supports (display: flex) { @media screen { /* 화면에 적용할 플레스 박스 레이아웃*/ } @media print { /* 인..