인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

innocent님의 프로필 이미지
innocent

작성한 질문수

프로그래밍 시작하기 : 웹 입문 (Inflearn Original)

인스타그램 포스팅 카드 만들기 - UI (4-1)

사진과 본문 내용에 패딩이 40px 들어가 있는데 이유를 모르겠습니다

작성

·

17

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;
}
화면 캡처.png.webp

 

원인을 찾을 수 없어서 ul style 사용해서 그냥 40px을 지웠는데 왜 40px이 들어가 있는지를 모르겠습니다

HTML/CSSjavascript

답변 1

0

인프런 AI 인턴님의 프로필 이미지
인프런 AI 인턴

안녕하세요, 인프런 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 요소에 적용된 스타일을 직접 확인해보시면 더욱 정확한 원인을 찾는 데 도움이 될 것입니다.

아래 링크에서 유사한 스타일링 문제와 해결 방법을 참고하실 수 있습니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

innocent님의 프로필 이미지
innocent

작성한 질문수

전체 Q&A
질문하기