WEB/CSS

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

2021-05-09

- 예제

예제는 하나의 컨테이너 div 안에 3개의 div가 들어 있는 구조로 만들었다. 이 예제를 통해 display:flex의 적용 효과를 알아보도록 하자.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<div id="container">
	<div class="div1" style="width: 300px; height: 200px; background-color: red"></div>
	<div class="div1" style="width: 300px; height: 100px; background-color: green"></div>
	<div class="div1" style="width: 300px; height: 50px; background-color: yellow"></div>
</div>


</body>
</html>

코드를 웹상에 나타내면 아래와 같이 나타난다.

- display:flex 적용

다른 코드를 건드리지 않고 컨테이너 div에만 display:flex 속성을 부여해보겠다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<div id="container" style="display: flex">
	<div class="div1" style="width: 300px; height: 200px; background-color: red"></div>
	<div class="div1" style="width: 300px; height: 100px; background-color: green"></div>
	<div class="div1" style="width: 300px; height: 50px; background-color: yellow"></div>
</div>


</body>
</html>

그러면 아래와 같이 내부에 있는 div 속성이 컨테이너를 기준으로 가로로 정렬된 것을 확인할 수 있다.

이와 같은 결과는 웹 관리자 도구로 보면 좀 더 쉽게 이해가 되는데, 아래의 이미지를 보자.

flex 옵션을 준 결과 내부의 div 요소들은 컨테이너 div를 기준으로 inline 요소와 같이 변경되었다. 내부의 div 요소중 가장 높이가 긴 div기준(여기서는 빨간색)으로 다른 div들도 같은 높이를 가지고 웹 영역을 차지하는 것을 알 수 있다.

- 영역 초과

만약에 내부의 div 요소들의 넓이가 컨테이너보다 넓다면 어떻게 될까? 라는 의문을 가질 수 있다. 이는 flex-wrap이라는 옵션으로 처리할 수 있는데, 옵션은 크게 3가지다.

<style type="text/css">
div{
	/* flex-wrap: nowrap; */
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
	
}
</style>

* flex-wrap: nowrap : 컨테이너가 가지고 있는 각 요소들의 일정한 비율로 맞춰서 줄어들어 컨테이너 영역을 채우게 된다. 초과된 영역은 웹 영역 밖으로 빠져나간다.

테스트를 위해 내부 div 넓이를 모두 1000px로 주었으며, 개발자 도구로 elements를 확인해보면 모두 일정한 간격으로 컨테이너 div에 맞게 넓이가 변경된 것을 확인할 수 있다.

실제 빨간 div 영역은 보라색 빗금 쳐진 부분이지만 웹에서 보이는 거는 컨테이너 비율에 맞게 줄어든 부분이다.

* flex-wrap: wrap : wrap 경우 초과될 경우 줄 바꿈 처리를 한다.

* flex-wrap: wrap-reverse : wrap 경우 초과될 경우 뒤집어서 줄바꿈 처리를 한다.

메인 이미지 출처: Photo by Martin Katler on Unsplash

저작자표시 비영리

'WEB > CSS' 카테고리의 다른 글

[CSS] Flex 태그 자식별로 정렬 다르게 하는 방법 (1)	2023.12.29
[CSS] CSS 배경색 지우는 방법 / 배경 투명하게 하는 방법 (0)	2021.05.10
[CSS] CSS box-shadow에 대하여 알아보도록 하자. (0)	2021.04.24
[CSS] CSS box-sizing에 대하여 알아보도록 하자. (0)	2021.04.21
[CSS] CSS 선택자 :hover 에 대하여 알아보기 (0)	2021.04.20

Contents

새소식

인기 검색어