안녕하세요. 행운공장입니다. 이번 카테고리에 코딩으로 포스팅을 하는 것이 진짜 오래갓만 이네요.
오늘 다룰 것은, 코딩을 하다보면, 흔히 겪게 되는 div를 가운데로 정렬해야 되는 상황에 대한 내용입니다. 여기에 더해서, div 안에 들어가 있는 text를 가로와 세로에서 가운데로 정렬하는 것도 하려고 합니다. 그리고, position:absolute를 활용한 방법도 다루도록 하겠습니다.
모바일에서 웹을 실행하는 것이 본격적으로 시작되기 전에는, table코딩이 주로 쓰였는데, table에서의 가로 부분과 세로에서 가운데로 정렬하는 것은 비교적 간단하고 쉬웠습니다. 그러나, 모바일 시대의 반응형 웹에서는 본격적인 div코딩이 시작되면서, 쉽게 되었던 가운데 정렬이 약간 더 어려워졌습니다. 어렵다고 해도, 스크립트가 들어가는 정도는 아니고, css가 몇 개 더 들어간 정도이니, 생각보다 쉽습니다. 아래의 html 코드와 설명을 보시고, 직접 연습도 해보시고, 필요한 코드에 대한 궁금증이 해결되면 좋겠습니다.
1. div 가운데 정렬
div 하나를 생성하고, 배경색과 width, height를 css로 코딩해 줍니다. 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div 센타 정렬</title>
<style>
.div {
background: lightcoral;
width:250px;
height:80px;
}
</style>
</head>
<body>
<div class="div">div 가운데</div>
</body>
</html>화면에 나타나는 것은 아래의 이미지와 같이 나타납니다. div가 화면의 왼쪽에 붙어있는 것을 확인할 수 있습니다. 여기서 div를 가운데로 정렬하기 위해서는, "margin:0 auto;"를 css에 넣으면 됩니다.
(margin:0 auto;)를 css에 넣은 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div 센타 정렬</title>
<style>
.div {
background: lightcoral;
width:250px;
height:80px;
margin:0 auto;
}
</style>
</head>
<body>
<div class="div">div 가운데</div>
</body>
</html>화면에도 div가 가운데로 정렬된것을 확인할 수 있습니다.
2. div 가운데 정렬과, div안의 글씨를 가로에서 중앙 정렬, 세로에서 중앙 정렬
div 안에 있는 글씨를 가로에서도 세로에서도, 가운데로 정렬하는 코드는 아래와 같습니다. 바로 위의 1번 코드에 이어서, 추가되었습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div 센타 정렬</title>
<style>
.div {
background: lightcoral;
width:250px;
height:80px;
margin:0 auto;
}
.div0 {
background: lightgreen;
width:250px;
height:100px;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
</style>
</head>
<body>
<div class="div">div 가운데</div>
<div class="div0">div 가운데<br>+ 글씨 가운데</div>
</body>
</html>바로 위의 html 코드는 화면에 아래의 이미지와 같이 나타납니다. div 자체만 가운데 정렬하는 것은 ( margin:0 auto; )로 되지만, div안에 글씨를 가로와 세로에서 가운데로 정렬하는 것은 쉽지 않습니다. 글씨도 가로와 세로에서 가운데로 오게 하려면, ( display: flex; justify-content: center; align-items: center; text-align: center; )를 추가하면 됩니다.
3. ( position:absolute; )활용해서, div 가운데 정렬하기
div도 화면의 가로와 세로에서 가운데로 정렬하고, 그 안의 글씨도 중앙 정렬을 하는 방법은 ( position:absolute; )를 활용하는 방법입니다. ( position:absolute; )는 이 css가 주어지는 객체가, 어떤 위치에 있던지 상관없이 무조건 화면의 기준에 따라 위치가 변경되게 됩니다. html 코드는 아래와 같습니다. 1번과 2번 css 밑에 추가하였습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div 센타 정렬</title>
<style>
.div {
background: lightcoral;
width:250px;
height:80px;
margin:0 auto;
}
.div0 {
background: lightgreen;
width:250px;
height:100px;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.div3 {
background: violet;
width:200px;
height:100px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
left: 50%;
top:50%;
position:absolute;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="div">div 가운데</div>
<div class="div0">div 가운데<br>+ 글씨 가운데</div>
<div class="div3">absolute 활용</div>
</body>
</html>아래의 이미지를 보면, 3번째 div가 화면의 중앙에 있고, 그 안의 글씨가 가운데로 정렬되어 있는 것을 확인할 수 있다. css 코드로 ( position:absolute; )를 주고, 왼쪽과 상단에서 각각 50%씩 오게 하는 ( left: 50%; top:50%; )를 넣으면 된다. 거기에 ( transform: translate(-50%, -50%); )까지 css를 코딩해야지만, 화면의 정가운데에 정렬하게 된다.
* 바로 아래에는 위의 코드를 html 파일로 만든 것의 링크입니다. 클릭하면 다운로드가 됩니다.
궁금한 것이 있으신 분들은 댓글에 남겨주세요.
'코딩' 카테고리의 다른 글
| 코딩_오목 게임_PC전용_난이도는 매우 쉬움 (0) | 2023.12.26 |
|---|---|
| 메모리게임_강아지 찾기_카드게임 (0) | 2023.01.22 |
| 플래피 문어_FLAPPY OCTOPUS_심심풀이 게임 (0) | 2022.02.20 |
| 양도소득세 계산기_2022년 1월~ (1) | 2022.01.20 |
| 이름 궁합_사이트 (0) | 2022.01.12 |
