작성
·
16
0
<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/inflearn-project-images/profile.png"/>
</div>
<div class="card-username">
<span>inflearn</span>
</div>
<div class="option-more">
<button class="transparent-button"><img src="images/inflearn-project-images/icons/mark.png"/></button>
</div>
</header>
<main>
<div class="carousel" data="0">
<!--캐러셀 들어갈 영역-->
<div>
<ul>
<li><img src="images/inflearn-project-images/mountain1.jpg"/></li>
<li><img src="images/inflearn-project-images/mountain2.jpg"/></li>
<li><img src="images/inflearn-project-images/mountain3.jpg"/></li>
<li><img src="images/inflearn-project-images/mountain4.jpg"/></li>
</ul>
<div class="slide slide-left">
<button class="transparent-button"><img src="images/inflearn-project-images/icons/arrow-left.png"/></button>
</div>
<div class="slide slide-right">
<button class="transparent-button"><img src="images/inflearn-project-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">
<dic class="card-buttons">
<div>
<button class="transparent-button">
<img src="images/inflearn-project-images/icons/heart.png"/>
</button>
</div>
<div>
<button class="transparent-button">
<img src="images/inflearn-project-images/icons/chat.png"/>
</button>
</div>
<div>
<button class="transparent-button">
<img src="images/inflearn-project-images/icons/paper-plane.png"/>
</button>
</div>
<div class="last-card-button">
<button class="transparent-button">
<img src="images/inflearn-project-images/icons/bookmark.png"/>
</button>
</div>
</dic>
<div class="card-likes">
좋아요999,999개
</div>
<div class="card-content">
<ul>
<li>
<div>
<span>
lnflean.user
</span>본문 내용
</div>
</li>
<li class="comment">
<div>
<span>lnflean.user</span>댓글 1
<button class="transparent-button">
<img src="images/inflearn-project-images/icons/heart.png">
</button>
</div>
</li>
<li class="comment">
<div>
<span>lnflean.user</span>댓글 2
<button class="transparent-button">
<img src="images/inflearn-project-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>
body {
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.card-comment{
position: relative;
height: 55px;
border-top: 1px solid #e0e0e0;
}
footer.card-comment input{
width: 100%;
height: 100%;
border : 0;
outline : 0;
padding: 0 15px;
color: #606060;
}
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: 600;
}
.slide{
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
}
.slide img {
opacity: 0.75;
}
.slide-right{
right: 0;
}
.carousel footer{
position: absolute;
height: 20px;
text-align: center;
width: 100%;
bottom: -20px;
}
.carousel footer div{
width: 6px;
height: 6px;
background-color : #a8a8a8;
display: inline-block;
border-radius: 50%;
}
.carousel footer div {
width: 6px;
height: 6px;
background-color: #a8a8a8;
}
원인을 찾을 수 없어서 ul style 사용해서 그냥 40px을 지웠는데 왜 40px이 들어가 있는지를 모르겠습니다
답변 1
0
안녕하세요, 인프런 AI 인턴입니다. innocent님.
HTML 문서에서 예상치 못한 여백이나 패딩이 발생할 때는 여러 가지 원인이 있을 수 있는데요. 질문해주신 코드와 현상을 분석해보았습니다.
현재 문제는 <ul>
태그와 관련된 것으로 추측할 수 있습니다. 브라우저는 기본적으로 <ul>
요소에 대해 padding-left
와 margin
을 설정합니다. 이러한 브라우저 기본 스타일(defaul styles)이 원인이 되어 여분의 패딩이 발생했을 가능성이 큽니다.
ul {
list-style: none;
padding: 0; /* 기본 패딩을 0으로 설정 */
margin: 0; /* 기본 마진을 0으로 설정 */
}
해당 코드를 CSS 파일에 추가하면 브라우저 기본 스타일을 초기화하여 불필요한 여백을 제거할 수 있습니다. 현재 코드가 이미 list-style
속성을 none
으로 설정하여 목록 스타일을 없앴지만, 패딩과 마진 기본값을 0으로 설정하지 않아서 40px의 패딩이 발생했을 가능성이 있습니다.
추가적으로 현재 적용된 다른 CSS 규칙들이 원인일 수 있으므로, 개발자 도구(F12)를 사용하여 각 HTML 요소에 적용된 스타일을 직접 확인해보시면 더욱 정확한 원인을 찾는 데 도움이 될 것입니다.
아래 링크에서 유사한 스타일링 문제와 해결 방법을 참고하실 수 있습니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.