Cộng đồng Hỏi & Đáp của Inflearn
câu hỏi đã được viết
[Tiêu chuẩn ra đề năm 2026] Hướng dẫn hoàn hảo cho kỳ thi thực hành Kỹ thuật viên Thiết kế và Phát triển Web
A2 연습중인데 메뉴 배경색과 서브메뉴 크기, 갤러리 그림 정리에 문제가 있습니다
Đã giải quyết
Viết
·
60
1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Green복지재단</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<header>
<div class="header-logo">
<a href="#none"><img src="images/header-logo.jpg" alt="헤더로고"></a>
</div>
<div class="navi">
<ul class="menu">
<li>
<a href="#none">재단소개</a>
<div class="sub-menu">
<a href="#none">설립취지</a>
<a href="#none">연혁</a>
<a href="#none">찾아오시는길</a>
</div>
</li>
<li>
<a href="#none">후원하기</a>
<div class="sub-menu">
<a href="#none">국내후원</a>
<a href="#none">국외후원</a>
<a href="#none">맞춤후원</a>
</div>
</li>
<li>
<a href="#none">자료실</a>
<div class="sub-menu">
<a href="#none">서식자료실</a>
<a href="#none">사진자료실</a>
<a href="#none">후원양식</a>
</div>
</li>
<li>
<a href="#none">스토리</a>
<div class="sub-menu">
<a href="#none">웹진</a>
<a href="#none">보고서</a>
<a href="#none">나의 후원</a>
</div>
</li>
</ul>
</div>
</header>
<div class="slide">
<div class="slide-items">
<a href="#none"><img src="images/slide01.jpg" alt="슬라이드"></a>
<a href="#none"><img src="images/slide02.jpg" alt="슬라이드"></a>
<a href="#none"><img src="images/slide03.jpg" alt="슬라이드"></a>
</div>
</div>
<div class="contents">
<div class="news">
<div class="tab-inner">
<div class="btns">
<a href="#none">공지사항</a>
<a href="#none">갤러리</a>
</div>
<div class="tabs">
<div class="tab1">
<a href="#none"> SMS 발송 모바일 서비스 개선작업 안내입니다.<B>2020.01.09</B></a>
<a href="#none">휴대폰 인증 서비스 개선 작업 기간 연장합니다. <B>2020.01.07</B></a>
<a href="#none">카드사 부분 무이자 할부 이벤트 2월 3일까지 혜택<B>2019.12.31</B></a>
<a href="#none">올앳 시스템 작업 안내<B>2019.12.20</B></a>
<a href="#none">휴대폰 결제 시스템 작업이 완료되었습니다.<B>2019.12.20</B></a>
</div>
<div class="tab2">
<a href="#none"><img src="images/img1.jpg" alt="이미지1"></a>
<a href="#none"><img src="images/img2.jpg" alt="이미지2"></a>
<a href="#none"><img src="images/img3.jpg" alt="이미지3"></a>
</div>
</div>
</div>
</div>
<div class="banner">
<a href="#none"><img src="images/banner.jpg" alt="배너"></a>
</div>
<div class="shortcut">
<a href="#none"><img src="images/shortcut.jpg" alt="쇼컷"></a>
</div>
</div>
<footer>
<div class="footer-logo">
<a href="#none"><img src="images/footer-logo.jpg" alt="푸터로고"></a>
</div>
<div class="copyright">
법적고지 개인정보취급방침 개인정보처리방침
<br>상호 : 엣지컴퍼니 | 대표자 : 홍길동 | 개인정보관리책임자 : 장길산 차장
<br>사업장주소 : 서울특별시 강남구 테헤란로 123-56
</div>
<div class="family-site">
<select name="" id="">
<option value="https://naver.com">네이버</option>
<option value="https://daum.net">다음</option>
</select>
</div>
</footer>
</div>
</div>
<div class="modal-layer">
<div class="modal-contents">
<h1>SNS비회원주문하기 종료 안내</h1>
<h2>
안녕하세요, JUST 쇼핑몰 MD 홍길동입니다. 안타깝게도 SNS비회원 주문하기 서비스가 한달 뒤 종료될 예정입니다.
<br>회원가입없이 SNS계정을 이용해 그동안 제품주문을 하실수 있었는데, 금번 강화된 개인정보보호법 시행령 제 9조 (부칙 3조 3항)에 의거, SNS를 이용한 상품 주문/결제등이 근래에 많은 보안잇슈로 문제가 되고 있음에 다라 KISA의 권고조치의 일환으로 했습니다. 따라서, 한달뒤인 2019.03.10 이후 모든 비회원 고객님들께서는 회원가입으로 전환 후 실명인증이 되어야 하며, 이는 모든 쇼핑몰/오픈마켓등의 전자상거래서비스의 공통된 사항이라는 점을 안내해드립니다.</h2>
<a href="#none" class="close-modal"></a>
</div>
<script src="script/jquery-1.12.4.js"></script>
<script src="script/custom.js"></script>
</div>
</body>
</html>@charset "utf-8";
body{
margin: 0%;
background-color: #ffffff;
color: #333333;
}
body a{
color: #333333;
text-decoration: none;
}
.container{
margin: auto;
width: 1200px;
}
header{
height: 100px;
}
.header-logo{
width: 200px;
float: left;
padding-top: 20px;
text-align: center;
}
.navi{
border: #333333 1px solid;
box-sizing: border-box;
width: 800px;
float: right;
}
.contents{
height: 200px;
display: flex;
}
.contents>div{
width: 400px;
}
footer{
height: 100px;
display: flex;
}
.footer-logo{
width: 200px;
line-height: 110px;
}
.copyright{
width: 700px;
text-align: center;
padding-top: 10px;
}
.family-site{
width: 200px;
padding-top: 30px;
padding-left: 60px;
}
.modal-layer{
display: none;
}
select{
text-align: center;
}
/* 메뉴 */
ul.menu{
list-style: none;
position: relative;
z-index: 10;
padding: 0;
}
ul.menu>li {
float: left;
text-align: center;
width: 25%;
}
ul.menu>li>a{
padding: 2px;
transition: 0.5s;
}
.sub-menu>a{
display:block;
text-align: center;
transition: 0.5s;
}
.sub-menu{
display: none;
}
.sub-menu a:hover{
color: #fff;
background-color: #333333;
}
.menu li:hover>a{
color: #fff;
background-color: #333333;
}
/* 슬라이드 */
.slide{
position: relative;
height: 300px;
overflow: hidden;
}
.slide-items{
font-size: 0;
position: absolute;
width: 3600px;
height: 300px;
}
/* 뉴스,갤러리 */
.tab-inner{
padding-top: 20px;
}
.tab1{width: 95%;
padding: 7px;
margin: auto;
box-sizing: border-box;
border: #333333 1px solid;
display: none;}
.tab1 a{
display: block;
font-size: smaller;
box-sizing: border-box;
border-bottom: #333333 1px solid;
}
.tab1 a:last-child{
border-bottom: none;
}
.tab1 a b{
font-weight: normal;
float: right;
}
.tab2{
width: 95%;
margin: auto;
box-sizing: border-box;
border: #333333 1px solid;
}
.tab2 a{
text-align:center;
}
.tab2 a img{
width: 100px;
}
.btns a{
display:inline-block;
border: #333333 1px solid;
border-radius: 5px 5px 0 0;
padding: 2px;
border-bottom: #ffffff;
background-color: #bbb;
}
.btns{
margin-left: 15px;
margin-bottom: -1px;
}
.btns a:last-child{
margin-left: -4px;
}
a.active{
background-color: #fff;
}
// 메뉴
$('ul.menu>li').mouseenter(function(){
$('.sub-menu').stop().slideDown()
})
$('ul.menu>li').mouseleave(function(){
$('.sub-menu').stop().slideUp()
})
// 슬라이드
setInterval(function(){
$('.slide-items').animate({left:'-1200px'},function(){
$('.slide-items').css({left:0})
$('.slide-items a:first-child').appendTo('.slide-items')
})
},3500)
// 탭메뉴
$('.btns a:first-child').click(function(){
$(this).addClass('active')
$(this).siblings().removeClass('active')
$('.tab1').show()
$('.tab2').hide()
})
$('.btns a:last-child').click(function(){
$(this).addClass('active')
$(this).siblings().removeClass('active')
$('.tab2').show()
$('.tab1').hide()
})서브메뉴가 내려올때 엄청 크게 내려오고, 메뉴의 큰 카테고리에 배경색이 끝까지 채워지지 않습니다
HTML/CSSjquery웹-디자인
Câu trả lời 2
0
codingworks
Người chia sẻ kiến thức
서브 메뉴가 내려오면서 슬라이드가 가려지는건 슬라이드의 너비가 없어서 그렇습니다. 아래처럼 너비를 100%로 넣어주세요.
그리고 서부메뉴가 나오면서 슬라이드가 아래로 내려가는건 header 밑에 div에 높이가 없어서 그렇습니다. header의 높이가 있지만 자식요소인 div에 높이가 있는것은 아닙니다.
0
안녕하세요, 인프런 AI 인턴입니다.
안단감님께서 직면하신 문제에 대해 이해를 돕기 위한 몇 가지 팁과 관련 자료를 제공해 드리겠습니다.
문제 설명
현재 서브메뉴가 열릴 때, 부자연스럽게 크기가 너무 크게 표시되고, 주요 메뉴 항목의 배경색이 끝까지 채워지지 않는 문제가 발생하고 있습니다.
문제 원인 및 해결책
- 서브메뉴 크기 문제
서브메뉴가 너무 크게 표시되는 이유는 .sub-menu가 감싸는 모든 항목에 대해 동일한 크기를 기본적으로 설정하고 있기 때문일 가능성이 큽니다. 이를 해결하기 위해서는 서브메뉴 항목에 대한 명시적인 너비 설정을 필요로 할 수 있습니다.
.sub-menu {
display: none;
width: 100%; /* 부모 메뉴와 동일한 너비로 설정 */
}
- 메뉴 항목의 배경색 문제
메뉴의 배경색이 끝까지 채워지지 않는 이유는 요소의 padding과 border로 인해 배경색이 전체 영역을 덮지 않기 때문일 수 있습니다. box-sizing: border-box;를 사용하여 패딩과 테두리를 포함한 전체 박스 크기를 제어할 수 있습니다.
ul.menu>li>a {
box-sizing: border-box;
width: 100%;
padding: 10px;
transition: 0.5s;
display: block;
}
.menu li:hover>a {
color: #fff;
background-color: #333333;
}
관련된 기존 답변
- “공지사항, 갤러리 배경색이 변화지 않습니다.” - 스타일 및 배경색 관련된 질문에서 수정 방법을 논의한 부분을 확인할 수 있습니다.
위와 같은 해결책을 적용해 보신 후에도 문제가 지속된다면, CSS 스타일링 뿐만 아니라 HTML 구조나 적용 순서를 점검해 보시기 바랍니다. 추가적인 최적화나 개선이 필요한 부분이 있을 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
감사합니다 선생님! 확인후 잘 고쳤습니다!