싸이월드2 관련 질문 드립니

[코드캠프] 시작은 프리캠프

싸이월드 만들기 2탄

해결된 질문

작성

<body>
    <div class="wrapper">
        <div class="wrapper__header">
            <div class="contents__title">
                <div class="title">Updated news</div>
                <div class="subtitle">TODAY STORY</div>
            </div>
            <div class="divideLine"></div>
            <div class="contents__body">오늘의 기분 너무 좋음</div>
        </div>
        <div class="wrapper__body">
            <div class="contents__title">
                <div class="title">My Video</div>
                <div class="subtitle">INTRODUCE YOURSELF</div>
            </div>
            <div class="body__video"></div>

.contents__title{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.title {
    color: #55b2e4;
    font-size: 13px;
    font-weight: 700;
}

.subtitle{
    font-size: 8px;
    padding-left: 5px;
}

.divideLine{
    width: 100%;
    border-top: 1px solid gray;
}

.contents__body{
    font-size: 11px;
    color: gray;
}

.wrapper__body {
    width: 100%;
    height: 270px;
    background-color: aqua;
}

.body__video {
    width: 100%;
    height: 240px;
    background-color: #c4c4c4;
}

피그마에서는 my video 밑 회색 부분이 사이즈가 width 464px height 240px 이길래
width는 100%로 주고 height 240px로 설정했는데,
이렇게 안맞길래, height 100%로 했더니
이렇게 됩니다.. 왜이렇게 될까요?? 100% 이면 파란 부분까지 회색 부분도 가야하는 것 아닌가요?
자식 클래스는 부모 클래스 따라오는 걸로 알고 있었는데 이상하게 되어서 당황스럽습니다.. 가르쳐주시면 감사드리겠습니다.
My Video 라인에서 조금 떨어트리고 싶어서
```
.body__video {
    width: 100%;
    height: 100%;
    background-color: #c4c4c4;
    margin: 15px 0px 25px 0px;
}
```
margin 줬더니
padding은 먹지도 않는데.. 제가 뭘 잘 못 알았을까요ㅠㅠ?

HTML/CSS javascript

답변 3

노원두

지식공유자

안녕하세요! 아람님!

해당 부분만 보고서는, 전체적인 구조를 알 수 없기 때문에 소스코드 전체를 주시면 다시 답변 드릴게요!

다만, 한가지 도움이 되실까하여 팁을드리면,
width: 100%, height: 100% 라는 것의 기준이 중요한데요!
이것의 기준은 부모의 사이즈랍니다!

따라서, 부모가 height: 200px인 경우 자식에 height: 100%를 설정하셨다면,
자식은 부모의 height: 200px과 동일해 지겠죠?!
이 과정을 바탕으로 분석하신다면, height 사이즈가 왜 내 예상보다 커졌는지 등의 질문은 해결이 되셨을 것이라 생각됩니다!^^

추가적으로 완전한 분석을 원하신다면, 전체 소스코드를 올려주세요!

eggmun(문성진)

질문해주신 내용만으로는 정확한 원인을 파악하기 어려운 점이 있습니다.

혹시 가능하다면, 문제되는 부분의 전체 HTML/CSS 코드(또는 관련된 상위 구조까지)
를 보여주실 수 있을까요?(전체 소스 코드 파일이면 더 좋습니다!)

그래야 보다 정확하게 문제 원인을 분석하고, 확실한 해결 방법을 안내해드릴 수 있습니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 유아람님께서 싸이월드 구현에 관련된 질문을 주셨군요. 여기에 대한 해결책을 제공해드리겠습니다.

자식 클래스와 부모 클래스의 높이 설정 문제:

자식 요소에 height: 100%를 설정했는데도 원하는 결과가 나오지 않는 이유는 부모 요소의 높이가 명확히 설정되어 있지 않기 때문일 수 있습니다. height: 100%는 부모 요소의 높이에 의존하여 값을 가지기 때문에 부모에 height가 설정되어 있어야 합니다. wrapper__body에 명확한 높이, 예를 들어 270px과 같은 값을 설정하지 않으면, body__video의 높이가 의도한 대로 설정되지 않을 수 있습니다.

한 가지 해결책으로는 부모 요소인 .wrapper__body에 높이를 명시적으로 설정하는 방법이 있습니다. 또한 부모 컨테이너가 flex 컨테이너인 경우 flex-grow, flex-shrink, 그리고 flex-basis를 사용하여 자식 요소의 크기를 제어할 수도 있습니다.

margin과 padding의 적용 문제:

CSS에서 margin이 의도대로 효력을 발휘하지 않는 경우가 있습니다. 특히, flexbox 레이아웃 등일 경우 정확한 영향도를 확인하는 것이 중요합니다. 또한 구조적인 문제로 인해 부모 요소의 overflow나 display 설정에 따라 margin이 적용되지 않을 수 있습니다.

또 다른 가능성은 노출된 이미지에 의한 혼란일 수 있습니다. 그리고 padding이 적용되지 않은 문제는 대부분 요소의 box-sizing 속성이나 특정 레이아웃 규칙 때문일 수 있습니다.

아래 관련 답변도 참고하십시오:
- 싸이월드 만들기 관련 questions
- flex의 justify-content 관련 questions

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

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

싸이월드2 관련 질문 드립니