🌙 4일차 - HTML , CSS 활용 -

레이아웃

• 각각의 요소를 목적에 맞게 배치하는 것

와이어프레임

• 웹 & 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계
• 선,도형으로 웹 & 앱의 인터페이스를 시각적으로 묘사한 것

목업

• 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성
  ex) 트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드 코딩하는 방식

와이어프레임 & 목업을 왜 해야 될까?

• HTML 문서를 통해 화면을 그려보지 않으면, JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어려움
• 설계도 없이 건물을 짓는 것과 같다.

레이아웃 리셋 기본 예시

레이아웃 리셋을 하는 이유

• Body 요소는 기본 스타일에 약간의 여백이 있다.
• width, heigth 계산이 여백을 포함하지 않아 계산에 어려움이 있다.
• 브라우저 마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다르다.

---

Flexbox

• 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법
• 속성 활용시, 요소의 정렬, 요소가 차지하는 공간을 설정 가능

부모 요소에 지정 하는 속성

• 자식 요소들의 정렬과 관련
• flex box 속성

1. flex-direction 속성은 자식 요소들을 정렬할 정렬 축을 결정한다.
   입력할 수 있는 값으로는 row, column, row-reverse, column-reverse가 있음

2. justify-content 속성은 자식 요소들을 수평 방향으로 어떻게 정렬할 것인지 결정한다. 입력할 수 있는 값으로는 flex-start , flex-end, center, space-between, space-around이 있다.

3. align-items 속성은 자식 요소들을 수직 방향으로 어떻게 정렬할 것인지 결정한다. 입력할 수 있는 값으로는 stretch , flex-start , flex-end , center , baseline 이 있다.

자식 요소에 지정하는 속성

• 요소가 차지하는 공관과 관련
• flex 속성

1. flex-grow : 팽창 지수
   • 요소의 크기가 얼마나 늘어날 것인지
2. flex-shrink : 수축 지수
   • 요소의 크기가 얼마나 줄어들 것인지
3. flex-basis. : 기본 크기
   • 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기가 얼마인지

---

실습

• 계산기 목업 만들기
• 과제 제출 기간 : 2/17 14:00 까지

현재 진행 사항

1. 디자인에 참고할 사진 고르기
   

2. 와이어 프레임 디자인
   

3. 현재 까지 작업한 HTML,CSS 활용한 결과물
   

4. 추가적으로 해야 할 작업

• display 쪽 그림자 작업
• display 밑 버튼 3개 그림자 작업
• 버튼 누르는 액션 기능 추가(색상 바뀌는 액션,누르는 것 같이 보이는 액션 등)
• 계산기 외 배경 색상 바꾸기

참고하고 있는 사이트

• https://aboooks.tistory.com/171
• https://colorhunt.co/palette/b9f3fcaee2ff93c6e7fedeff