보랑취향

반응형 웹에서 태블릿에서만 이미지가 길쭉하게(늘어나거나 찌그러져서) 나오는 이유는 주로 "비율이 유지되지 않는 상태에서 너비 또는 높이가 강제로 지정"되었기 때문이에요.원인 정리1. width, height 둘 다 고정img { width: 100%; height: 300px;} 이런 경우, 화면 너비가 줄어들면 width: 100%가 작아지는데, height: 300px은 고정이라 비율이 깨짐 → 길쭉해짐특히 태블릿처럼 중간 사이즈에서 자주 발생2. object-fit을 안 썼거나 잘못 씀img { width: 100%; height: 300px; object-fit: cover;} object-fit: contain → 가로세로 비율 유지object-fit: cover → 꽉 채움 (자르기도..

flex: 0 0 calc((100% - (10px * 2)) / 3); “아이템 3개를 한 줄에 꼭 맞게 배치하되, 양옆 간격 10px×2를 제외한 나머지 공간을 세 등분하라” 는 뜻.justify-content: space-between; “아이템 너비에 상관없이 첫/마지막은 컨테이너 끝에 붙이고, 나머지 빈 공간을 아이템 사이에 균등 분배하라” 는 뜻.차이점 요약flex-basis: calc… + flex: 0 0 …아이템 고정 크기(basis)를 계산해서 정확히 공간을 채움gap 혹은 margin 으로만 아이템 사이 간격 제어justify-content 없이도 양끝 간격이 일정줄이 바뀌어도 항상 3개가 정확히 한 줄에 들어감justify-content: space-between;아이템의 자유 크기..

CSS에 webp파일 적용하기.가장 간단: background-image: url('image.webp');폴백: 먼저 JPG 선언 → 그 위에 WebP 선언@supports: 기능 지원 여부 검사 후 WebP 적용image-set: WebP/폴백 동시, 고해상도까지 한번에 처리기본: WebP만 사용하기css.box { width: 300px; height: 200px; background-image: url('image.webp'); background-size: cover; background-position: center; } 폴백 포함하기WebP 지원 브라우저에는 WebP, 미지원 브라우저에는 JPEG/PNG를 보여주려면 배경 이미지를 두 번 선언합니다..box { ..

BrowserStack 브라우저스택 LT Browser (LambdaTest) Responsively App(현재내컴퓨터에 있음) Can I use유로 (무료 체험가능 사용제) 무료+유료무료 + 오픈소스 + 빠름https://caniuse.com/여러 브라우저 테스트모바일 반응형 확인모바일 반응형 확인접근성 + 호환성 체크 용도로 보조적으로 사용진짜 기기 기반 테스트 → 정확함모바일/태블릿/데스크탑 여러 화면 동시 확인 가능무료 + 빠르게 모바일 반응형 확인WebP 지원 여부CSS 지원 여부 등 한눈에 보기 좋음PC, 모바일, 다양한 브라우저 버전 실시간 테스트웹접근성 체크 기능 포함여러 화면 사이즈 동시에 확인 가능 브라우저 종류별은 아니지만 반응형 확인에 최적 크롬 기준 사용법웹사이트 열기키보드 F..

WebP로 저장하는 방법 (최신 포토샵 기준 2022~2025)[파일] → [다른 이름으로 저장(Save As)] 클릭->확장자에 .webp 있음형식 선택 → WebP (*.WEBP) 선택옵션 선택압축률(품질) 조절 가능 (0~100%)→ 70~80 정도 추천 (화질 좋고 용량 작음)WebP 변환 다른 방법방법특징포토샵직접 편집 → WebP 저장 → 품질 조절 가능https://squoosh.app/무료 웹사이트 → 이미지 끌어다 놓고 저장 가능TinyPNG (https://tinypng.com/)여러장 한번에 변환가능 왜 써야 할까?홈페이지 로딩 속도 빨라짐데이터 절약 (특히 모바일에서 유리)구글 SEO에도 도움 → 구글은 빠른 웹페이지 선호트래픽 절약- 이미지 용량이 작으니 방문자가 다운로드하는 데이..

absolute → 부모 기준 고정 / fixed → 화면 기준 고정 position: fixed; /* 항상 화면 오른쪽에 고정됨 */ display: flex; /* 부모 안에서 오른쪽에 붙이고 싶을 때 */ [로고 먼저 코딩 + 메뉴 왼쪽 + 로고 가운데 + 글로벌메뉴 오른쪽].header { position: relative; /* 로고 절대위치 기준 */ display: flex; align-items: center; justify-content: space-between;}.logo { position: absolute; left: 50%; transform: translateX(-50%);}.top-menu {flex: 1; /* 공간 차지 */}. top-menu ul { ..

align-items 속성 예제 align-items 속성 예제 Flexbox의 align-items 속성을 통해 아이템들의 수직 정렬을 조절하는 방법을 보여줍니다. align-items: stretch (기본값) 아이템들이 컨테이너의 높이를 채웁니다. 사용 예시: 기본적인 Flexbox 레이아웃에서 사용 CSS 코드: .container { display: flex; ali..

Flexbox 예제 Flexbox 속성 예제Flexbox의 핵심 속성들을 보여주는 예제입니다.display: flexFlexbox 레이아웃을 활성화합니다.사용 예시: 헤더나 네비게이션 메뉴를 수평으로 배치할 때12345flex-direction: row아이템들이 수평으로 배치됩니다.사용 예시: 기본값으로, 수평으로 배치할 때12345flex-direction: column아이템들이 수직으로 배치됩니다.사용 예시: 세로로 배치할 때12345flex-wrap: wrap아이템들이 줄 바꿈됩니다.사용 예시: 그리드 레이아웃에서 아이템들이 줄 바꿈되도록 할 때12345flex-grow: 2특정 아이템이 2배의 공간을 차지합니다.사용 예시: 메인 컨텐츠가 더 많은 공간을 차지하도록 할 때12345flex-shrin..