와이어프레임

• 웹 또는 애플리케이션을 개발할 떄 레이아웃의 뼈대를 그리는 단계
• 와이어프레임 단계에서는 전환 효과나, 애니메이션, 사용자 테스트같은 스타일링 요소나 UX를 판단하지 않음

목업(Mock-up)

• 산업에서 목업은 실물 크기의 모형을 뜻함.

하드코딩

•HTML문서에 아래와 같이 하나하나 입력하는 것이 하드코딩(<div>요소 내에 변수의 값을 전달하는 방법을 배우지 않았기 때문)

HTML 구성하기

•수직분할 : 화면을 수직으로 구분, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
•수평분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치, 수평으로 구분된 요소애 height속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있다.

레이아웃 리셋

•박스의 시작을 정확히(0,0)의 위치에서 시작하고 싶을 떄
•widht, height계산이 여백을 포함하지 않아 계산에 어려움이 있을 때
•브라우저마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다를 때
•밑에 몇 줄의 코드를 적용시키면, 기본 스타일링을 제거하여 디자인 한대로 레이아웃을 구현할 수 있다.

Flexbox

Flexbox로 레이아웃 잡기

•Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법
•display: flex는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성방법
•Flexbox 속성들을 활용하면 요소의 정렬,요소가 차지하는 공간을 설정해줄 수 있음

부모 요소에 적용해야하는 Flexbox 속성들

•Flexbox 속성중에는 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있음, 적절한 위치에 속성을 지정해주지 않으면 요소들이 원하는대로 정렬되지 않음

•flex-direction : 정렬 측 정하기, 자식 요소들을 정렬할 정렬 축을 정함, 아무 설절도 해주지 않으면 기본적으로 가로 정렬.

•flex-wrap: 줄 바꿈 설정하기, 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할것인지 정함, 아무 설정도 해주지 않으면 줄 바꿈을 하지 않습니다.

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

•주요 속성값으로는 flex-start, flex-end, center, space-betwwen, space-around 있다.

•align-items: 축 수직 방향 정렬, 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정함

•주요 속성값으로는 stretch, flex-start, flex-end, center, baselinw이 있음

자식 요소에 적용해야하는 Flexbox 속성들

•flex 속성의 값

•flex속성에는 세 가지 값을 지정해줄 수 있다.
•flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
•<grow(팽창 지수)>는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, <shrink(수축 지수)>는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지, <basis(기본 크기)>는 늘어나고 줄어드는 것과 상관없이 요소의 가본 크기는 얼마인지를 의미함
•자식 요소에 flex속성을 따로 설정해주지 않으면 기본값이 적용,왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치
•flex속성 안에 세 가지 값을 한 번에 설정해줄 필요 없이,다음과 같이 각 값을 따로 지정해줄 수 있다.