⭐ 오늘의 학습 내용 📌

1. Page Layout

🥕 HTML을 이용한 화면 나누기

1. 수직분할과 수평분할을 이용하여 레이아웃의 큰 틀을 잡는다.

2. 큰 틀에서 점차 세부적으로 페이지의 구성을 정한다.

• 참고하면 좋은 자료: Atomic CSS 방법론
  
  

🥕 Layout의 리셋

HTML의 문서는 기본적인 문법을 가지고있다. 사용자의 편의를 봐주기도 하지만 때때로 레이아웃을 잡는 데 방해가 되기도 한다.

그럴때 필요한 기능이 레이아웃의 리셋이다.

Example 1.

*{
	box-sizing: border-box;     <-- Layout을 리셋하는 기능
}
body{
	margin: 0;	
    padding: 0;
}

이렇게 되면 기존에 HTML에 적용 되었던 스타일링을 제거하여 사용자가 의도한 대로 레이아웃을 구성하기 쉬워진다.

🥕 Flexbox

사용자에 따라 보는 화면이 틀려지면 열심히 만들어 놓은 레이아웃은 망가질 것이다. 그럴때 유연하게 화면을 정리해 주는것이 Flexbox이다.

1. Flexbox 구성 방법

   + 부모 박스 요소에 display: flex를 적용해 준다.

Example 1.

#outer-box{
	display: flex;
    border: 1px dotted red;
    padding: 10px;
}
.box{
	border: 1px solid green;
    padding: 10px;
}

  + 이렇게 되면 자식 클래스인 .box에 flex 속성이 부여된다.

2. Flex 요소에 방향 정하기

   + flex 박스는 수평으로 정렬되는 것이 기본이다

   + flex-direction 속성으로 수직, 수평 분할을 정할수 있다.
      * row (기본값: 수평 정렬)
      * column (수직 정렬) 

Example 2.

body{
	flex-direction: column;		<-- 기본 환경을 수직 정렬로 바꾸어준다
    align-items: center;		<-- 이제 기본 환경이 수직정렬이기 때문에 수직으로 정리하라는
    								명령어가 박스 안의 Element를 수평으로 정리한다.
    justify-content: center;
}

3. Flex 의 속성 값

   + flex 의 속성은 다음과 같이 나뉜다.
      * grow (팽창 지수)
      * shrink (수축 지수)
      * basis (기본 크기)

Example 3.

flex: <grow> <shrink> <basis>

flex: 0 1 auto

  o grow, shrink 속성은 단위가 없다.
  o basis 값이 늘어날수록 해당 속성을 가지고 있는 Element의 
    비율이 늘어난다. (계수만큼 배분을 나누어 받는다)
  o 각 값은 따로 지정하여 계수를 정할수 있다. 

• 참고하면 좋은 자료: Flexbox 연습하기
  
  

2. 와이어 프레임의 설계 및 목업 구현

🥕 와이어 프레임

와이어 프레임이란 레이아웃의 뼈대를 그려 아주 단순하게 제품의 구조를 미리 구현해보는 단계이다.

🥕 목업(Mock-up)

목업은 실물 크기의 모형을 뜻한다. 보통 웹이나 앱에서는 실제 제품이 작동하는 모습과 동일하게 HTML과 CSS를 작성하여 유저의 인터페이스 편리함이나 디자인적인 측면 등을 미리 알아볼수 있다. 다만 기능적으로는 작동하지 않는다.

와이어 프레임 툴 사이트

• Oven
• Figma
• Miro

⭐ 오늘의 소감

어제와는 달리 오늘은 단지 꾸미는 방법이 아닌 구체적으로 프로젝트를 나누고 구현해 나가는 방법을 배웠다. 특히나 와이어 프레임이나 목업이라는 것은 오늘 처음 봤는데 이것 저것 구현해 보는 재미가 있어 시간이 금방 지나갔다.