8/30 TIL

<목차>

1. 레이아웃 및 flex box
2. 계산기 목업 마무리
   +목업 후기

---

1. 레이아웃 및 flex box

◈ 와이어프레임(Wireframe)

▶ 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 '와이어프레임'이라고 한다.

• 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것.
• 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도. 전환효과나, 에니메이션 같은 스타일링 요소나 UX를 판단하는 것이 아니다.
  <이처럼 기본적인 뼈대(틀)을 구성한다>

◈ flex box

• flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.

》 flex 속성

• flex 속성은 flex-shink, flex-basis의 축약속성으로, 같은 컨테이너안쪽에 flexible item들에 대한 속성값을 지정해준다. 기본값은 0 1 auto 이다.

flex: flex-grow flex-shrink flex-basis

》 display: flex

• display: flex는 부모 박스 요소에 적용하여 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이다.

》 flex-direction: 정렬 축 정하기

• flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로로 정렬하게 된다.

》 flex-wrap: 줄 바꿈 설정하기

• flex-wrap속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동적으로 줄 바꿈을 할 것인지 정한다. 설정을 안할경우 줄 바꿈이 되지 않는다.

》 justify-content: 축 수평 방향 정렬

• justify-content속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다. 요소들이 가로로 정렬되어 있다면 가로 방향으로 어떻게 정할 것인지, 세로로 정렬되어 있다면 세로 방향으로는 어떻게 정렬할 것인지 정하는 속성이다.

》 align-items: 축 수직 방향 정렬

• align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정해준다. 요소들이 가로로 정렬되어 있다면 세로 방향으로는 어떻게 정렬할 것이고 세로로 정렬되어 있다면 가로 방향으로는 어떻게 정렬할 것인지 정해주는 속성이다.

2. 계산기 목업 마무리(후기)

※ Html, css를 이용하여 계산기 목업을 작성해보았다. html을 이용한 뼈대구성(와이어프레임)은 어렵지 않았다. 하지만 css로 스타일을 설정해주는 것은 쉽지만은 않았다. 오늘 학습하였던 flex box를 이용하여 최대한 노력하여 목업을 완성해 내었다. 목업 제작도 순탄치만은 않았는데 js기능구현도 걱정이 앞선다...

<계산기 목업>