c14. CSS 수평 정렬

CSS 수평 정렬

플로우트 속성 (float property) 을 사용하여 태그를 정렬시킬 수 있습니다.

플로우트로 태그를 정렬할 때에 body 태그에 마진과 패딩을 0으로 설정하고 시작하면, 브라우저 별로 위치가 동일하게 보일 것입니다.

---

부모 div 태그 영역

position: absolute; 를 사용하는 경우, 일반적인 배치 흐름에서 벗어나서, 부모 태그 위로 오우버랩 (overlap, 겹치기) 할 수 있습니다.

float 를 사용하여, 부모 태그를 기준으로 왼쪽, 오른쪽으로 배치할 수 있습니다.

position: absolute; 를 사용하는 경우, 일반적인 배치 흐름에서 벗어나서, 다른 태그들 위로 오우버랩 (overlap, 겹치기) 됩니다.

그리고 먼저 body 태그의 margin 과 padding 을 0 으로 해 주고 시작하면, 브라우저 종류에 따라 임의로 부여된 마진을 무효화 시킨 상태에서 시작하게 됩니다.

<style>
body {
margin: 0;
padding: 0;
border: 10px dotted gray;
}

.container {
border: 10px dotted pink;
}

.position_absolute {
position: absolute;
top: 30px;
right: 200px;
width: 150px;
border: 10px dotted green;
padding: 20px;
}
.float_position {
float: right;
width: 150px;
border: 10px dotted red;
padding: 20px;
}
</style>
<div class="container">
<p>부모 div 태그 영역</p>
<div class="position_absolute">
<p>position: absolute; 를 사용하는 경우, 일반적인 배치 흐름에서 벗어나서, 부모 태그 위로 오우버랩 (overlap, 겹치기) 할 수 있습니다.</p>
</div>
<div class="float_position">
<p>float 를 사용하여, 부모 태그를 기준으로 왼쪽, 오른쪽으로 배치할 수 있습니다.</p>
</div>
</div>

---

블록-레벨 태그 (block-level element, 전체 폭에 걸쳐 자신의 영역을 갖는 태그류 들로 p, div 등을 의미함) 들의 폭을 설정하면, 기본적으로 상위 컨테이너 태그의 전체폭에 걸쳐 늘어나는 것을 막을 수 있습니다.

그리고, margin: auto; 속성을 부여하면, 그 태그는 자신의 컨테이너 태그의 수평 가운데에 위치하게 됩니다.

<style>
.c {
margin: auto;
width: 70%;
border: 10px dotted pink;
padding: 10px;
}
</style>
<div class="c">
<p>먼저 정해준 폭을 갖고, 그 다음 남은 영역을 양쪽 마진이 똑같이 나누었습니다</p>
</div>

먼저 정해준 폭을 갖고, 그 다음 남은 영역을 양쪽 마진이 똑같이 나누었습니다

---

<style>

body {

margin: 0;

padding: 0;

border: 10px dotted gray;

}

.container_blue {

border: 10px dotted blue;

}

.position_absolute_green {
position: absolute;
top: 0px;
right: 0px;
width: 150px;
border: 10px dotted green;
padding: 10px;
}

.float_position_red {

float: right;

width: 150px;

border: 10px dotted red;

padding: 10px;

}

.margin_auto_pink {

margin: auto;

width: 70%;

border: 10px dotted pink;

padding: 10px;

}

</style>
<h2>머리글 영역</h2>

<div class="container_blue">

<p>부모 container - div 태그 영역</p>
<br />
<br />
<br />
<br />
<br />

<div class="position_absolute_green">

<p>position: absolute; 를 사용하는 경우, 일반적인 배치 흐름에서 벗어나서, 부모 태그 위로 오우버랩 (overlap, 겹치기) 할 수 있습니다.</p>

</div>

<div class="float_position_red">

<p>float 를 사용하여, 부모 태그를 기준으로 왼쪽, 오른쪽으로 배치할 수 있습니다.</p>

</div>

</div>
<div class="margin_auto_pink">

<p>먼저 정해준 폭을 갖고, 그 다음 남은 영역을 양쪽 마진이 똑같이 나누었습니다</p>

</div>

---

[광고] Udemy 동영상 강의로 보기