🍁 태그의 수평 정렬
인라인 태그 vs 블럭 태그의 정렬을 비교해 보도록 하자.
[HTML] 인라인 태그와 블럭 태그
📌인라인 태그와 블럭 태그 모든 태그는 인라인 태그와 블럭 태그 두 분류 중 하나에 속한다! 예로 들어 문단 태그와 제목 태그는 블럭 태그이며, 링크 태그와 이미지 태그는 인라인 태그이다.
isaac-christian.tistory.com
인라인 태그와 블럭 태그에 대해서는 위 글을 참고한다.
<!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>
body {
margin: 0;
}
#span1, #div1 {
background-color: gold;
}
</style>
</head>
<body>
<h1>태그의 수평 정렬</h1>
<h2>인라인 태그</h2>
<span id="span1">인라인 태그</span>
<h2>블럭 태그</h2>
<div id="div1">블럭 태그</div>
</body>
</html>
위 코드를 이용하여 정렬을 구현해 보도록 하자.
1. 내용물의 정렬
내용물의 정렬은 text-align으로 구현한다.
text-align은 블럭 태그에만 사용한다.
인라인 태그
#span1{
text-align: center;
}
인라인 태그에 text-align: center 속성을 주었다.
수평 정렬은 전체 영역 중에서 왼쪽, 가운데, 오른쪽으로 와야 하는데 인라인 태그는 좌우의 여백이 없기 때문에 움직일 곳이 없다.
블럭 태그
#div1{
text-align: center;
}
반면에 블럭 태그는 움직일 수 있는 좌우의 여백이 있기 때문에 정렬이 된다.
때문에 text-align 속성은 블럭 태그 전용인 것이다.
2. 태그 자체의 위치를 정렬
태그 자체의 위치의 정렬을 하는 정식 속성은 없다.
만약에 태그 자체위 위치를 정렬해야 한다면 position과 같은 속성을 사용해야 한다.
인라인 태그
<div style="text-align: center;">
<span id="span1">인라인 태그</span>
</div>
인라인 태그의 위치를 정렬할 때에는 text-align 속성을 사용한다.
이때 스스로는 안 되고, 블럭 태그로 묶어서 부모의 블럭 태그의 도움을 받아야 한다.
블럭 태그
블럭 태그의 좌우 공간이 없기 때문에 블럭 태그의 위치를 정렬하는 건 불가능하다.
아까처럼 인라인 태그에서 했던 것 처럼 블럭 태그에 크기를 지정해서 부모 태그로 묶어서 정렬해 보도록 하자.
<div style="text-align: center;">
<div id="div1">블럭 태그</div>
</div>#div1 {
text-align: center;
width: 150px;
}
하지만 눈도 깜짝 않는다.
이러한 방식은 인라인 태그에만 적용되는 방식이다.
대신에 margin을 사용하여 구현할 수 있다.
margin으로 중앙 정렬
<div id="div1">블럭 태그</div>#div1 {
text-align: center;
width: 150px;
margin-left: calc(50% - 75px);
}
그러나 이 방법은 블럭 태그의 길이를 알아내어 calc로 적용해줘야 한다는 단점이 있다.
이보다 쉽게 정렬하는 방법은 auto를 사용하는 것이다.
margin auto로 중앙 정렬
#div1 {
text-align: center;
width: 150px;
margin-left: auto;
margin-right: auto;
/* margin: 0 auto; */
}
margin의 left와 right를 모두 auto로 지정을 하면 1/2씩 나누기 때문에 중앙 정렬이 된다.
margin auto로 우측 정렬
#div1 {
text-align: center;
width: 150px;
margin-left: auto;
}
우측 정렬을 할 때에는 margin-left를 auto로 지정하면 된다.
