[SEB_FE] Unit4, HTML&CSS🐣

1. 레이아웃

---

✈️와이어 프레임(Wireframe)

레이아웃의 뼈대를 그리는 단계. 즉 와이어로 설계된 모양. 레이아웃과 제품의 구조를 보여주는 용도. 화면의 영역을 구분하고 주요 태그를 메모하는 방식으로 작성할 수 있고, 어떤 목적을 가진 프로그램인지 유추할 수 있다!

<div id="container">
  <div class="col w20">
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
    <div class="icon">아이콘 3</div>
  </div>
  <div class="col w20">
    <div class="row h40">영역1</div>
    <div class="row h40">영역2</div>
    <div class="row h20">영역3</div>
  </div>
  <div class="col w60">
    <div class="row h80">영역4</div>
    <div class="row h20">영역5</div>
  </div>
</div>

width 에 맞춰 1:1:3 비율로 div를 3개로 나누고 그 안의 div도 비율에 맞춰 나눠 줄 수 있다.

.w60 { width: 60%; }
.h40 { height: 40%; }

👩‍💻완성도 높은 레이아웃을 미리 잡아두고 코딩하는 것이 코드 작성에 도움이 될 것이다. (그렇지 않다면 가독성 높은 코드 작성에 실패할 것,,)

2. Flexbox

---

박스를 유연하게 늘리거나 줄여 레이아웃을 잡을 수 있다. display: flex 는 부모 박스 요소에 적용해 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다. flex를 사용하면 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다. div요소는 별다른 설정을 하지 않으면 위쪽에서부터 세로로 정렬되며, 가로로 넓게 공간을 차지한다. flex를 설정하면 div는 왼쪽부터 가로로 정렬되며, 내용만큼의 공간을 차지한다.

main {
	display: flex;
	flex-direction : row;
}

👩‍💻부모 요소인 main에 작성, 자식 요소인 div들을 정렬할 축을 정한다.

✈️Flex 정렬을 이용한 계산기 목업✈️

flex를 이용해 keybutton 정렬을 해주었다. 처음에는 난관이 있었지만 개발자도구를 활용하며 계속 수정, 정렬시켜주니 나름 깔끔하게 정리가 되었다. 색 조합은 Color Hunt 사이트를 이용했다. box-shadow를 이용해 입체감을 준 디자인이 마음에 들었다.

  .button-style{
    background-color:#7B8FA1;
    font-size: 2rem;
    .
    .
    (생략)
    .
    .
    box-shadow: 5px 5px 5px #7a7a7a;
  }

사용되었던 일부 css 코드, 시간이 없다보니 코드를 너무 더럽게(?) 짠 거 같다...

flexbox에 관한 자세한 내용은 따로 포스팅 예정😊