html5 레이아웃 기초 css display 속성 flex와 grid 차이 float 버려

HTML5로 레이아웃을 만들 때 display 속성의 flex와 grid 만 잘 사용해도 편하게 작업할 수 있다. 이 둘의 차이가 있다면 flex는 단방향으로 html 태그 요소를 정렬하고, grid 는 격자 ( 바둑판 ) 모양으로 자식요소를 정렬한다. 레이아웃 관련 내용들을 찾아보면 전체적인 레이아웃은 grid 도 만들고 내부의 목록과 같은 것들은 flex 로 작업되어 있는 경우들을 흔히 볼 수 있다.

html5 레이아웃 기초
css display 속성 flex와 grid 차이
float 버려

html5 의 레이아웃을 만드는 것은 어쩌면 감각이나 센스가 있으면 좋겠다는 생각이다.

예전에는 float 나 table 를 이용하여 레이아웃을 만들었던 적이 있었다.

지금 생각하면 진짜 욕이 나오고 지금 개발하는 사람들 입장에선 한숨 나오는 것이다.

웹디자인을 다시 공부하면서 flex 와 grid 란 것을 봤을 때는 신기하고 편한 도구임에 감탄하게 되었다.

이래서 책을 꾸준히 접하고 매일 공부해야 된다는 것을 느꼈다.

어쨌든 CSS 에서 다뤄지는 display 속성인 flex와 grid 는 html5에서 레이아웃을 만드는데 정말 편하게 해 준다.

flex 와 grid 차이

매일 새로운 것이 나오지만 전부 공부하는 것은 어렵다. 하지만, 같은 것이라도 꾸준하게 보는 것의 즐거움은 이런 것이 아닐까.

안다고 생각했지만, 다시금 책을 사서 공부하니 새롭게 다가오는 것들이 그렇다.

CSS 의 display 속성이 이런 것이기도 하다. 모르고 있었다면 float 로 삽질 아닌 삽질을 하고 있었겠지만 flex 와 grid 를 알고나니 float 를 버리게 되었다.

레이아웃도 그렇고 목록이나 어쨌든 나열할 수 있는 모든 것들이 편하게 다가온다. 비단, 레이아웃 뿐만 아니라 목록화 되는 모든 것들은 이 2개의 속성으로 편하게 작업할 수 있다.

CSS display 속성의 flex 와 grid 의 차이는 다음과 같다.

flex
부모 html5 요소 ( 컨테이너 ) 내의 자식 요소들을 행 또는 열을 기준으로 단방향으로 정렬한다.
grid
부모 html5 요소 ( 컨테이너 ) 내의 자식 요소들을 격자 ( 바둑판 ) 모양으로 정렬한다.

부모요소 자식요소

HTML5 는 여러가지 태그들을 가지고 있는데 이런 태그는 요소라고 언급되기도 한다.

부모요소와 자식요소란 단어는 각 HTML5에서 사용되는 태그들을 말하는데 자식요소는 부모요소 내에 존재한다.

목록를 표시하는 ul 태그와 li 태그가 부모요소와 자식요소를 잘 보여주는 태그이다.

아래는 ul 태그를 사용하는 방법이다.

<ul>
	<li>아이템 1</li>
	<li>아이템 2</li>
	<li>아이템 3</li>
</ul>

하나의 ul 태그에 li 태그들이 여럿 자리하고 있다.

태그의 자식요소는 항상 부모요소 내부에 존재한다.

위의 코드를 보면 부모요소는 ul 이 되고, 자식요소는 li 가 된다.

즉 CSS 의 display 의 flex 와 grid 속성을 설정할 떄는 부모요소에 지정하여, 자식요소들을 어떻게 정렬될지 설정한다.

CSS flex

CSS 의 display 요소에서 flex 는 컨테이너 ( 부모 요소 ) 내의 자식 요소들을 단방향으로 정렬한다.

부모태그 요소에 설정된 display: flex 의 기본값은 좌측에서 우측으로 균일한 방향으로 정렬한다.

아래는 CSS 의 display 속성에 flex 요소를 설정하는 방법을 보여준다.

부모태그_선택자 {
	display : flex;
}

ㅣ

CSS grid

CSS 의 display 요소에서 grid 는 컨테이너 ( 부모 요소 ) 내의 자식 요소들을 격자형태로 정렬한다.

격자형태는 바둑판 모양을 생각해도 되고 스프레드시트 엑셀의 셀들을 생각해도 된다.

부모태그 요소에 설정된 display: grid 는 grid-template-columns 에 정해진 컬럼의 갯수만큼 균일하게 배치된다.

아래는 grid-template-columns 와 함께 사용한 것으로 1fr 하나당 하나의 컬럼을 의미한다.

부모태그_선택자 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

전체코드 및 결과

위의 내용을 이용하여 코드를 만들어 본다.

먼저 부모요소 div 를 2개 만들고 내부에 자식요소 여러개를 배치하였다.

HTML5 태그의 자식요소는 항상 부모요소 내부에 있다는 것을 상기하자.

display: flex 을 위한 부모요소는 container-flex 로 지정.
display: grid 를 위한 부모요소는 container-grid 로 지정.

display: grid 사용시 grid-template-columns 와 같은 속성을 지정하여 몇 개의 컬럼을 사용할지 설정해 주어야 한다.

여기서 사용된 1fr 은 컬럼 4개를 사용하겠다는 의미로 사용된다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>display flex grid</title>
	</head>
	<body>
		<div>
			<style>
				.container-flex {
					display: flex;
				}
			</style>
			<div class="container-flex">
				<div class="item">flex <br/> 자식 요소 1</div>
				<div class="item">flex <br/> 자식 요소 2</div>
				<div class="item">flex <br/> 자식 요소 3</div>
			</div>
		</div>
		<div>
			<style>
				.container-grid {
					display: grid;
					grid-template-columns: 1fr 1fr 1fr 1fr;
				}
			</style>
			<div class="container-grid">
				<div class="item">grid <br/> 자식 요소 1</div>
				<div class="item">grid <br/> 자식 요소 2</div>
				<div class="item">grid <br/> 자식 요소 3</div>
				<div class="item">grid <br/> 자식 요소 4</div>
				<div class="item">grid <br/> 자식 요소 5</div>
				<div class="item">grid <br/> 자식 요소 6</div>
				<div class="item">grid <br/> 자식 요소 7</div>
				<div class="item">grid <br/> 자식 요소 8</div>
				<div class="item">grid <br/> 자식 요소 9</div>
			</div>
		</div>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
	<script>
		$(document).ready( function() { /* without resources */ });
		$(window).on('load', function() { /* with resources */ });
	</script>
	<style>
		.item {
			border: 1px solid gray;
			width: 100px;
			height: 100px;
			margin: 3px 3px 3px 3px;
		}
	</style>
</html>

결과를 보자.

CSS의 display: flex 의 경우 기본값으로 좌측에서 우측으로 자식 요소들이 배치되는 것을 볼 수 있다.
display: grid 의 경우 grid-template-columns에 1fr 4개를 설정하여 컬럼이 4개인 격자 ( 바둑판 ) 모양으로 자식요소들이 배치되는 것을 볼 수 있다.

저작자표시 비영리 변경금지

'programming > Java' 카테고리의 다른 글

자바 조건문 if else 사용 using java if else condition statement (0)	2023.01.22
자바 다차원 배열 사용 using java multidimensional array (0)	2022.05.22
자바 배열 반복문 for each 사용 using java array by for each statement (0)	2022.05.19
자바 배열의 길이와 값의 접근과 변경 finding java array length and change array value (0)	2022.05.11
자바 배열 사용 동일한 데이터 집합 사용 using java array datatype (0)	2022.05.07

html5 레이아웃 기초 css display 속성 flex와 grid 차이 float 버려