퍼블리싱을 진행하다 보면 콘텐츠를 가운데 정렬 해야 될 일이 많다.
가운데 정렬 하는 방법에 대해 알아보자
목차
1. text-align 가운데 정렬
2. block요소 가운데 정렬
3. absolute로 가운데 정렬
text-align을 이용한 가운데 정렬
첫번째 방법은 css에 text-align을 이용하는 방법이다. 주로 텍스트를 가운데 정렬할 때 많이 사용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.text-align{text-align: center;}
</style>
</head>
<body>
<div class="text-align">
텍스트 가운데 정렬
</div>
<div class="text-align">
<p>텍스트 가운데 정렬</p>
</div>
<div class="text-align">
<span>텍스트 가운데 정렬</span>
</div>
</body>
</html>텍스트 가운데 정렬
위 예시 코드처럼 div 태그 안에 텍스트를 입력하고 CSS에 text-align:center를 주면 가운데 정렬이 된다. 기본 값은 왼쪽 정렬이다.
위 코드에서 주의해야 될 부분이 있다. 바로 태그에 display 속성이 block인지 inline 인지 확인해야 된다.
display 속성이란?
display 속성은 CSS에서 요소를 어떻게 표시할지를 결정하는 데 사용된다. 주로 'block', 'inline', 'inline-block'등이 있다.
1. 'block'요소는 전체 너비를 차지하는 요소이다. 예시로는 div태그 p태그 h1태그 등이 있다.
2. 'inline'요소는 콘텐츠 크기만큼만 차지하는 요소이다. 예시로는 span태그 a 태그 등이 있다.
3.'inline-block'요소는 inline 요소처럼 콘텐츠 크기만큼 차지하면서 block요소처럼 너비와 높이를 조정할 수 있다.
많이 하는 실수들 중 inline요소에 text-align: center를 주는 경우가 있지만 아무리해도 안먹는다. 해결 방법은 display속성을 block으로 바꿔주는 방법과 부모태그속성이 block 일경우 부모태그에 text-align: center 를 주면 된다.
block요소 가운데 정렬(너비 값이 지정되어 있을 경우)
너비(width) 값이 지정되어있을 경우 가운데 정렬 하기 위해선 margin 값을 이용하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.block{width: 150px; margin:0 auto;}
</style>
</head>
<body>
<div class="block">
텍스트 가운데 정렬
</div>
<div class="block">
<p>텍스트 가운데 정렬</p>
</div>
<div class="block">
<span>텍스트 가운데 정렬</span>
</div>
</body>
</html>텍스트 가운데 정렬
위 예시 값을 보면 block이라는 class속성을 가지고 있는 태그들에 width값을 150px 씩 값을 줬다. 너비 값을 준상태에서 text-align:center 값을 주면 콘텐츠의 너비 즉 150px에 가운데로 정렬이 된다. 우리가 움직이려고 하는 건 전체 너비에서 가운데 정렬이기 때문에 margin을 이용해 줘야 된다.
예시 결과 화면을 보면 주황색으로 표기되어 있는 부분이 margin이다. margin: 0 auto;라고 값을 주는 이유는 상하에 값은 없지만 좌우에 여백을 margin으로 채워달라는 뜻이다.
margin의 속성
1. margin: 10px; (상, 하, 좌, 우 모두 10px)
2. margin : 10px 20px; (상하는 10px, 좌우는 20px)
3. margin : 10px 20px 30px; (상에는 10px, 좌우는 20px, 하에는 30px)
4. margin : 10px 20px 30px 40px (상에는 10px, 우에는 20px, 하에는 30px, 좌에는 40px)
시계방향으로 상 우 하 좌 순서이다. padding의 속성도 같다.
margin으로 가운데 정렬할 땐 너비 값을 지정했는지 확인하고 사용하는 게 좋다.
absolute 가운데 정렬
absolute를 사용하기 위해선 position 속성에 relative속성이 부모요소에 있으면 그 기준으로 위치를 결정할 수 있다. 꼭 relative속성을 부모 위치에 안 줘도 되긴 하지만 기준을 잡아야 되는 부분이라면 꼭 써줘야 된다. relative속성이 없을 경우엔 문서를 기준으로 위치가 정해진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.relative{position: relative;}
.absolute{position: absolute; left: 50%; transform: translateX(-50%);}
</style>
</head>
<body>
<div class="relative">
<div class="absolute">가운데 정렬</div>
</div>
</body>
</html>
위 예시 코드처럼 부모요소에 relative 속성을 줘서 가운데로 정렬할 기준을 잡아주고 자식요소에 absolute를 줘서 왼쪽에서 50% 이동시킨다. 이동시킨다고 해도 콘텐츠의 크기가 각각 다르기 때문에 정확하게 가운데로 보이지 않는다. 그러기에 transform: translateX(-50%)를 줘서 가운데로 정렬시킨다. 'transform: translateX(-50%)'을 주는 이유는 요소자체를 왼쪽으로 50% 이동하여 정확한 가운데 정렬을 하기 위해 사용된다.
가로 정렬까지 필요할 때는 아래와 같이 코드를 사용하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.relative{position: relative; height: 100vh;}
.absolute{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
</style>
</head>
<body>
<div class="relative">
<div class="absolute">가운데 정렬</div>
</div>
</body>
</html>'Style Sheet > CSS' 카테고리의 다른 글
| CSS 모델 박스 이해하기 (content, padding, border, margin) (0) | 2024.04.22 |
|---|---|
| CSS를 적용 하는 방법과 우선 순위 (0) | 2024.04.17 |
