-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
싸이월드 실습 4탄 질문이요 ㅠㅠ
23.06.21 02:01 작성 조회수 354
0
싸이월드 실습 4탄 하는 중인데
LOTTO 부분에 "특히 버튼과 숫자박스 부분"이 왜 세로로 다닥다닥 붙어있을까요..ㅠ
game__container 부분에
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px;가 들어있고
lotto__text부분에도
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;를 넣어봤으나 아무 변화가 없었습니다 ㅠ
game.html:
<!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 class="word__result" id="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__text">
<div class="number__box">
<div class="number1">3</div>
<div class="number1">5</div>
<div class="number1">10</div>
<div class="number1">24</div>
<div class="number1">30</div>
<div class="number1">34</div>
</div>
<button class="lotto_button">Button</button>
</div>
</div>
</div>
</body>
</html>game.css:
* {
box-sizing: border-box;
margin: 0px
}
html, body{
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
padding: 20px;
display: flex;
flex-direction: column; /* 박스가 wrapper안에 game__container 두개 총 세개*/
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;
}
.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;
}
.number__box{
width: 130px;
height: 24px;
border-radius: 5px;
background-color: #FFE400 ;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.lotto__text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.number1{
font-size: 10px;
font-weight: 700px;
margin: 5px;
}
.lotto_button {
font-size: 11px;
font-weight: 700;
width: 62px;
height: 24px;
}
답변을 작성해보세요.
0
노원두
지식공유자2023.06.21
안녕하세요! 현욱님!
lotto__text 내부에 있는 녀석들은 세로로 놓고, space-between을 통해서 사이를 벌려 공간을 만들려고 하신 것 같아요!
여기까진 좋았는데, 문제는 lotto__text 자체에 높이가 없다보니, 그 안에있는 자식들이 만들 여유의 공간이 없는 것 같아요!^^
답변 1