1회차 목표
각 구역 명칭
각 구역별로 div를 나누어서 만들기
<body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"></div> <div class="wrapper__left__body"> <div class="left__body__header"></div> <div class="left__body__profile"></div> <div class="left__body__footer"></div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body>
css를 연결해주고, 하나씩 위치를 잡아주자
background 위치잡기
*{ box-sizing: border-box; } .background{ width: 1024px; height: 600px; background-color: aquamarine; }
background-color은 일단 보기 편하도록 아무색이나 넣음.
좌측,상단을 보면 여백이 조금 있는데 해당 부분도 없애보도록 하자*{ box-sizing: border-box; margin:0px; }전체 옵션에 margin 을 0px로 넣어주면
여백없이 좌상단에 딱 붙게 됨
outerbox 위치잡기
.outerbox{ width: 808px; height: 544px; background-color: brown; }
outerbox는 좌상단에 공간이 필요함
방법은
1. outerbox의 외부 여백을 주거나,
2. background에 내부여백을 주는방법,
3. outerbox의 포지션을 강제로 지정해주는 방법 등이 있다
가장 간단한 방법은 밖에서 안으로, 위에서 아래로 내부여백으로 정렬하는 방법.
즉 background 에서 내부여백으로 주도록 하자.background{ width: 1024px; height: 600px; background-color: aquamarine; padding: 20px 0px 0px 20px; }내부 여백은 padding을 사용하며, 4개의 값은 순서대로 위쪽부터 시계방향으로 적용됨
background-color 대신 이미지를 넣어보자.
html자체에서 이미지 태그로 넣거나
css에서 background image 옵션으로 넣거나 하는 방법등이 있는데html에서 이미지 자체를 불러오면 추후 이미지를 바꿀경우 편리하게 사용할 수 있음.
css 같은 경우는 아예 그 클래스 자체에 배경 이미지를 적용하고 정적으로 이용할때 주로 사용함
반드시는 아님.
여기서는 css에 적용.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 위치 잡기
.wrapper{ display: flex; flex-direction: row; background-color: blue; } .wrapper__left{ width: 208px; height: 472px; background-color: aqua; } .wrapper__right{ width: 524px; height: 472px; background-color: brown; }
옆으로 정렬하도록 wrapper에 flex 옵션을 주고
각각 크기를 지정해줌. (색은 확인을 위해 아무 색이나)현재 위치는 좌상단에 딱 붙어있으니 여백을 줘서 위치조정
위치가 잘 되었으면 wrapper의 색상은 필요없으니 삭제.wrapper{ display: flex; flex-direction: row; padding:32px 0px 0px 32px; }
wrapper__left
wrapper__left의 header와 body를 만들어서 위치를 잡자
.wrapper__left__header{ width: 100%; height: 30px; background-color: blue; } .wrapper__left__body{ width: 100%; height: 100%; background-color: blueviolet; }
언뜻보기에 길이는 좀 안맞지만 위아래 정렬은 되어있는것처럼 보인다
이는 header와 body가 각각 div 블럭이기에 한줄씩 자리를 차지하여 나온것일 뿐이다.
wrapper__left에 정렬 관련 옵션을 넣어주자.wrapper__left{ width: 208px; height: 472px; display: flex; flex-direction: column; }
높이도 딱 맞게 정렬되었다.
정렬 옵션을 넣게되면 높이값을 100% 로 잡더라도 다른 블럭이 일부 차지하면 해당 값을 빼고 나머지를 차지하게 됨.wrapper__left의 background-color 지우고 실제값 넣기
wrapper__left__header
.wrapper__left__header{ width: 100%; height: 30px; } .wrapper__left__body{ width: 100%; height: 100%; }
먼저 색상을 지우고
헤더부분에 카운터를 만들어 보도록 하자<body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> TODAY 0 | TOTAL 12345 </div> <div class="wrapper__left__body"> <div class="left__body__header"></div> <div class="left__body__profile"></div> <div class="left__body__footer"></div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body>이런식으로 만들어 버리면 카운터로써의 기능을 사용할 수 없기에
span 으로 만들어서 해당 기능을 사용할 수 있게 하고,
div로 감싸서 정렬을 하도록 하자.<div class="wrapper__left__header"> <div class="today"> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div>.wrapper__left__header{ width: 100%; height: 30px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .today{ font-size: 9px; }폰트 사이즈를 9px로 줄이고, 각 span들을 일렬로 출력하도록 flex 옵션으로 정렬시킴
wrapper__left__body
지금까지 배운것들 활용해서 좌측 완성 시키기
<body> <div class="background"> <div class="outerbox"> <div class="wrapper"> <div class="wrapper__left"> <div class="wrapper__left__header"> <div class="today"> <span>TODAY</span> <span>0</span> <span> | TOTAL</span> <span>12345</span> </div> </div> <div class="wrapper__left__body"> <div class="left__body__header"> <div class="left__body__header__gray"></div> <div class="left__body__header__line"></div> </div> <div class="left__body__profile"> <div class="profile__detail"> <i class="fa-regular fa-user"></i> 이름 </div> <div class="profile__detail"> <i class="fa-solid fa-phone"></i> Phone </div> <div class="profile__detail"> <i class="fa-regular fa-envelope"></i> E-mail </div> <div class="profile__detail"> <i class="fa-regular fa-star"></i> 인스타그램 </div> </div> <div class="left__body__footer"> <div class="wrapper__feel"> <div class="feel__title">오늘의 기분</div> <select class="left__body__footer__feels"> <option>기쁨 😊</option> <option>슬픔 😂</option> <option>화남 😒</option> </select> </div> </div> </div> </div> <div class="wrapper__right"></div> </div> </div> </div> </body>*{ 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; align-items: center; } .today{ font-size: 9px; } .wrapper__left__body{ width: 100%; height: 100%; border: 1px solid gray; border-radius: 15px; background-color: white; display: flex; flex-direction: column; align-items: center; padding: 20px 30px; } .left__body__header{ width: 100%; display: flex; flex-direction: column; } .left__body__header__gray{ width: 100%; height: 133px; background-color: gray; } .left__body__header__line{ border-top: 1px dotted black; margin: 12px 0px; } .left__body__profile{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .profile__detail { color: #999999; font-size: 10px; margin-bottom: 10px; display: flex; flex-direction: row; } .left__body__footer{ width: 100%; margin-bottom: 30px; } .wrapper__feel { display: flex; flex-direction: column; justify-content: center; width: 100%; } .feel__title { font-size: 11px; margin-bottom: 5px; color: gray; } .left__body__footer__feels{ width: 100%; display: flex; flex-direction: column; } .wrapper__right{ width: 524px; height: 472px; background-color: brown; }
