와이어 프레임이란?
웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 하고, 단순히 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것을 의미한다.
목업이란?
목업은 실물 크기의 모형을 의미한다. 웹 또는 앱을 제품이라고 한다면 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것이라고 할 수 있다.
하드 코딩이란?
하드코딩은 상수나 변수에 들어가는 값을 소스코드에 직접 쓰는 방식을 말한다.
레이아웃 리셋
* {
box-sizing : border-box;
}
body {
margin : 0;
padding : 0;
}Flexbox로 레이아웃 잡기
Flex로 레이아웃을 구성한 다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법을 의미한다. 학습하면서 자주 봤던 display: flex 라는 CSS 속성 또한 Flexbox 속성 중 하나다.
display : flex
부모 박스 요소에 적용하며 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법으로 이 속성을 적용하면 요소들이 왼쪽부터 가로로 정렬된 것과 내용만큼의 공간을 차지하게 된다.
부모 요소에 적용하는 Flexbox 속성
Flexbox는 속성을 지정해주는 위치에 유의해야함 !
1. flex-direction : 정렬 축 정하기
flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들의 정렬할 정렬 축을 정한다.
- row(기본값) : 가로 정렬
- column : 세로 정렬
- row-reverse : 가로 정렬인데 왼쪽에서 오른쪽
- column-reverse : 세로정렬인데 아래서 위로
2. flex-wrap : 줄 바꿈 설정하기
flex-wrap 속성은 하위 요소들의 크기가 상위 요소들의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다.
- nowrap(기본값) : 줄 바꿈 X
- wrap : 줄 바꿈
- wrap-reverse : 줄 바꿈 되는데 요소의 순서가 역방향
3. justfy-content : 축 수평 방향 정렬
justfy-content 속성은 자식 요소들의 축의 수평 방향으로 어떻게 정렬할 지 정한다.
- flex-start : 아이템을 시작점으로 정렬
- flex-end : 아이템을 끝점으로 정렬
- center : 아이템들을 가운데로 정렬
- space-around : 아이템들의 둘레에 균일한 간격을 만들어줌
- space-between : 아이템들의 사이에 균일한 간격을 만들어 줌
flex-direction 값에 따라 다름
4. align-items : 축 수직 방향 정렬
align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다.
- stretch : 아이템들이 수직축 방향으로 끝까지 늘어남
- flex-start : 아이템들을 시작점으로 정렬
- flex-end : 아이템들을 끝으로 정렬
- center : 아이템들을 가운데로 정렬
- baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬
flex-direction 값에 따라 다름
자식 요소에 적용하는 Flexbox 속성
1. flex
순서대로 grow, shrink, basis 세가지 값을 지정할 수 있다.
flex : 0 1 auto
따로 지정도 가능
flex-grow : 0;
flex- shrink : 1;
flex-basis : auto;
2. grow
자식 요소의 크기가 얼마나 늘어날 것인지 비율을 의미한다.
3. shrink
자식 요소의 크기가 얼마나 줄어들 것인지 비율을 의미한다.
4. basis
자식 요소의 기본 크기를 지정한다.
flex-gorw 속성 값이 0 인 경우에만 felx-basis 속성 값이 유지됨
