싸이월드3

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

싸이월드 만들기 3탄

해결된 질문

작성

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Game</title>
    <link href="./styles/game.css" rel="stylesheet">
</head>
<body>
    <div class="wrapper">
        <div class="wrapper__header">
            <div class="header__title">
                <div class="title">GAME</div>
                <div class="subtitle">TODAY CHOICE</div>
            </div>
            <div class="divideLine"></div>
        </div>
        <div class="game__container">
            <img src="./images/word.png">
            <div class="game__title">끝말잇기</div>
            <div class="game__subtitle">제시어 : <span id="word">코드캠프</span></div>
            <div class="word__text">
                <input class="textbox" id="myword" placeholder="단어를 입력하세요">
                <button class="search">입력</button>
            </div>
            <div id="result" class="word__result">결과!</div>
        </div>
        <div class="game__container">
            <img src="./images/lotto.png">
            <div class="game__title">LOTTO</div>
            <div class="game__subtitle">버튼을 누르세요.</div>
            <div class="lotto__box" id="lottobox">
                <span id="lotto1">3</span>
                <span id="lotto2">5</span>
                <span id="lotto3">10</span>
                <span id="lotto4">24</span>
                <span id="lotto5">30</span>
                <span id="lotto6">34</span>
            </div>
            <button class="button">Button</button>
            </div>
        </div>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0px;
}

html, body{
    width: 100%;
    height: 100%;
}

.wrapper{
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.wrapper__header{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.header__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;
}


.game__container{
    width: 222px;
    height: 168px;
    border: 1px solid gray;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background-color: #f6f6f6;
}

.game__title{
    font-size: 15px;
    font-weight: 900;
}
.game__subtitle{
    font-size: 11px;
    color: #999999;
}

.word__result{
    font-size: 11px;
    font-weight: 700;
}

.word__text{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.textbox{
    width: 130px;
    height: 24px;
    border-radius: 5px;
}
.search{
    font-size: 11px;
    font-weight: 700;
    width: 38px;
    height: 24px;
}

.lotto__box {
    width: 130px;
    height: 21px;
    border: 1px solid #000000;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    font-size: 10px;
    font-weight: 700;
    font-family: Malgun Gothic;
    background-color: #ffe400;
}

.button {
    width: 62px;
    height: 24px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}

질문 1. game__container 에서 display 하고 align-items center 로 했는데 왜 끝말잇기 칸은 사이사이에 공백이 잘 들어가 있는데 lotto 부분은 button 부분이 이상하게 붙어있습니다.ㅠ

똑같은 game__container 적용 받는데 왜 lotto button 칸만 이럴까요ㅠㅠ?

혹시 div 설정 안해서 그런가 해서

<div class="button"><button>Button</button></div>로 해도 똑같습니다..

왜 이런 현상이 발생할까요ㅠㅠ?

HTML/CSS javascript

답변 2

노원두

지식공유자

안녕하세요! 아람님!

정렬은 제대로 되어있는 것 같아요!
단지, 간격이 너무 좁아서 잘 안보이는 것 같네요!

그러면, 왜 간격이 로또와는 다르게 좁아졌을까요?!
로또 아이콘은 세로로 길고, 기차 아이콘은 세로로 짧은게 이유인 것 같아요!

아이콘을 제거하고 비교해 보시면 더 정확한 비교가 될 것 같아요!^^

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 유아람님.

질문 주신 내용을 보면 game__container 클래스가 적용된 두 개의 게임 컨테이너가 있는데, 같은 스타일이 적용되었음에도 불구하고 LOTTO 부분의 버튼이 제대로 정렬되지 않는 문제를 겪고 계신 것 같습니다.

game__container 내부에 포함된 button의 경우, justify-content: space-between를 적용해도 내부 요소들이 모두 균등하게 배치되지 않는 이유는 내부 요소들의 크기나 스타일이 다르기 때문일 수 있습니다.

LOTTO 부분 내부 요소 확인: lotto__box와 button 사이에 픽셀 간격이 잘 설정되었는지 확인 필요합니다. 특히, lotto__box가 130px 넓이를 차지하고 있는 반면 버튼의 넓이와 padding이 적절히 설정되었는지 보세요.
스타일 상속 문제: 스타일이 정확히 상속되지 않는 경우가 있을 수 있습니다. button 클래스에 flex의 영향을 받지 않을 만한 스타일이 있는지 확인하세요.
외부 스타일 영향: 다른 스타일시트나 브라우저 기본 스타일 때문에 레이아웃에 영향을 미치는 경우가 있습니다. 개발자 도구를 사용해 button에 어떤 스타일이 적용되고 있는지 자세히 보는 것이 도움이 될 수 있습니다.

아래는 관련 질문과 답변 링크입니다. 비슷한 문제에 대해 다른 분들의 접근 방법과 해결책을 참고하실 수 있습니다:

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

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

싸이월드3