질문 있습니다
184
이근표
작성한 질문수 1
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;
}답변 1
0
안녕하세요,
이근표님!
올려주신 코드를 테스트 해본 결과 다음과 같은 결과가 나옵니다.
이근표님께서 올려주신 화면과는 달리 정상적으로 화면이 출력되는 것으로 보입니다.
아마도 브라우져의 기본 스타일 셋의 차이가 아닐까 조심스레 추측해봅니다.
이와 같은 설명이 잘 된 블로그 링크를 소개해드리겠습니다😄
블로그 링크
또한 링크를 참조하시어 문제를 해결하셔도 되며,
<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 부분에 작성해주셔도 됩니다.
문제에대한 해결이 되었으면 좋겠습니다.
감사합니다.
unregistered 이라 뜨며 작동하지 않습니다.
0
54
1
공부한 내용을 블로그에 정리해서 올려도되나요?
0
96
1
sublime text 설치 불가
0
177
1
사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다
0
99
1
처음 질문과 옵션 관련 질문입니다.
0
90
1
마지막에 news 관련 질문
0
84
1
태그 닫는 단축키가 뭔가요?
0
170
1
강의에 사용하는 예제 코드 자료 있나요?
0
386
1
회원가입 폼 검증하기 실행이 안됩니다.
0
274
1
이미지랑 아이콘 파일을 어떻게 찾아요?
0
353
1
VS 코드는 절대 경로랑 상대 경로로 상위 문서 접근이 차단되어 있네요
0
478
0
프로젝트 고민 해결이 안되어 다시 올립니다.
0
394
1
프로젝트 고민 다시올립니다.
0
448
1
친구와의 프로젝트 고민
0
421
1
화면 오른쪽 스크롤이 넘어가질 않아요!
0
517
1
학과 설정
0
332
2
회원가입폼 검증 -2 에서 문제가생겼습니다
0
332
1
card.html 버튼 위치
0
604
1
인스타그램 코드 작성 후 동작을 해보았는데 버튼을 눌러도 넘어가질않네요
0
358
2
carousel의 footer부분에
0
295
1
margin 값에 관한 질문입니다.
0
409
1
function clearMessages() 함수의 원리를 알고싶습니다
0
321
1
removeEventListener
0
238
1
버튼을 눌렀을때 케러셀의 이동
0
811
2