[css] step17. quiz (가운데 정렬)

step17. 01~03. quiz (가운데 정렬하는 전통적인 세 가지 방법)

다음의 세 가지가 가운데 정렬하는 전통적인 세 가지 방법이다.

	<style>
		.wrapper{
			width: 500px;
			height: 500px;
			background-color: yellow;
			position: relative;
		}
		.content{
			width: 50px;
			height: 50px;
			background-color: blue;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -25px;
			margin-left: -25px; 
		}
		/* css 를 이용해서 .content div 를 상하좌우 정가운데에 위치 시켜 보세요. */
	</style>
</head>
<body>
<h1>가운데 정렬 예제</h1>
<div class="wrapper">
	<div class="content"></div>
</div>	
</body>

바깥 box를 기준으로 안쪽 box의 position을 absolute로 한 다음 부모 요소의 절반의 크기인 50%로 top과 left를 이동시키고, 객체의 좌상단이 기준이기 때문에 안쪽 box의 절반만큼 역행시켜준다.

	<style>
		.wrapper{
			width: 500px;
			height: 500px;
			background-color: yellow;
			position: relative;
		}
		.content{
			width: 100px;
			height: 100px;
			background-color: blue;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0; 
			margin: auto;
		}
		/* css 를 이용해서 .content div 를 상하좌우 정가운데에 위치 시켜 보세요. */
	</style>
</head>
<body>
<h1>가운데 정렬 예제</h1>
<div class="wrapper">
	<div class="content"></div>
</div>	
</body>

top, bottom, left, right를 0으로 만들고, margin을 auto로 해서 가운데 정렬을 한다.

	<!-- CSS only -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
	<style>
		.wrapper{
			width: 500px;
			height: 500px;
			background-color: yellow;
			/* 인라인 요소의 좌우 가운데 정렬 */
			text-align: center;
			/* table-cell 에는 vertical-align 을 지정할수 있다. */
			display: table-cell;
			vertical-align: middle;
		}
		.content{
			width: 50px;
			height: 50px;
			background-color: blue;
			display: inline-block;
		}
		/* css 를 이용해서 .content div 를 상하좌우 정가운데에 위치 시켜 보세요. */
	</style>
</head>
<body>
<h1>가운데 정렬 예제</h1>
<div class="wrapper">
	<div class="content"></div>
</div>
<button class="btn btn-primary">버튼</button>
<button class="btn btn-secondary">버튼</button>
<button class="btn btn-success">버튼</button>
<button class="btn btn-warning">버튼</button>
<button class="btn btn-danger">버튼</button>
<button class="btn btn-info">버튼</button>
<button class="btn btn-light">버튼</button>
<button class="btn btn-dark">버튼</button>
</body>

content를 inline-block으로 display해서 text-align으로 가로 정렬을 하고, 부모 요소를 table-cell 옵션으로 설정하면 vertical-align을 설정할 수 있다.
getbootstrap.com의 티져. https://getbootstrap.com/

Bootstrap

The most popular HTML, CSS, and JS library in the world.

getbootstrap.com

이렇게 css의 기초가 끝났다. 하지만 이것은 기반일 뿐이다. 앞으로 살을 더 붙여줄 것이다.

'뒷북 정리 (국비 교육) > css' 카테고리의 다른 글

[css] step16. unit (0)	2021.12.14
[css] step15. box-sizing (0)	2021.12.14
[css] step14. etc (0)	2021.12.14
[css] step13. css weight (0)	2021.12.14
[css] step12. text (0)	2021.12.14