💻Unit6
CSS 활용
와이어프레임
와이어프레임(Wireframe)
웹이나 애플리케이션을 개발할 떄 레이아웃의 뼈대를 그리는 단계를 와이어프레임이라고 한다. 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것이다. 레이아웃이나 제품의 구조를 보여주는 용도이다.
목업 (Mock-up)
대부분의 산업에서 목업은 실물 크기의 모형을 뜻하지만 웹 또는 앱을 제품이라고 할때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성한다
HTML 구성하기
수직분할 수평분할을 차례로 적용해 레이아웃을 작성한다.
레이아웃 리셋
박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, <body> 요소가 가진 기본 스타일에 약간의 여백이 있을때 사용할 수 있다.
// 레이아웃 리셋 예시
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}Flexbox
display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
1. flex-direction
flex-direction속성은 flex 컨테이너의 주축(main axis) 방향을 설정한다.
부모 요소에 설정해주는 속성으로 , 자식 요소들을 정렬할 주축 정렬방향을 정한다. 기본값은row이외에는columnrow-reversecolumn-reverse
.flex-container {
flex-direction: column;
}
2. flex-wrap
flex-wrap속성은 flex 컨테이너의 복수 flex item을 1행으로 또는 복수행으로 배치한다. 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄바꿈을 할 것인지 정한다. 기본값은no-wrap으로 줄바꿈을 하지않는다. 줄바꿈을 할경우wrap/wrap-reverse
.flex-container {
flex-wrap : wrap
}flex-flow 속성으로 flex-direction 속성과 flex-wrap속성을 같이 지정할 수 있다.
.flex-container {
flex-flow : row wrap;
}3. justify-content
justify-content속성은 flex 컨테이너의 주축 을 기준으로 수평방향으로 어떻게 정렬할 것인지 정한다.
flex-start,flex-end,center,space-between,space-around
.flex-container {
justify-content : center;
}4. align-items
align-items속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다.
stretch,flex-start,flex-end,center,baseline
.flex-container {
align-items : flex-end;
}5. align-content
- flex 컨테이너의 cross axis를 기준으로 flex item을 수직 정렬한다.
stretch(기본값),flex-start,flex-end,center,space-between,space-around
많은 아이템이 한 줄 이상 넘어가는 경우에 사용한다. 만일 아이템이 한 줄을 넘지 않으면 이 속성은 효과를 나타내지 않는다.
6. Flexbox item 속성
order
- flex item의 배치 순서를 지정
.flex-item {
order: 정수값;
}flex-grow
- flex item의 너비에 대한 확대인자를 지정한다. 기본값은 0, 음수값은 무효
flex item이 동일한 flex-grow 속성값을 가지면 모든 flex item은 동일한 너비를 갖음
.flex-item {
flex-grow: 양의 정수값;
}flex-shrink
- flex item의 너비에 대한 축소인자를 지정한다. 기본값은 1, 음수값은 무효
.flex-item {
flex-shrink: 양의 정수값;
}flex-basis
- flex item의 너비 기본값을 px, % 단위로 지정한다. 기본값은 auto
.flex-item {
flex-basis: auto;
}flex
- 세가지 값을 지정해 팽창인자, 수축인자, 너비기본값 을 한번에 지정할 수 있다.
.flex-item {
flex: 0 1 auto;
}align-self
- align-items 속성보다 우선하여 개별 flex item을 정렬한다. 기본값은 auto
FE 개발자(진)가 되고 싶습니다