[CSS] CSS display:flex 통한 화면 구성 알아보기 (기초).

2021-05-09 - 예제 예제는 하나의 컨테이너 div 안에 3개의 div가 들어 있는 구조로 만들었다. 이 예제를 통해 display:flex의 적용 효과를 알아보도록 하자. 코드를 웹상에 나타내면 아래와 같이 나타난다. - display:flex 적용 다른 코드를 건드리지 않고 컨테이너 div에만 display:flex 속성을 부여해보겠다. 그러면 아래와 같이 내부에 있는 div 속성이 컨테이너를 기준으로 가로로 정렬된 것을 확인할 수 있다. 이와 같은 결과는 웹 관리자 도구로 보면 좀 더 쉽게 이해가 되는데, 아래의 이미지를 보자. flex 옵션을 준 결과 내부의 div 요소들은 컨테이너 div를 기준으로 inline 요소와 같이 변경되었다. 내부의 div 요소중 가장 높이가 긴 div기준(여기..