-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
질문 있습니다
21.10.27 20:07 작성 조회수 91
0
overflow: hidden이 적용 안되는 현상과 footer가 영역 바깥으로 나가는 현상이 생겨 질문드립니다. 똑같이 한 것 같은데 어디서 잘못 된 것인가요?
<html>
<head>
<meta charset="utf-8">
<title>인스타그램</title>
<link rel="stylesheet" href="styles/card.css">
</head>
<body>
<section class="container">
<article class="card">
<header>
<div class="circle-image">
<img src="images/profile.png">
</div>
<div class="card-username">
<span>inflearn</span>
</div>
<div class="option-more">
<button class = "transparent-button"><img src="images/icons/mark.png"></button>
</div>
</header>
<main>
<div class="carousel" data="0">
<!-- 캐러셀 들어갈 영역 -->
<div>
<ul>
<li>
<img src="images/mountain1.jpg">
</li><li> <img src="images/mountain2.jpg"></li><li><img src="images/mountain3.jpg"></li><li><img src="images/mountain4.jpg"></li>
</ul>
<div class="slide slide-left">
<button type="button" class="transparent-button" name="button">
<img src="images/icons/arrow-left.png">
</button>
</div>
<div class="slide slide-right">
<button type="button" class="transparent-button" name="button">
<img src="images/icons/arrow-right.png">
</button>
</div>
</div>
<footer>
<div class="active">
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</footer>
</div>
<div class="card-container">
<div class="card-buttons">
<div>
<button class="transparent-button"><img src="images/icons/heart.png"></button>
</div>
<div>
<button class="transparent-button"><img src="images/icons/chat.png"></button>
</div>
<div>
<button class="transparent-button"><img src="images/icons/paper-plane.png"></button>
</div>
<div class="last-card-button">
<button class="transparent-button"><img src="images/icons/bookmark.png"></button>
</div>
</div>
<div class="card-likes">
좋아요 99개
</div>
<div class="card-content">
<ul>
<li>
<div>
<span>inflearn.user</span> 본문내용
</div>
</li>
<li class="comment">
<div>
<span>inflearn.user</span> 댓글 1
<button class="transparent-button"><img src="images/icons/heart.png"></button>
</div>
</li>
<li class="comment">
<div>
<span>inflearn.user</span> 댓글 2
<button class="transparent-button"><img src="images/icons/heart.png"></button>
</div>
</li>
</ul>
</div>
<div class="card-time">
7일전
</div>
</div>
</main>
<footer class="card-comment">
<input type="text" placeholder="댓글 달기..." name="comment">
<div>
<button class="transparent-button">게시</button>
</div>
</footer>
</article>
</section>
</body>
</html>*{
padding: 0;
margin: 0;
}
ul, li{
list-style: none;
}
button.transparent-button{
background-color: transparent;
border:0;
outline:0;
cursor: pointer;
}
.container {
width: 100%;
background-color: #f0f0f0;
padding: 20px 0;
}
article.card{
width: 600px;
margin: 20px auto;
margin-bottom: 60px;
background: #fff;
border: 1px solid #c0c0c0;
border-radius: 3px;
}
/*** HEADER 시작 ***/
article.card header{
height: 40px;
padding: 10px;
}
article.card header > div {
display: inline-block;
vertical-align: middle;
}
.circle-image{
height: 100%;
padding: 5px;
box-sizing: border-box;
}
.circle-image > img {
height: 100%;
border-radius: 50%;
}
.card-username {
padding: 10px 0;
font-weight: 900;
line-height: 20px;
margin-left: 5px;
font-size: 13px;
}
.option-more {
float: right;
padding: 7px;
}
/*** HEADER 종료***/
/*** CONTENT 시작 ***/
/*버튼*/
.card-container {
padding: 5px 10px;
}
.card-buttons {
padding: 0 5px;
margin-top: 5px;
}
.card-buttons>div{
display: inline-block;
margin-right: 10px;
}
.card-buttons > div.last-card-button{
float: right;
margin-right: 0;
}
/*좋아요*/
.card-likes{
padding: 5px;
font-size:13px;
font-weight: 900;
}
/*본문*/
.card-content {
padding: 2px 5px;
font-size: 13px;
}
.card-content li > div{
padding: 1px 0;
}
.card-content li > div > span {
font-weight: 900;
}
.card-content li.comment > div > button{
float: right;
}
.card-content li.comment > div > button> img{
width: 12px;
margin-right: 5px;
}
/*시간*/
.card-time{
padding: 3px;
font-size: 11px;
color: #a0a0a0;
}
/*FOOTER*/
footer.card-comment {
position: relative;
height:55px;
border-top: 1px solid #e0e0e0;
}
footer.card-comment input{
width: 100%;
height: 100%;
border: 0;
outline: 0;
color: #606060;
padding: 0 15px;
}
footer.card-comment > div{
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
footer.card-comment > div > button {
color: #0095f6;
opacity: 0.5;
padding:10px 5px;
}
/*캐러셀*/
article.card main.carousel {
width: 100%;
position: relative;
}
article.card main.carousel > div {
overflow: hidden;
}
article.card main .carousel ul{
width: 10000px;
}
article.card main .carousel ul>li{
display: inline-block;
}
article.card main .carousel ul>li img{
width: 600px;
}
답변을 작성해보세요.
0
itjustbong
2021.10.30
안녕하세요,
이근표님!
올려주신 코드를 테스트 해본 결과 다음과 같은 결과가 나옵니다.
이근표님께서 올려주신 화면과는 달리 정상적으로 화면이 출력되는 것으로 보입니다.
아마도 브라우져의 기본 스타일 셋의 차이가 아닐까 조심스레 추측해봅니다.
이와 같은 설명이 잘 된 블로그 링크를 소개해드리겠습니다😄
블로그 링크
또한 링크를 참조하시어 문제를 해결하셔도 되며,
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
위 코드를 head 부분에 작성해주셔도 됩니다.
문제에대한 해결이 되었으면 좋겠습니다.
감사합니다.
답변 1