Show
1. 영역의 보이기 순서(z-index)를 지정하지 않은 태그 모양 <div style="position:relative;"> [적용한 모습] 첫번째 DIV 영역 두번째 DIV 영역 2. 영역의 보이기 순서(z-index)를 지정한 태그 모양 <div style="position:relative; z-index:2;"> ※ 윗쪽에 있는 DIV영역의 순서를 "2"번으로 주고 아래쪽에 있는 DIV영역의 순서를 "1"번으로 주었다. 아래 그림에서 보듯이, "1"번으로 지정한 아래쪽 DIV영역이 먼저 표시되고, 그 다음에 "2"번으로 지정된 윗쪽 DIV영역이 그 위에 겹쳐서 표시되었다. [적용한 모습] 첫번째 DIV 영역 두번째 DIV 영역 3. 글자 겹치기(z-index 지정하지 않음) <div style="color:gold;font-size:70px;font-weight:900;height:100px;position:relative;"> [적용한 모습] 3-1. 글자 겹치기(z-index 지정함) <div style="color:gold;font-size:70px;font-weight:900;height:100px;position:relative; z-index:2;"> [적용한 모습] 위 예들에서 보듯이, DIV영역을 겹치면 겹친 영역이 그 만큼 밀리게 된다. 이를 감안하여 DIV 영역의 가로폭을 조절하여야 한다. >> HTML 태그 사용법 목록: DIV P SPAN IMG A HR FONT BR ... Issue No. 20221025 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다.
벌써부터 스크롤의 압박이 느껴지고, 바야흐로
2020년입니다. 그럼 정말 시작! Flex(플렉스)는
Flexible Box, Flexbox라고 부르기도 합니다. Flex에 관한 오해“Grid가 나온 이상, Flex는 구시대의 유물일 뿐이다.” 저는 아니라고 생각합니다. 더 나중에 나온 스펙인 Grid로도 Flex와 똑같이 구현할 수 있는 경우가 많지만, Grid로는 구현이 어려운 레이아웃이거나 Flex를 쓰는게 더 편리한 경우도 있습니다. 그리고 마소가 싼 똥 버렸지만 우리는 여전히 지원해줘야 하는 인터넷 익스플로러(IE)같은 경우는 Flex는 표준 스펙을 지원하지만 Grid는 legacy(고인물) 버전만 지원하기 때문에, 둘 다 잘 알아두고 적재적소에 활용하는 것이 가장 좋다고 생각돼요. 실무에서 사용을 해보시려는 분들은 제일 궁금한게 아마 “인터넷 익스플로러(이하 IE)에서도 지원이 되나?” 일거예요. Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다.
부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, Flex의 속성들은,
이렇게 두
가지로 나뉘어요. Flex 컨테이너에 적용하는 속성들 display: flex;Flex 컨테이너에 display: flex;를 적용하는게
시작이에요.
직접 테스트 해보세요 Flex 아이템들은 가로 방향으로 배치되고, 자신이 가진
내용물의 width 만큼만 차지하게 되지요. 마치 inline 요소들 처럼요. height는 컨테이너의 높이만큼 늘어납니다. inline-flex도 있는데, 이건 block과 inline-block의 관계를 생각하시면
돼요. 아이템들이
배치된 방향의 축을 메인축(Main Axis), 배치 방향 설정flex-direction아이템들이 배치되는 축의 방향을 결정하는 속성입니다. 즉 “메인축(오뎅꼬치)의 방향을 가로로 할거냐 세로로 할거냐”를 정해주는 거예요.
row (기본값)아이템들이 행(가로) 방향으로 배치됩니다. row-reverse아이템들이 역순으로 가로 배치됩니다. column아이템들이 열(세로) 방향으로 배치됩니다. column-reverse아이템들이 역순으로 세로 배치 됩니다. 크기가 작은 모바일 기기에서 column으로 배치하다가 일정 폭 이상이 되면 row로 바꿔주는 식으로 반응형 레이아웃을 구현할 수도 있겠네요~ 줄넘김 처리 설정flex-wrap컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때
nowrap (기본값)줄바꿈을 하지 않습니다. 넘치면 그냥 삐져 나가요. wrap줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작해요. wrap-reverse줄바꿈을 하는데, 아이템을 역순으로 배치해요. 그림을 보면 이해하실 수 있을 거예요. flex-flowflex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이에요.
자, 이제 “정렬”을 할건데요. 시작하기 전에 기억해 두실게 있어요. “justify”는 메인축(오뎅꼬치) 방향으로 정렬 한 번만 나올게 아니니까 이건↑ 지금 꼭 머리에 넣어 두세요! 메인축 방향 정렬justify-contentjustify 키워드가 나왔죠? 메인축 방향으로 아이템을들 정렬하는 속성이에요.
flex-start (기본값)아이템들을 시작점으로 정렬합니다. flex-end아이템들을 끝점으로 정렬합니다. center아이템들을 가운데로 정렬합니다. space-between아이템들의 “사이(between)”에 균일한 간격을 만들어 줍니다. space-around아이템들의 “둘레(around)”에 균일한 간격을 만들어 줍니다. space-evenly아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다. space-between, space-around, space-evenly는 비슷한듯 하면서 살짝 다른데요, 아래 그림을 봐보세요~ 수직축 방향 정렬align-itemsalign 키워드가 나왔죠? 수직축 방향으로 아이템을들 정렬하는 속성이에요.
stretch (기본값)아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다. flex-start아이템들을 시작점으로 정렬합니다. flex-end아이템들을 끝으로 정렬합니다. center아이템들을 가운데로 정렬합니다. baseline아이템들을 텍스트 베이스라인 기준으로 정렬합니다. justify-content: center; 여러 행 정렬align-contentflex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성입니다.
위의 정렬들,
justify-content랑 align-items를 보셨다면 어떤 느낌인지 이거↑ 테스트 해보시면 아실 거예요..(무책임) 자, 이제 컨테이너에 적용하는 속성은 마무리가 되었고 Flex 아이템에 적용하는 속성들 유연한 박스의 기본 영역flex-basisflex-basis는 Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이).
flex-basis의 값으로는 우리가 width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있고요, 기본값 auto는 해당 아이템의 width값을 사용합니다. width를 따로 설정하지 않으면 컨텐츠의 크기가 되겠지요. content는 컨텐츠의 크기로, width를 따로 설정하지 않은 경우와 같아요. 좀 헷갈리죠? ㅋㅋ 일단 지금은 아이템의 기본 점유 크기를 설정한다고 생각해 주세요. 있다가 나오는 다른 속성들과 결합해서 몇가지 테스트를 하면서 좀 더 익숙해져 보겠습니다.
원래의 width가 100px이 안되는 AAA와 CCC는 100px로 늘어났고, 원래 100px이 넘는 BBB는 그대로 유지되죠~ 반면에 width를 설정하면, 원래 100px을 넘는 BBB도 100px로 맞춰집니다.
둘 다 설정하면?
유연하게 늘리기flex-growflex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이에요.
flex-grow에 0과 1을 세팅한 경우 flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각하시면 됩니다.
각 아이템의 컨텐츠가 “AAAAA”, “B”, “CCC”로 원래의 크기가 다르기 때문에 전체 아이템의 크기가 살짝 애매한 비율로 보이지만, 여백의 비로 생각해 보면 정확히 1:2:1이죠! 유연하게 줄이기flex-shrinkflex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정합니다.
flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있어요. 고정 크기는 width로 설정합니다.
컨테이너의 폭을 100%와 250px로 왔다리갔다리. flex-shrink: 0; 덕분에 컨테이너가 아무리 작아져도 첫번째 아이템은 찌그러지지 않고 폭이 100px로 유지된다. flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.
주의할 점은, flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 됩니다. 축약형 flex로 좀 더 예시를 들어 볼게요.
flex-basis: 0; 으로, 기본 점유 크기를 0으로 만들어버려 결국 전체 크기를 1:2:1로 나누어 가져서, 영역 자체의 크기가 정확히 1:2:1의 비율로 설정되었습니다. flex-wrap과 flex-basis를 이용해서 2단 컬럼의 사각형 목록을 만들어 볼게요.
flex-basis가 40%면, 100%에는 2개까지만 들어가므로 하나의 row에는 2개까지만 남고 다음줄로 넘어가게 되어서 2단 컬럼이 유지가 됩니다. flex: 1 1 40%는 2단, flex: 1 1 30%는 3단 수직축으로 아이템 정렬align-selfalign이니 수직축 정렬이겠죠~
기본값은 auto로, 기본적으로 align-items 설정을 상속 받습니다. 아래는 align-self 값을 BBB는 center, CCC는 flex-start로 설정한 예시예요. 배치 순서order각 아이템들의 시각적 나열 순서를 결정하는 속성이에요.
z-indexz-index로 Z축 정렬을 할 수 있어요. 숫자가 클 수록 위로 올라옵니다.
Flex와 Grid에 대해 더 깊게 공부하고 싶다면 아래 링크의 온라인 강좌를 살펴보세요~ |