보랑취향

script type="text/javascript" src="./js/quick.js"async>script>htmlcssdiv class="quick-side-menu"> button onclick="location.href='/faq.html'">Q&Abutton> button id="topButton" class="hidden" onclick="scrollToTop()">TOP ↑button> div>/* 퀵메뉴 스타일 */ .quick-side-menu { position: fixed; right: 10px; bottom: 100px; display: flex; flex-direction: column; gap: 10px; z-index:9997; } .quick-side..

안에 넣기 script type="text/javascript" src="./js/popup.js"async>script>htmlcssdiv class="overlay" id="overlay" onclick="closePopup()" >div> div id="popup"> div class="popup-tit"> 오늘의 공지div> p>이 팝업은 페이지가 열리면 자동으로 나타나며, "오늘 하루 보지 않기"를 누르면 내일 다시 보여집니다.p> div class="popup-buttons"> button onclick="closePopup()">닫기button> button class="gray-button" onclick="close..

반응형 웹에서 태블릿에서만 이미지가 길쭉하게(늘어나거나 찌그러져서) 나오는 이유는 주로 "비율이 유지되지 않는 상태에서 너비 또는 높이가 강제로 지정"되었기 때문이에요.원인 정리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 { ..

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..