카테고리 없음

Overflow ,flex속성 알아보기

Hyeon been 2023. 5. 11. 21:33

한번씩 읽고 가세요.

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

overflow 속성에 대해 알아보겠습니다.

 

visible

overflow 속성을 생략하거나, overflow 속성값을 visible로 지정해줄 경우 컨텐츠가 경계선 밖으로 삐져나오는 것을 볼 수 있는데요. overflow 속성이 visible로 설정되어 있는 HTML 요소(element)는 내부 공간보다 담아야하는 컨텐츠가 더 많은 경우, 컨텐츠를 밖으로 밀어내는 한이 있더라도 끝까지 보여줍니다.

 

hidden

반대로 overflow 속성을 hidden으로 설정해주면 해당 HTML 요소 밖으로 삐져나오는 컨텐츠를 숨겨버릴 수 있습니다.

 

scroll

주어진 공간을 넘어가는 컨텐츠가 삐져나오면 안 되고, 누락되어도 안 된다면, 스크롤링 가능하게 하는 것이 좋은 대안이 되겠죠? overflow 속성을 scroll로 설정해주면 스크롤바가 생기기 때문에 사용자가 원한다면 컨텐츠를 끝까지 볼 수 있습니다.

 

auto

컨텐츠의 양이 가변적이어서 스크롤바를 보여줘야 할지 말지 미리 결정하기 어려운 경우에는 overflow 속성값으로 auto를 사용하면 되는데요. 요소의 overflow 속성을 auto로 설정해주면, 그 안의 컨텐츠의 크기가 주어진 공간을 넘어가는 경우에만 스크롤바가 생깁니다.

 

가로 스크롤

주어진 공간을 넘어가는 컨텐츠를 줄바꿈하지 않고 사용자가 가로 방향으로 스크롤할 수 있도록 해주고 싶다면 어떻게 해야할까요?

기본적으로 텍스트나 이미지와 같은 인라인 요소들은 가로 공간이 부족한 경우 줄바꿈이 되기 때문에, 세로 방향으로 스크롤바가 생기는데요. 가로 방향으로 스크롤바가 생기게 하고 싶다면 단순히 white-space 속성을 nowrap으로 변경하여 줄바꿈이 되지 않도록 하면 됩니다.

 

justify-content

속성을 이용. 움직이게 함(가로)

  • flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
  • flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
  • center : 요소들을 컨테이너의 가운데로 정렬
  • space-between : 요소들 사이에 동일한 간격을 둔다.
  • space-around : 요소들 주위에 동일한 간격을 둔다.

align-items

세로 선에서 정렬한다.

  • flex-start : 요소들을 컨테이너의 꼭대기로 정렬
  • flex-end : 요소들을 컨테이너의 바닥으로 정렬
  • center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
  • baseline : 요소들을 컨테이너의 시작 위치에 정렬한다.
  • stretch : 요소들을 컨테이너에 맞도록 늘린다.

flex-direction

컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.

  • row : 요소들을 텍스트의 방향과 동일하게 정렬한다.
  • row-reverse : 요소들을 텍스트의 반대 방향으로 정렬한다.
  • colum : 요소들을 위에서 아래로 정렬한다.
  • colum-reverse : 요소들을 아래에서 위로 정렬한다.

column-reverse 또는 row-reverse를 사용하면 요소들의 start와 end의 순서도 뒤바뀐다.

 

order

row나 column의 순서를 역으로 바꾸는 것만으로는 충분하지 않다.
이런 경우에는 order 속성을 각 요소에 적용할 수 있다.
order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있다.

align-self

align-self는 개별 요소에 적용할 수 있는 또 다른 속성이다.
이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들을 지정한 요소에만 적용된다.

flex-wrap 속성

  • nowrap : 모든 요소들을 한 줄에 정렬한다.
  • wrap : 요소들을 여러 줄에 걸쳐 정렬한다.
  • wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬한다.

flex-flow

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에,
flex-flow가 이를 대신할 수 있다.

예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해
flex-flow: row wrap

align-content

  • align-content를 사용하여 여러 줄 사이의 간격을 지정할 수 있다.
  • flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬한다.
  • flex-end : 여러 줄들을 컨테이너의 바닥에 정렬한다.
  • center : 여러 줄들을 세로선 상의 가운데에 정렬한다.
  • space-between : 여러 줄들 사이에 동인한 간격을 둔다.
  • space-around : 여러 줄들 주위에 동일한 간격을 둔다.
  • stretch : 여러 줄들을 컨테이너에 맞도록 늘린다.

align-content는 여러 줄들 사이의 간격을 지정하며, align-items는 컨테이너 안에서
어떻게 모든 요소들이 정렬하는지를 지정합니다.
한 줄만 있는 경우, align-content는 효과를 보이지 않는다.