해결된 질문
작성
·
246
0
*{ box-sizing: border-box; margin: 0px; } .background{ width: 1024px; height: 600px; background-image: url("../images/background.png"); padding: 20px 0px 0px 20px; } .outerbox{ width: 808px; height: 544px; background-image: url("../images/outerbox.png"); } .wrapper { display: flex; flex-direction: row; padding: 32px 0px 0px 32px; } .wrapper__left { width: 208px; height: 472px; display: flex; flex-direction: column; } .wrapper__left__header { width: 100%; height: 30px; display: flex; flex-direction: row; justify-content: center; } .today { font-size: 9px; } .wrapper__left body { width: 100%; height: 100%; } .wrapper__right { width: 524px; height: 472px; background-color: violet; }
지금 29분 10초 현재상황입니다 여기서 갑자기
justify-content: center; << 하는데 여기서부터 저장하기해도 홈페이지 변경이 안되네요 왜그런걸까요? ㅠㅠ
답변 3
1
안녕하세요! 현태님!
HTML, CSS 기초부터 차근차근 공부하는 모습 멋져요!
해당 영상에서 justify-content: center; 를 적용하시게 되면 자식 div가 가운데로 정렬됩니다!
아래 내용을 보시면 TODAY 0 | TOTAL 12345를 감싸고 있는 <div class="today"> 태그가 가운데로 정렬되어야 합니다!
정렬 이전과 이후의 각각 화면은 아래와 같습니다!
아래는 정렬 이전 화면입니다!
다음은 정렬 이후 화면입니다!
만약, 위와 같이 반영되지 않는 경우에는, <div class="today"> 태그의 가로크기(width)가 제대로 적용이 되어있지 않거나, <div class="today"> 태그가 제대로 완성되지 못한 경우 등 여러가지 가능성이 존재합니다!
다시 한 번 확인해 보세요!
0
0
*{
box-sizing: border-box;
margin: 0px;
}
.background{
width: 1024px;
height: 600px;
background-image: url("../images/background.png");
padding: 20px 0px 0px 20px;
}
.outerbox{
width: 808px;
height: 544px;
background-image: url("../images/outerbox.png");
}
.wrapper {
display: flex;
flex-direction: row;
padding: 32px 0px 0px 32px;
}
.wrapper__left {
width: 208px;
height: 472px;
display: flex;
flex-direction: column;
}
.wrapper__left__header {
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
justify-content: center;
}
.today {
font-size: 9px;
}
.wrapper__left__body {
width: 100%;
height: 100%;
}
.wrapper__right {
width: 524px;
height: 472px;
background-color: violet;
}
친절한 답변 감사합니다 선생님 :)