요소를 화면 가운데 정렬하는 예제를 6개 제공하겠습니다. 각 예제는 주석과 함께 설명되며, HTML과 CSS 코드로 구성되어 있습니다.
예제 1: 가로와 세로 가운데 정렬
<!DOCTYPE html>
<html>
<head>
<style>
/* 가로와 세로 가운데 정렬 */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="centered">이 요소는 화면 가운데 정렬됩니다.</div>
</body>
</html>
예제 2: 텍스트를 화면 가운데 정렬
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트를 화면 가운데 정렬 */
.centered-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="centered-text">이 텍스트는 화면 가운데 정렬됩니다.</div>
</body>
</html>
예제 3: 가로 가운데 정렬 (수평 가운데 정렬)
<!DOCTYPE html>
<html>
<head>
<style>
/* 가로 가운데 정렬 (수평 가운데 정렬) */
.centered-horizontal {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="centered-horizontal">이 요소는 수평 가운데 정렬됩니다.</div>
</body>
</html>
예제 4: 세로 가운데 정렬 (수직 가운데 정렬)
<!DOCTYPE html>
<html>
<head>
<style>
/* 세로 가운데 정렬 (수직 가운데 정렬) */
.centered-vertical {
display: flex;
align-items: center;
height: 100vh; /* 화면 높이만큼 설정 */
}
</style>
</head>
<body>
<div class="centered-vertical">이 요소는 수직 가운데 정렬됩니다.</div>
</body>
</html>
예제 5: 가운데 정렬 및 배경색 설정
<!DOCTYPE html>
<html>
<head>
<style>
/* 가운데 정렬 및 배경색 설정 */
.centered-with-bg {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #3498db;
color: #fff;
padding: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="centered-with-bg">이 요소는 가운데 정렬되고 배경색이 설정됩니다.</div>
</body>
</html>
예제 6: 텍스트와 아이콘을 화면 가운데 정렬
<!DOCTYPE html>
<html>
<head>
<style>
/* 텍스트와 아이콘을 화면 가운데 정렬 */
.centered-text-icon {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.centered-text-icon i {
font-size: 48px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="centered-text-icon">
<i class="fas fa-check-circle"></i>
<p>이 텍스트와 아이콘은 화면 가운데 정렬됩니다.</p>
</div>
</body>
</html>
이렇게 총 6개의 화면 가운데 정렬 예제를 제공했습니다. 각 예제는 요소를 다양한 방법으로 화면 가운데 정렬하는 방법을 보여줍니다.
'CSS' 카테고리의 다른 글
| 뒷 배경 이미지: 요소의 배경에 이미지 추가. (0) | 2023.12.23 |
|---|---|
| 페이드 인/아웃: 요소의 페이드 인/아웃 효과. (1) | 2023.12.23 |
| 툴팁 스타일링: 툴팁 디자인 커스터마이징. (0) | 2023.12.23 |
| 텍스트 회전: 텍스트 회전 효과 적용. (0) | 2023.12.23 |
| 미디어 쿼리: 미디어 쿼리를 사용한 반응형 디자인. (0) | 2023.12.23 |