doeunn.log

▶플렉시블 컨테이너와 아이템 ▷플렉시블 박스(Flexible Box) Flex는 요소의 크기가 서로 다르거나 동적인 경우 효율적으로 요소를 정리하기 위해 고안된 레이아웃 방법 중 하나입니다. ▷Flex의 개념 container : Items를 감싸는 부모 요소 박스를 의미 Items : 각 요소를 의미하며, 반드시 container의 자식으로 존재 ▷Flex Container 요소의 속성 참고로 컨테이너에 flex 속성을 주어야 합니다. .container { display: flex; width: 400px; } ① display : 컨테이너를 수직/수평 방향으로 정렬 프로퍼티값 설명 flex Block 특성으로 컨테이너가 수직 방향 정렬 inline-block Inline 특성으로 컨테이너가 수평 방..

▶flex를 이용한 레이아웃 만들어 보기 레이아웃을 잡는 방법은 과거부터 다양하게 존재했습니다. 을 이용하는 방법부터 아직도 많이 사용되는 float 프로퍼티와 position 등을 이용하는 방법이 존재합니다. 모던 웹 브라우저에서는 보다 유연한 레이아웃 방식이 필요했고, CSS3가 등장하며 이에 맞는 flex와 grid 레이아웃 방식이 등장했습니다. 현재는 대부분의 모던 브라우저에서 flex나 grid 프로퍼티를 지원하기 때문에 레이아웃을 배치하기 위해 이 두 가지 방법을 가장 많이 사용합니다. 이번 글에서는 두 방법 중 flex에 대해 알아보고 flex를 상요해 레이아웃을 작성해 보겠습니다. ▷기본 개념 살펴보기 flex는 디바이스나 디스플레이의 크기에 다라 컨테이너에 들어 있는 콘텐츠의 너비, 높이..