친절한효자손 취미생활

반응형

인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정렬이든, 중앙 정렬이든, 세로에 대한 중앙 정렬이든 뭐든지 싹 다 쉽고 간편하게 만들 수 있습니다. 말로는 뭔들 못하겠습니까? 바로 실습으로 들어가겠습니다.

 

Flex 속성에 대하여

먼저 플렉스에 대한 개념부터 이해하고 넘어가겠습니다. flex를 검색해 보시면 「구부러지다」, 「탄력성」 등의 의미를 담고 있음을 확인할 수 있습니다. 즉 유연하게 요소들을 배치할 수 있다는 뜻으로 해석할 수 있을 것입니다.

 

flex는 display의 여러 옵션 중 하나입니다. block이나 inline-block, inline 등등의 다양한 옵션 중 하나라는 이야기입니다. 따라서 부모 요소에 display: flex 또는 inline-flex 옵션을 사용합니다. 이때 부모 요소는 Container(컨테이너)가 되고 1대 자식 요소들은 item(아이템) 요소가 됩니다. flex의 다양한 옵션은 바로 컨테이너인 부모 요소에서 제어를 하게 됩니다. 그러면 자동적으로 자식 요소인 아이템들은 부모 요소의 다양한 flex 속성에 의해 배치가 이루어집니다. 아래는 flex를 사용한 간단한 예시입니다.

 

See the Pen flex, inline-flex by rgy0409 (@rgy0409) on CodePen.

 

이 결과를 가지고 더 자세히 설명을 하겠습니다.

 

display: flex;

부모 요소인 컨테이너에 마크업하는 스타일 속성입니다. 이것은 display: block;과 비슷한 개념이라고 이해하시면 됩니다. 즉 컨테이너가 블록 속성을 가지게 됩니다. 현재 제작되는 웹페이지는 거의 대부분 반응형으로 만들어집니다. 반응형 웹에서 블록 요소를 가로 해상도에 맞게 가로로 적절히 배치하는것이 flex 스타일입니다. flex는 자식 요소가 정사이즈로 마크업 되어있어도 유동성있게 움직이게 됩니다. 그것이 flex의 최대 특징이라고 할 수 있겠습니다. 다음에 설명드릴 inline-flex 방식보다 압도적으로 많이 사용되는 방식입니다.

 

display: inline-flex;

마찬가지로 부모 요소인 컨테이너에 사용하는 스타일 속성입니다. 이것은 display: inline-block;과 같습니다. 즉 부모 요소가 인라인 블록요소 속성이 되어 바로 이어지는 또 다른 컨테이너에도 inline-flex 속성이 있다면 서로 가로로 배치가 됩니다. 그래서 위의 예제를 보시면 파란색 컨테이너는 가로로 배치가 된 상태인 것입니다. 하지만 위에서 언급한대로 inline-flex 방식은 거의 사용되지 않습니다. 이유는 컨테이너 안의 직계 자식 요소들이 반응형으로 동작하지 않기 때문입니다. 반응형 웹사이트를 만들때는 잘 쓰이지 않는 스타일 옵션입니다.

 

실전 예시

위의 코드펜에 있는 웹코드들을 그대로 브라켓에 옮겨서 직접 브라우저의 가로 사이즈를 늘리고 줄여보았습니다. 아래의 움짤을 봐주시기 바랍니다.

 

flex와 inline-flex의 차이점

초록색의 컨테이너 DIV가 flex를 적용한 것이고 파란색의 컨테이너 DIV가 inline-flex입니다. 이 둘의 차이가 확실히 보이시죠? 컨테이너의 자식 요소에도 영향을 준다고 말씀드렸는데 그 예시가 바로 맨 마지막에 있는 가로로 긴 파란 컨테이너입니다. 여기에는 자식 요소 10개를 연이어 배치시켰습니다. 보시면 아시겠지만 자식 요소가 부모 요소의 display: inline-flex; 속성에 의해 반응형으로 동작하지 않습니다. 그래서 창을 줄이면 위의 움짤처럼 브라우저에는 가로 스크롤이 생기게 됩니다. 반대되는 예시가 초록색 컨테이너죠. 안쪽의 FLEX라고 적힌 빨간색의 작은 박스들이 창이 줄어드니까 반응형으로 동작하는 모습을 살펴볼 수 있습니다.

 

그리고 브라우저의 가로 해상도가 display: inline-flex; 컨테이너 요소의 가로 사이즈 총 합보다 크면 이렇게 파란색 컨테이너는 모두 가로 배치가 된다는것도 알 수 있습니다. 이제 flex와 inline-flex의 차이점을 확실히 알 수 있겠죠? 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 포스팅 감사합니다.
    2022.07.02 05:52 신고