티스토리 뷰
아이템에 넣을 수 있는 속성들을 알아봅시다.
저번 시간엔 콘테이너에 넣을 수 있는 속성들을 배웠습니다. 이번 시간에는 아이템에 넣을 수 있는 속성들을 배워봅시다. 아이템에는 직계 자식 태그만 속한다는 것을 잊지 마세요.
컨테이너 안에 5개의 상자가 있습니다. 보시면 마지막 상자는 이름은 div-4인데 마지막에 위치해 있고, 다른 것들 보다 조금 길게 만들어졌군요. 긴 것은 길이를 다르게 설정했다고 하더라도 순서도 제가 다르게 입력했을까요?
아래의 소스코드를 주목해주세요.
<head> <title>예시 10번</title> <style> .container{ display: flex; padding: 10px 20px; border: 1px solid blue; } .items{ border: 1px solid green; text-align: center; } #one, #two, #three, #five{ flex: 1 1 150px; } #four{ flex: 3 3 auto; order: 1; } </style> </head> <body> <div class="container"> <div id="one" class="items">div-1</div> <div id="two" class="items">div-2</div> <div id="three" class="items">div-3</div> <div id="four" class="items">div-4</div> <div id="five" class="items">div-5</div> </div> </body>
container 역할을 하는 <div>태그 안에 상자들은 1부터 5까지 순서대로 되어있습니다. #four에 order 값이 1인 것을 주목해 주세요.
order 속성을 이용하면 아이템들의 순서를 바꿀 수 있습니다. 위의 예시도 4번째 상자에 order 값을 통해 순서를 바꾼 것입니다. 숫자가 낮을수록 앞쪽에 위치하며 기본값이 0이기 때문에 4번째 상자가 맨 마지막에 위치하게 된 것입니다.
order: 정수(기본값은 0이며, 숫자가 낮을수록 앞에 위치함)
그렇다면 order값이 같다면 어느 것이 더 먼저올까요? 당연히 코드 상에서 먼저 나온 태그를 앞 쪽에 위치시킵니다.
flex를 이용하면 이렇게 순서 바꾸기도 아주 편합니다.
다른 속성들을 알아보기 전에 축약형에 대해서 간단하게 언급하는게 좋을 것 같군요. 각 아이템들엔 flex라는 속성이 들어가 있습니다. 그리고 3개의 값을 주었습니다. 각각의 값은 flex-grow, flex-shrink, flex-basis의 값을 나타냅니다.
풀어서 쓰는게 더 쉽겠지만, 축약형을 많이 사용하기 때문에 꼭 알아두셔야 합니다.
flex: 3 3 auto;는 flex-grow: 3; flex-shrink: 3; flex-basis: auto;와 같습니다.
flex-grow는 여유 공간이 있다면 아이템의 크기를 늘리고, flex-shrink는 여유 공간이 모자라면 아이템의 크기를 축소시킵니다. 그리고 flex-basis는 아이템의 초기 사이즈를 지정합니다.
flex-grow: 0 | 양수; (기본값은 0입니다. )
flex-shrink: 0 | 양수; (기본값은 1입니다.)
flex-basis: percentage | em | rem | pixel; (기본값은 auto입니다.)
우선 각각의 기본값에 대한 이해가 필요할 것 같습니다. flex-basis의 값이 auto라면 컨텐츠의 크기만큼 아이템의 사이즈가 정해집니다. 값이 0일 경우에도 기본적으로는 아이템들은 컨텐츠의 크기만큼 사이즈를 가집니다. 두 값의 차이(0과 auto)는 다른 것들을 설명하고 다시 설명하겠습니다. flex-grow의 기본값은 0입니다. 이것은 기본적으로 여유 공간이 있더라도 아이템의 크기를 늘리지 않겠다는 것을 의미합니다. 그리고 flex-shrink의 기본값이 1인 이유는 공간이 줄어들 때 여유 공간이 없다면 아이템의 크기를 줄이겠다는 의미입니다.
flex-grow와 flex-shrink의 값이 양수가 들어올 수 있는 이유는 지정된 길이가 아니라 숫자에 따른 비율로 나눠지기 때문입니다. 간단히 말하면 각 아이템들이 가지는 숫자를 더해 자신의 숫자 비율만큼 공간을 차지하고 또 줄이게 된다는 말입니다.
flex-grow와 shrink 값은 비율을 뜻합니다
너무 설명만 하면 이해가 더 안되시겠죠? 소스 코드에 있는 값들을 주목해 주세요. #one, #two, #three, #five엔 flex값을 1 1 150px을 주었고, #four엔 3 3 auto를 주었습니다. 우선은 컨테이너 안에 있는 flex-basis 값들의 수치만큼 엘리먼트들의 사이즈가 주어지고 그 뒤 컨테이너에 남은 공간에 대해서 #four엔 3/7만큼 더 주어졌기 때문에 div-4라는 컨텐츠를 가진 상자가 더 커진 것이랍니다.
마지막으로 flex-basis의 값에 0과 auto는 무슨 차이가 있을까요?
위의 링크를 클릭하시면 아래와 같은 그림을 볼 수 있습니다.
0을 값으로 주면 flex-grow 값에 따라서 아이템의 크기가 나눠집니다. 컨텐츠의 길이가 다르더라도 컨테이너 안의 아이템의 크기가 flex-grow의 비율만큼 차지하고 있는 것을 주목해주세요. 하지만 auto로 값을 주면 각 컨텐츠의 크기만큼의 사이즈만 가지고 있다가 늘어난 여유공간을 flex-grow의 비율만큼 나눠가집니다.
요약하자면, 0은 전체공간을 flex-grow의 비율대로 나누고, auto는 여유공간을 flex-grow의 비율대로 나눕니다.
마지막으로 align-self는 전체가 아니라 단일 아이템만 교차축으로 이동가능하게 만들어주는 속성입니다. 이 속성을 이용해서 더 세밀하게 아이템의 위치를 잡을 수 있습니다.
align-self: flex-start | flex-end | center | baseline | stretch | auto;
다른 값들과 달리 auto에 대해선 직관적으로 이해하기 어려울 수도 있습니다. auto로 값을 주면 컨테이너에 지정된 align-items의 값을 똑같이 적용받거나(상속이라고 합니다.) 아이템에 display: inline-flex가 선언되었다면 stretch가 적용됩니다.
아이템들에 줄 수 있는 속성들은 서로가 영향을 주는 것들이라 설명이 아주 길어졌습니다. 혹시 이해가 되지 않으시면 댓글로 남겨주세요.
공감은 제작자에게 큰 힘이 됩니다.
'Frontend-dev > HTML-CSS-JS' 카테고리의 다른 글
| 플렉스를 활용한 네비게이션 바 만들기 2 (1) | 2018.01.10 |
|---|---|
| 플렉스를 이용한 실전 예제를 만들기 전 준비운동 (0) | 2018.01.09 |
| flex의 컨테이너 (0) | 2017.12.31 |
| display 속성과 flexbox (1) | 2017.12.28 |
| 마진(margin) - 테두리(border) - 패딩(padding) 이란? (0) | 2017.12.27 |