HTML/CSS 활용 복습

와이어프레임(Wireframe)

웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계

상단의 와이어프레임은  POS기(상품 주문 시스템)

 

Flexbox

Flex(Flexible)는 "잘 구부러지는, 유연한"이라는 뜻입니다. Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법

 

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

1. flex-direction : 정렬 축 정하기

flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정합니다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 합니다.

2. flex-wrap : 줄 바꿈 설정하기

flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다. 설정해 주지 않으면 줄 바꿈을 하지 않습니다.

3. justify-content : 축 수평 방향 정렬

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

• flex-direction : row 인 경우 ↔

  

• flex-direction : column 인 경우 ↕️

  

4. align-items : 축 수직 방향 정렬

align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성

• flex-direction : row 인 경우 ↕️

  

• flex-direction : column 인 경우 ↔

  

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

모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex 는 요소가 차지하는 공간과 관련

 

flex 속성의 값

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

grow(팽창 지수) 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, shrink(수축 지수) 는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지, basis(기본 크기) 는 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지를 의미

 

기본값. flex: grow shrink basis, flex: 0 1 auto

 

• width와 flex-basis를 동시에 적용하는 경우, flex-basis가 우선됩니다.
• 콘텐츠가 많아 자식 박스가 넘치는 경우, width가 정확한 크기를 보장하지 않습니다.
• (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.