한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
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는 효과를 보이지 않는다.