저번시간엔 CSS 선택자들에 대해서 알아보았습니다. 그러면 이제 특정 요소를 어떻게 선택하는지에 대해서 익숙해졌으니, 이제는 본격적으로 웹페이지를 입맛에 맞게 만들수 있게, CSS 속성들에 대해서 알아보면 되겠습니다. 그러나, CSS속성은 너무 다양하고 방대하고, 보통의 속성들은 간단하게 구글링하는 정도로 쉽게 이해하고 해결 할 수있으므로, 저는 이해하는데 가장 오랜 시간이 걸리고 실무에서도 유용하게 쓰이고 핫(?)한 주제인 flex 속성에 대해서만 심층적으로 알아보려고 합니다.
CSS flex
flex의 방대한 양을 사람마다 이해하는것도 다를테고, 받아들이는 방식도 다를것입니다. 저는 이렇게 복잡한 구조는 최대한 공식화 해서 사용하는것을 좋아하기 때문에 속성에 대해서도 최대한 제가 어떻게 이해했고 넘어갔는지에 대해 설명을 할 것입니다.
CSS flex의 등장과 필요성에 대해서 먼저 생각해볼필요가 있습니다. 제가 이 속성을 핫하다고 했던 이유는 요소를 원하는곳에 배치를 할때 flex속성을 쓰는 사람도있고 float를 쓰는사람도있고 grid를 쓰는 사람도 있기 때문입니다. float속성은 이 중 제일 최신의 속성이고 IE호환성 때문에 float를 쓰는 일부 실무기업들을 제외하고는 전체적으로 넘어가는 추세라는것 같습니다. 따라서 뉴스, 신문배치와 같은 경우(float사용) 또는, 가운데가 뻥뚫려있는 배치를 해주어야하는경우(grid)를 제외하고는 flex특성을 사용하여 요소들을 적재적소에 배치하는것이 필요해 보입니다.
CSS flex는 display속성의 값입니다. 즉 flex자체가 속성이 아닌 값이 되는 것입니다. 저희는 이전에 display속성에 대해서 배운적이 있습니다.
-
block 상자요소
<p>, <div>, <h>, <ul>, <ol>, <form>...
상자요소이며 기본적으로 세로로 배치되는 특징을 가집니다. -
inline 글자 요소
<span>, <a>, <img>...
글자요소이며 본질적으로 가로 세로 크기를 지정해줄수 없다.
특히나 block요소는 기본적으로 세로로 배치가 되어갑니다(쌓여감). 따라서 이를 가로로 원하는데로 배치해주기 위하여 display: flex 특징이 생겨난 것입니다.
flex container와 flex items
flex의 특징을 이해할때 가장 처음으로 필요한것은 flex container와 flex item에 관한 이해입니다. flex는 절대로 각 item만으로는 구성이 불가능합니다. 마치 position 속성에서 absolute를 사용하려면 부모요소에는 position:relative 와 같은 특성이 부여되어있어야하는것과 말이죠.
기본적으로 display:flex속성은 item들의 부모요소인 container에 부여가 됩니다. 이것은 절대 공식과도 같습니다. 나머지 flex 세부속성들은 container와 item에 따라서 어떻게 사용이 가능한지가 나뉘게 됩니다.
출처: HEROPY Tech CSS Flex (Flexible Box) 완벽 가이드
사용할수있는 세부 속성들은 위와같습니다. 이또한 공식과도 같이, container에는 이속성들, items에는 저 속성들을 사용할수있다로 이해하면 될것같습니다.
flex container
display:flex
container의 화면 보여짐 특성을 결정합니다. container 내부의 요소들은 가로로 배치가 되지만 container들 끼리는 여전히 block으로 수직으로 쌓이게 됩니다. 따라서 container까지 가로로 배치하고 싶다 하면 display:inline-flex속성을 주면 됩니다.
display:flex를 부여하여 가로로 배치된 item들의 모습입니다. item들은 기본적으로 div로 선언이 되어있어 block요소인데, 가로로 배치되는것을 볼 수 있습니다.
flex-direction: row
flex container의 주축을 설정합니다. 기본값으로 row(행)이 부여되어있어서 세로로 쌓이는 block요소들에게 해당 속성을 부여만 해주면 자동적으로 가로 정렬이 되게 됩니다. 만약 주축을 세로로 바꾸고 싶다하면 flex-direction: column을 부여하여 주축을 세로(열)로 바꿔줄수있게 됩니다.
flex의 속성들을 이해할때 주축은 굉장히 중요합니다. 저희는 기본적으로 축의 초기값과 현재 축이 어느방향인지를 지속해서 이해하고있어야 합니다.
flex-wrap: nowrap
flex items들의 줄바꿈 여부를 결정합니다. 이 특성을 이해할때 중요한것은 wrap을 "묶는다"의미로 이해하는것보다 "줄바꾼다"의 의미로 이해를해야합니다. 기본값 nowrap은 줄이 바뀌지않는다는 것이고 wrap을 부여하면 줄이 바뀐다는 것이겠죠.
위와 같았던 item들이 만약 화면이 작아져 viewport가 작아지게 되면
위와같이 찌그러지는것이 일반적입니다. 그러나 wrap(줄바꿈 속성을 부여해주게 되면)
위와 같이 줄이 바뀌어서 배치되는것을 확인할수 있습니다. flex-wrap은 뒤에 나올 align-content와 align-items들의 구분에 있어서 중요하게 사용되기도 합니다.
justify-content: flex-start
주축의 정렬방법을 결정합니다. 어김없이 주축이 또 나왔습니다. 저희는 보통 정렬이라는 것을 할때 margin: 0 auto 나 text-align: center와 같은 특성들을 사용했었습니다. 그러나 flex에서는 justify-content를 사용하여 정렬을 해주게 됩니다. 사용법도 매우 간편합니다. flex-start속성은 시작점 정렬, flex-end는 끝점 정렬, center는 가운데 정렬과 같습니다. 이때 주축을 유심히봐야합니다. flex-direction을 기본값 row일 경우 주축은 가로축이 되고, flex-direction이 column이 되어있으면 주축은 세로축이 될것입니다.
위와 같이 justify-content: center를 사용해 item들을 가운데 배치할수있습니다.
align-content: stretch
교차축의 여러줄 정렬방법을 설정합니다. 이것은 수직과 수평, 행과 열을 떠나서 주축의 수직되는 축이 바로 교차축이 되게됩니다. 주축은 flex-direction으로 설정되어있는 방향이 될것입니다. 기본값 stretch는 item들을 교차축으로 쭉늘리게 됩니다. 이 align-content는 justify-content와 마찬가지로 쓸수있는 값이 거의 동일합니다. 또한, 여러줄이라는 표현도 볼 수있는데 flex-wrap을 사용해서 여러줄로 item들이 이루어져있을때 사용하면 되는 특성입니다.
align-items: stetch
교차축의 한줄 정렬방법을 설정합니다. 주의할점은 flex-wrap을 통해 여러줄일 경우 align-content속성을 우선하여 사용해야한다는 것입니다. 이 items는 한줄 정렬방법이므로 item들의 각자의 알맞는 줄에 맞춰 정렬을 하게 됩니다.
align-items: flex-end특성을 통하여 각자에 맞는 줄에 바닥 정렬을 시킨 모습입니다. 보면 1~3과 4~6의 정렬줄이 다른것을 확인할수있습니다.
flex item
flex-grow: 0
flex item의 증가 너비 비율을 정합니다. 기본값은 0으로 뷰포트를 아무리 늘려도 item들이 커지지않는것을 확인할 수 있습니다.
flex-shrink: 1
flex item의 감소 너비 비율을 정합니다. 기본값은 1으로 위에서 봤듯이 뷰포트가 작아지면 item들이 찌부(?)되는것을 볼 수 있습니다.
order: 0
flex item의 순서를 정합니다. 특정한 item을 특정한 위치에 보내고싶다면 order 우선순위 값을 적절히 설정하여 보낼 수 있습니다.
4번 item에 order:-1 을 부여하여 맨앞으로 꺼내보았습니다. 이와 같이 순서를 적절히 조절가능합니다.
마치며
최신 CSS의 가장 중요한 속성중 하나인 CSS flex에 대해서 정리해보았습니다. 역시나 이러한 이론만으로는 이해하기가 쉽진 않겠죠. 구글링을 하다가 재미난 flex연습게임(?)을 찾았습니다.
해당 게임을 여러번 해보니 꽤나 익숙해진것 같습니다 ㅎㅎ 지루할때 하면 실력도 늘고 좋을것 같습니다.
또한, css기초 강의를 다 들은후 박영웅 강사님의 "오버워치 캐릭터 선택 예제"를 최대한 강의를 배제한채 결과물만 보고 클론을 했는데 이것에 대한 회고록을 다음번에 간략히 적어보도록 하겠습니다!
