이번에 처음으로 웹프로그래밍 프로젝트 진행하면서, 고충을 겪게 되었던 의외의 부분이 가운데 정렬입니다. 이는 가운데 정렬 방법을 하나 배웠다고 할 때, 어떤 요소에는 적용되고 어떤 요소에는 적용되지 않는 경우가 빈번했기 때문입니다. 앞선 이유로 프로젝트 당시에는 모든 방법을 다 적용해 보면서 문제를 해결했습니다.
이후 프로젝트 내용을 복습하면서 고충의 이유를 알게 되었는데, 바로 ‘요소에 대한 이해 부족’이었습니다. 가운데 정렬은 요소의 종류에 따라 방법이 달라지기 때문입니다. 요소의 종류는 다음과 같이 2가지로 나뉩니다.
요소 종류
1. 블록 요소,
ex) <h1> ~ <h6>, <div>
2. 인라인 요소 / 인라인 블록 요소
ex) <button>, <img>, <iframe>
각 요소에 해당하는 가운데 정렬 방법은 다음과 같습니다.
가운데 정렬 - 블록 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>[HTML, CSS] 가운데 정렬_1</title>
<style>
#test1_1 {
text-align: center;
}
#test1_2 {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div id = "test1_1">
<button>뿡뿡</button>
</div>
<div id = "test1_2">
<button>뿡뿡</button>
</div>
<!-- 블록 요소 -->
<!-- ex) <h1> ~ <h6>, <div> -->
</body>
</html>
가운데 정렬 - 인라인 / 인라인 블록 요소
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>[HTML, CSS] 가운데 정렬_2</title>
<style>
#test2 {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<button id = "test2">뿡뿡</button>
<!-- 인라인 / 인라인 블록 요소 -->
<!-- ex) <button>, <img>, <iframe> -->
</body>
</html>