정렬시키기
display:inline-block
❗ display:inline-block으로 작성 시 text처럼 취급된다.
자동적으로 생긴 margin을 제거하기 위하여,
1) display 이상의 요소에 font-size:0을 지정하여 margin을 제거하고
이하의 요소에 font-size:?px;을 지정하여 위로 인해 삭제된 font 크기를 살려준다.
2) 혹은 margin을 음수로 지정하여 자동적으로 생성된 margin을 제거한다.
그런 다음,
정렬할 요소들의 width가 현재 max-width 이내에 다 들어올 수 있도록 지정한다.
ex) width: 100%;
max-width:1200px;
일때 정렬할 요소 div가 3개라면
div의 width는 (3/1200=) 400px 이하 혹은 (3/100=)33% 이하
추가로, 요소에 padding을 추가함으로써 지정해놓은 width를 벗어나는 것을 막기 위해 style에 box-sizing: border-box;을 지정해놓는다.
float
좌 혹은 우로 붙이고 싶은 요소에게 float: left 또는 float: right 속성을 부여한다.
<div id="wrap">
<div>box1</div>
</div> #wrap div{
float: left;
}❗ float으로 작성시 wrap(부모요소)의 height가 0으로 지정된다.
때문에, float를 부여한 요소의 부모요소의 class에
<div id="wrap" class="clear">
<div>box1</div>
</div>
<style>
.clear::after{
display: block;
content: "";
clear: both;
}
</style>와 같이 css에 clear:both;등을 지정하여 타 블럭이 겹쳐지지 않도록 방지하여 준다.
margin 0 auto;
width가 지정된 건에 대하여,
css로 margin:0 auto;를 지정
하면 상하의 margin을 0으로, 좌우의 margin을 자동으로 좌우 센터에 맞추어준다.
margin
width: 400px;
height: 300px;
background: orange;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -150px;width 값의 1/2 값을 margin-left에 음수로,
height 값의 1/2 값을 margin-top에 음수로 지정하면 상하좌우 센터에 맞추어준다.
transform: translate(-50%,-50%)
css에,
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);를 지정하면 화면상의 중앙에 정렬시켜준다.
브라우저 크기 및 높이가 바뀌어도 변하지 않는다. (vw 혹은 vh로 width height를 지정했을때)
sumin0gig