[CSS] 요소 정렬

Jungwook·2023년 5월 8일

HTML / CSS

목록 보기

13/18

요소 정렬1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 정렬</title>

<style type="text/css">

	/*
		float: 요소를 좌, 우 방향으로 띄운다 => 요소 수평 정렬
			none => 기본값, 요소 띄움 없음
			left => 왼쪽으로 띄움
	*/

	.picture1 {
		width: 200px;
		height: 150px;
		background-color: tomato;
		
		float: left;  /*left => 왼쪽으로 띄움*/
		margin-right: 10px;
		margin-bottom: 10px;
	}
	
	.text1 {
		clear: left; /* float: left; 해제 */
	}

	.picture2 {
		width: 200px;
		height: 150px;
		background-color: skyblue;
		
		float: right;  /*right => 오른쪽으로 띄움*/
		margin-left: 10px;
		margin-bottom: 10px;
	}
	
	.text2 {
		clear: right; /* float: right; 해제 */
	}

</style>

</head>
<body>

	<div class="picture1"></div>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.<br/>
	<div class="text1"></div>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	<hr/>

	<div class="picture2"></div>
	Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.<br/>
	<div class="text2"></div>
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

</body>
</html>

요소 정렬2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 정렬</title>

<style type="text/css">

	/*
		float 해제
		float 속성이 적용된 요소의 주위로 다른 요소들이 흐르게되는데 이를 방지하기 위해 float 속성을 해제해야 한다.
		1. 형제 요소에 clear: left;, clear: right;, clear: both;를 추가해서 해제한다.
			clear: both;는 left, right를 구분하지 않고 무조건 float를 해제한다.
		2. 부모 요소에 overflow: hidden;, overflow: auto;를 추가해서 해제한다.
		3. 부모 요소에 가상 요소 선택자 "::after"를 이용해 content를 추가해서 해제한다.
	*/

	.box1 {
		width: 150px;
		height: 100px;
		background-color: tomato;
		font-size: 30px;
		color: white;
		margin: 10px;
		float: left;
	}

	.box2 {
		width: 150px;
		height: 100px;
		background-color: green;
		font-size: 30px;
		color: white;
		margin: 10px;
		/* clear: left; */ /* float: left;를 해제한다. */
		clear: both;
	}

	.box3 {
		width: 150px;
		height: 100px;
		background-color: yellowgreen;
		font-size: 30px;
		color: white;
		margin: 10px;
		float: right;
	}

	.box4 {
		width: 150px;
		height: 100px;
		background-color: aqua;
		font-size: 30px;
		color: white;
		margin: 10px;
		/* clear: right; */ /* float: right;를 해제한다. */
		clear: both;
	}

	.float-box1 {
		width: 150px;
		height: 100px;
		background-color: hotpink;
		font-size: 30px;
		color: white;
		margin: 10px;
		float: left;
	}

	.new-box1 {
		width: 700px;
		height: 30px;
		background-color: skyblue;
	}
	
	/* .clearfix1는 .float-box1의 부모 요소 */
	.clearfix1 {
		/* overflow: hidden; */
		overflow: auto;
	}

	.float-box2 {
		width: 150px;
		height: 100px;
		background-color: red;
		font-size: 30px;
		color: white;
		margin: 10px;
		float: left;
	}

	.new-box2 {
		width: 700px;
		height: 30px;
		background-color: blue;
	}
	
	/* .clearfix2는 .float-box2의 부모 요소 */
	.clearfix2::after {
		content: "";
		clear: both;
		display: block;
	}

</style>

</head>
<body>

	<div class="box1">1</div>
	<div class="box1">2</div>
	<div class="box1">3</div>
	<div class="box2">4</div> <!-- 형제간의 float 속성 해제 -->

	<div class="box3">1</div>
	<div class="box3">2</div>
	<div class="box3">3</div>
	<div class="box4">4</div> <!-- 형제간의 float 속성 해제 -->

	<div class="clearfix1">
		<div class="float-box1">1</div>
		<div class="float-box1">2</div>
		<div class="float-box1">3</div>
		<div class="float-box1">4</div>
	</div>
	<div class="new-box1"></div> <!-- 형제의 자식과의 float 속성 해제 -->

	<div class="clearfix2">
		<div class="float-box2">1</div>
		<div class="float-box2">2</div>
		<div class="float-box2">3</div>
		<div class="float-box2">4</div>
	</div>
	<div class="new-box2"></div> <!-- 형제의 자식과의 float 속성 해제 -->

</body>
</html>

요소 정렬3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 정렬</title>

<style type="text/css">

	/*
		display 속성 자동 수정
		float 속성이 추가된 요소는 display 속성의 값이 대부분 block으로 자동 수정된다.
		flex, inline-flex에는 효과가 없다.
	*/

	span {
		width: 100px;
		height: 100px;
		background-color: tomato;
		float: left;
		display: block;  /* float 속성을 지정하면 display: block; 속성으로 자동 변경된다. */
		margin: 10px;
	}

</style>

</head>
<body>

	<span>1</span>
	<span>2</span>
	<span>3</span>

</body>
</html>

요소 정렬4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 정렬</title>

<style type="text/css">

	/*
		위치상의 부모란 DOM(Document Object Model) 구조에 따른 부모를 의미하는 것이 아니라 position 속성의
		유, 무에 다라서 구분된다.
		position 속성을 사용하지 않았거나 사용했더라도 속성값이 static인 경우 위치상의 부모로 인정하지 않는다.
	
		position: 요소의 위치 지정 방법의 기준을 설정한다.
			static => 기본값, 기준 없음 => 배치 불가능
			relative => 요소 자신의 위치를 기준으로 삼는다. => 주변에 영향을 주거나 영향을 받는다.
			absolute => 요소 자신이 아닌 위치상의 부모 요소를 기준으로 삼는다.
			fixed => 브라우저를 기준으로 삼는다.
			
		position과 같이 사용하는 속성, static일 경우 무시된다.
			top => 요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정한다.
			bottom => 요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정한다.
			left => 요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정한다.
			right => 요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정한다.
			top과 bottom, left와 right는 동시에 사용할 수 없다.
	*/

	.parent {
		width: 400px;
		height: 300px;
		border: 4px solid lightgray;
		
		position: relative;
		top: 40px;
		left: 60px;
	}
	
	.child1 {
		width: 150px;
		height: 100px;
		background-color: yellowgreen;
		border: 4px solid red;
		border-radius: 10px;
		
		position: absolute;
		top: 50px;
		left: 100px;
	}
	
	.child2 {
		width: 150px;
		height: 100px;
		background-color: hotpink;
		border: 4px solid blue;
		border-radius: 10px;
		
		position: absolute;
		bottom: 50px;
		right: 100px;
	}

</style>

</head>
<body>

	<div class="parent">
		<div class="child1"></div>
		<div class="child2"></div>
	</div>

</body>
</html>

요소 정렬5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소정렬</title>

<style type="text/css">

	.box {
		width: 100px;
		height: 100px;
		background-color: skyblue;
		font-size: 30px;
		border: 4px solid red;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.relative {
		border: 4px solid blue;
		/* relative: 자기 자신이 있던 위치를 기준으로 삼는다. */
		/* absolute: 위치상의 부모 위치를 기준으로 삼는다. */
		position: relative;
		/* top: 20px; */
		/* left: 70px; */
		bottom: 40px;
		right: 30px;
	}

</style>

</head>
<body>

	<div class="box">1</div>
	<div class="box relative">2</div>
	<div class="box">3</div>

</body>
</html>

요소 정렬6

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 정렬</title>

<style type="text/css">

	.grand-parent {
		width: 400px;
		height: 300px;
		border: 4px solid tomato;
		padding: 30px 100px 100px 30px;
		/* 위치상의 부모는 position: xxx;가 지정되어 있어야 한다. 단, static는 제외 */
		/* 위치상의 부모가 지정되지 않은 경우 브라우저를 기준으로 배치된다. */
		position: relative;
		top: 50px;
		left: 100px;
	}

	.parent {
		width: 400px;
		height: 300px;
		border: 4px solid skyblue;
		/*
			아래의 position: relative;를 주석으로 처리하면 parent는 child의 위치상의 부모로 인정받지
			못하고 position: relative;가 지정된 grand-parent를 위치상의 부모로 인정한다.
			absolute에 position: absolute;이 지정되었으므로 grand-parent에 맞춰서 위치가 변경된다.
		*/
		/* position: relative; */
		top: 30px;
		left: 20px;
	}

	.child {
		width: 120px;
		height: 80px;
		border: 4px solid hotpink;
		background-color: yellowgreen;
		font-size: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.absolute {
		/* 자기 자신이 아닌 위치상의 부모(position: xxx;) 요소를 기준으로 배치된다. */
		position: absolute;
		bottom: 50px;
		right: 10px;
	}

</style>

</head>
<body>

	<div class="grand-parent">
		<div class="parent">
			<div class="child">1</div>
			<div class="child absolute">2</div>
			<div class="child">3</div>
		</div>
	</div>

</body>
</html>

요소 정렬7

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 정렬</title>

<style type="text/css">

	body {
		height: 4000px;
	}

	.grand-parent {
		width: 400px;
		height: 300px;
		border: 4px solid tomato;
		padding: 30px 100px 100px 30px;
		position: relative;
		top: 50px;
		left: 100px;
	}

	.parent {
		width: 400px;
		height: 300px;
		border: 4px solid skyblue;
		position: relative;
		top: 30px;
		left: 20px;
	}

	.child {
		width: 120px;
		height: 80px;
		border: 4px solid hotpink;
		background-color: yellowgreen;
		font-size: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fixed {
		/* 브라우저를 기준으로 배치된다. => 스크롤되더라도 항상 그자리에 배치된다. */
		position: fixed;
		bottom: 50px;
		right: 20px;
	}

</style>

</head>
<body>

	<div class="grand-parent">
		<div class="parent">
			<div class="child">1</div>
			<div class="child fixed">2</div>
			<div class="child">3</div>
		</div>
	</div>

</body>
</html>

요소 정렬8

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 정렬</title>

<style type="text/css">

	.section {
		height: 200px;
		border: 4px solid tomato;
	}
	
	.section > h1 {
		text-align: center;
		line-height: 2;
		font-size: 24px;
		font-weight: bold;
		position: sticky; /* 스크롤 상단에 붙어서 움직인다. */
		/* position: sticky; 속성은 top 속성과 함께 사용해야 기능이 적용된다. */
		top: 0px;
	}

	.container {
		width: 400px;
		height: 400px;
		border: 4px solid blue;
		margin-top: 50px;
		overflow: auto;
	}

</style>

</head>
<body>

	<div class="section">
		<h1>Title 1</h1>
	</div>
	<div class="section">
		<h1>Title 2</h1>
	</div>
	<div class="section">
		<h1>Title 3</h1>
	</div>
	<div class="section">
		<h1>Title 4</h1>
	</div>
	<div class="section">
		<h1>Title 5</h1>
	</div>
	<div class="section">
		<h1>Title 6</h1>
	</div>
	<div class="section">
		<h1>Title 7</h1>
	</div>
	<div class="section">
		<h1>Title 8</h1>
	</div>

	<div class="container">
		<div class="section">
			<h1>Title 1</h1>
		</div>
		<div class="section">
			<h1>Title 2</h1>
		</div>
		<div class="section">
			<h1>Title 3</h1>
		</div>
		<div class="section">
			<h1>Title 4</h1>
		</div>
		<div class="section">
			<h1>Title 5</h1>
		</div>
		<div class="section">
			<h1>Title 6</h1>
		</div>
		<div class="section">
			<h1>Title 7</h1>
		</div>
		<div class="section">
			<h1>Title 8</h1>
		</div>
	</div>

</body>
</html>

요소 정렬9

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>요소 정렬</title>

<style type="text/css">

	/*
		요소 쌓임 순서
		요소들이 쌓여있는 순서를 통해 어떤 요소가 사용자와 가깝게 있는지(더 위에 있는지)를 결정한다. => Z축
			1. static을 제외한 position 속성의 값이 있을 경우 속성값에 무관하게 가장 위에 쌓인다.
			2. position 속성이 모두 존재한다면 z-index 속성의 값이 클 수록 위에 쌓인다.
			3. position 속성이 모두 존재하고 z-index 속성의 값이 같다면 나중에 작성된 요소가 위에 쌓인다.
	*/

	.box-group {
		display: flex;
	}

	.box-group > .box {
		width: 100px;
		height: 100px;
		background-color: tomato;
		border: 4px solid red;
		border-radius: 10px;
		font-size: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 0px 10px rgba(255, 0, 0, 0.7);
		margin-right: -30px;
	}
	
	.box-group > .box:nth-child(2n) {
		margin-top: 30px;
	}

	.box-group > .box1 {
		position: relative;
	}

	.box-group > .box2 {
		position: relative;
		z-index: 2;
	}

	.box-group > .box3 {
		position: relative;
		z-index: 3;
	}

	.box-group > .box4 {
		position: relative;
		z-index: 1;
	}

	.box-group > .box5 {
		position: relative;
	}

</style>

</head>
<body>

	<div class="box-group">
		<div class="box box1">1</div>
		<div class="box box2">2</div>
		<div class="box box3">3</div>
		<div class="box box4">4</div>
		<div class="box box5">5</div>
	</div>

</body>
</html>