[HTML/CSS] 활용

Chapter1. 레이아웃
1.레이아웃이 필요한 이유를 이해한다.
0.레이아웃을 위한 HTML을 만들 수 있다.
Chapter2. Flex
3.display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.
4.flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다.
5.justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정할 수 있다.
6.flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.
7.flex-basis 를 이용하여 요소의 기본 크기를 결정할 수 있다.
8.VScode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
과제. 계산기 목업 만들기
9.HTML로 계산기에 필요한 구조를 짤 수 있다.
10.숫자 버튼, 기능 버튼을 Flexbox로 각각 배치할 수 있다.
11.검색을 통해 다양한 CSS 속성을 적용할 수 있다.

1.레이아웃을 잡아둬야 제대로 된 분할 및 설계를 할 수 있기 때문에 어디를 어떻게 나눌지 먼저 그려보는 것은 중요하다.

2.가로에서 세로로 (세로 분할 후 가로분할 진행을 말한다) 내려갈 수 있다.

3.display: flex;는 부모 요소에 사용하여 내부를 정렬하는 기능이기 때문에 자식요소에 사용하는 의미는 없다.

4.row/column/row-reverse/column-reverse 등을 원하는 기능대로 사용할 수 있다.

5.justify-content:(row/column)과 align-items : (stretch/start/end/center)를 이용하여 수평-수직 정렬을 결정할 수 있으나 baseline에 대해서는 잘 모르겠다.@

6.flex-grow로 각 항목별 비율을 설정해 크기를 결정할 수 있다.

7.flex-basis를 이용해 각 항목별 비율조절을 통해 크기를 결정할 수 있다.

0. 할 수 있지만 부족한 상태 @@

9.구조를 짠 상태

10.flex를 이용해서 배치하였으나 만족스럽지 않은 상태다 @

11.검색을 통해 css를 적용 중에 있으나 내일까지 과제가 진행되며 아직은 목업단계라 css 설정이 미흡하다@@

오늘은 레이아웃과 와이어프레임 그리고 flex에 대해 배운 후 바로 목업제작에 들어갔는데 생각했던 것 보다 이상하게 적용되는 것들이 많고 내부 구조도 보기와는 다르게 복잡하게 짜여있으며 완성 결과 또한 마음에 들지 않아 중간에 만드는 형태 또한 바꿔버렸다. 내일은 다른 방식으로 와이어프레임을 새로 만든 후 css도 적용해봐야겠다.

위 내용은 큰것(div와 flex로만 적용하려고 했던 모습으로 입력칸, AC/+/-/%칸, 숫자칸, /*-+=칸 네가지로 나눈 후 플렉스 적용 도중 페어와 방향을 선회해 아래 바탕으로 바꿨다.

아래에 첫번쨰를 기준으로(왼쪽 라인은 fadding, margin을 0으로 설정해 왼쪽에 붙어있는 바탕화면이 보여서 그렇다) 원본, css, css2등이 있다. 글자가 뚱뚱해서 weight값을 낮춰보는 시도도 해야겠다.