원인모를 이놈의 여백.. ㅜ width:100%; height를 아예 다 빼봐도 화면에 꽉 차지가 않네요 ㅜㅜ

Question

css 리셋코드도 다 작성했고,혹시 몰라서 해당 a 태그 안에 Img태그 말고도 그 위에 부모, 조상 태그들도 css width:100%; height없애주었는데고 저놈의 여백이 사라질 생각을 안하네요 ㅜㅜ 뭐가 문제일까요..? -------------------------html 코드----------------------- Document

커피의 즐거움을 만드는

작은 차이의 미학

겨울을 빨갛게 물들이는

DEEP RED

타트 체리 스무디

레드벨벳 뚱카롱

HOLLYS

DEEP RED EDITION

--------------------------------------------------------------------------------------------------------------------------------------------css----------------------------------------------------------header { position: fixed; /* min-width: 1200px; width: 100%; height: 70px; */ z-index: 50; /* border: 1px solid; background: #808080; */}body { width: 100%; overflow: hidden; / height: 100vh; /}footer { position: fixed; width: 100%; bottom: 0; z-index: 1;}main { width: 100%; / min-height: 899px; / / height: 100vh; / position: relative; z-index: 10;}article { position: absolute; top: 0; width: 100%; / height: 2697px; / / min-height: 899px; / transition: 0.5s;}section { width: 100%; / min-height: 899px; / / height: 100vh; / transition: 1s; overflow: hidden;}.main_cont { width: 100%; min-width: 100%; / min-height: 100vh; / height: 100vh; position: relative;}.main_cont>div:first-child { width: 100%; height: 100%;}.main_cont>* { display: flex; align-items: center; /* 수직 가운데 정렬 */ justify-content: center; /* 수평 가운데 정렬 */}.main_cont>video { width: 100%; max-width: 130%; height: auto; z-index: -1;}.main_cont > a{ width: 100vw; height: 100%;}.main_cont > a img{ width: 100%;}/*텍스트*/.text1 { width: 100%; position: absolute; top: 120px; right: 0; display: flex; flex-direction: column; align-items: flex-end; z-index: 2; overflow: hidden;}.cof_text { position: relative; color: white; font-size: 100px; font-weight: 900; font-family: 'Noto Sans KR', sans-serif; z-index: 3;}.min_text { position: relative; padding: 20px; color: white; font-size: 100px; font-weight: 900; font-family: 'Noto Sans KR', sans-serif; z-index: 3;}/*텍스트 호버 효과*/.cof_text::after,.min_text::after { display: block; content: ''; border-bottom: solid 40px #ea2129; position: absolute; width: 100%; transform: scaleX(0); transition: transform 250ms ease-in-out; bottom: 0; z-index: -1;}.cof_text:hover::after,.min_text:hover::after { transform: scaleX(1); bottom: -10px;}/* 푸드 페이지 */.win_text { position: absolute; left: 300px; top: 375px; padding: 20px; color: white; font-size: 40px; display: inline-block; font-family: 'Noto Sans KR', sans-serif; font-weight: 300;}.dep_text { position: absolute; left: 390px; top: 425px; padding: 20px; color: white; font-size: 40px; display: inline-block; font-family: 'Noto Sans KR', sans-serif; font-weight: 900;}.tatCh { position: absolute; right: 780px; top: 355px; padding: 20px; color: white; font-size: 18px; display: inline-block; font-family: 'Noto Sans KR', sans-serif; font-weight: 500;}.macron { position: absolute; right: 500px; bottom: 195px; padding: 20px; color: white; font-size: 18px; display: inline-block; font-family: 'Noto Sans KR', sans-serif; font-weight: 500;}/* md 상품 페이지 */.hol_text { position: absolute; left: 730px; top: 390px; padding: 20px; color: transparent; font-size: 60px; display: inline-block; font-family: 'Noto Sans KR', sans-serif; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white;}.dep2_text { position: absolute; left: 580px; top: 450px; padding: 20px; color: transparent; /* 글자 색을 투명하게 설정 */ font-size: 60px; display: inline-block; font-family: 'Noto Sans KR', sans-serif; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white; /* 외곽선 색을 흰색으로 설정 */}/* 텍스트 페이드 인 효과 */.text-fade-in { opacity: 0; animation: fade-in 1s forwards; transition: opacity 0.5s ease;}@keyframes fade-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}/* 별 애니메이션 효과 *//* .star a{ height: 100px; width: 100px;} */.star1{ animation: motion 0.3s linear 0s infinite alternate; position: absolute; right: 700px; bottom: 485px; height: 70px; width: 70px; }.star2{ animation: motion 0.3s linear 0s infinite alternate; position: absolute; right: 980px; bottom: 495px; height: 30px; width: 30px; }.star3{ animation: motion 0.3s linear 0s infinite alternate; position: absolute; right: 1040px; bottom: 410px; height: 50px; width: 50px; }.star4{ animation: motion 0.3s linear 0s infinite alternate; position: absolute; right: 1000px; bottom: 245px; height: 40px; width: 40px; }.star5{ animation: motion 0.3s linear 0s infinite alternate; position: absolute; right: 700px; bottom: 295px; height: 30px; width: 30px; }.star6{ animation: motion 0.3s linear 0s infinite alternate; position: absolute; right: 650px; bottom: 410px; height: 30px; width: 30px; }@keyframes motion { 0% { margin-top: 1000px; } 100% { margin-top: 1200px; }} --------------------------------------------------js(혹시 몰라서 연관 있을가 해서)-------------------------------------------------------------- $(function () { let section_number = document.querySelectorAll('article section'); let texts = document.querySelectorAll('.text1, .text2, .menuT, .text3'); /* //메인 컨텐츠가 main태그 맨 위에 붙어있게하기 document.querySelector('article').style.transform='translateY(0)'; */ let time = 1; //페이지 멈추기 위해 변하는 변수 let count = 0; // 페이지 수만큼 변할 변수 let move_distance_vh = 0;// 페이지 높이 let move_distance_px = 0;// 페이지 높이 let footer_height = document.querySelector('footer').offsetHeight; $("body").on("mousewheel", function (event) { /* 스크롤 다운 */ if (event.originalEvent.wheelDelta < 0 && time == 1) { time = 0; setTimeout(function () { time = 1 }, 1000) if (time == 1) { return 0; } console.log('b'); if (count < section_number.length - 1) {//vh 단위로 페이지 이동 count++; move_distance_vh -= 100; document.querySelector('article').style.transform = 'translateY(' + move_distance_vh + 'vh)'; } else if (count == section_number.length - 1) {//(footer)높이만큼 페이지이동 count++; move_distance_px -= footer_height; document.querySelector('article').style.transform = 'translateY(calc(' + ((section_number.length - 1) * -100) + 'vh + ' + move_distance_px + 'px))'; } /* 스크롤 업 */ } else if (event.originalEvent.wheelDelta > 0 && time == 1) { time = 0; setTimeout(function () { time = 1 }, 1000) if (time == 1) { return 0; } console.log('b'); if (count > 0 && count < section_number.length) { //vh 단위로 페이지 이동 count--; move_distance_vh += 100; document.querySelector('article').style.transform = 'translateY(' + move_distance_vh + 'vh)'; } else if (count == section_number.length) { //(footer)높이만큼 페이지이동 count--; move_distance_px += footer_height; document.querySelector('article').style.transform = 'translateY(calc(' + ((section_number.length - 1) * -100) + 'vh + ' + move_distance_px + 'px))'; } } });

kkoko · Answer

html, body 태그의 margin, padding 모두 제거해보세요

캐티 · Answer

display:inline-blockvertical-align:top...

원인모를 이놈의 여백.. ㅜ width:100%; height를 아예 다 빼봐도 화면에 꽉 차지가 않네요 ㅜㅜ

2개의 답변

기술 목록