이번에는 문서의 배치를 바꾸는 방법을 알아볼것이다. 간단하게는 padding이나 margine을 통해 할 수 있고, 더나아가자면 float을 활용할 수 있다.
1. padding과 margin
사실 padding은 배치를 바꾸는 용도는 아니고, 다양한 의미로 사용될 수 있겠지만 단순하게 구역의 여유공간을 갖고있는 것이다. margin과 비교하면 약간 헷갈리는 개념이지만, padding 데이터 자체가 포함하는 메모리에 해당한다면, margin은 콘텐츠간 여유거리라고 할 수 있겠다.
그러므로 border를 활용해 시각적으로 표시해보면 padding구역만큼 테두리가 형성되고 margin 부분만큼 다른 구역과 간격이 생기는 것을 확인할 수 있다.
앞서 이야기한것처럼 이는 배치를 바꾸거나 위치를 지정하는 용도는 아니지만, 방법에 따라 이를 배치와 관련하여서 활용할 수도 있다.
2. float
위의 방법은 나와 다른 콘텐츠간의 여유공간을 통해 어느정도의 배치가 가능할지 몰라도, 드라마틱하게 상하좌우의 특별한 이동이 불가능하다. 그래서 활용할 수 있는 리얼배치툴인 float이다.
기본적으로 구역은 아래로 정렬된다.
그러므로 원하는 구역을 아래와같이 정렬할 수 있다.
- float: right; : 원하는 구역을 오른쪽으로 정렬
- float: left; : 원하는 구역을 왼쪽으로 정렬
- clear: both; : 그 어떤것에도 영향을 받고 싶지 않은 경우 > 자동 정렬되지 않고, 자기위치를 지킴
모두 오른쪽으로 정렬한 코드와 그 결과이다.
.box1{
margin-right: 10px;
background: red;
float: right;
}
.box2{
margin-right: 10px;
background: navy;
color: aliceblue;
float: right;
}
.box3{
margin-right: 10px;
background: green;
width: 80px;
float: right;
}
.box4{
margin-right: 10px;
background: orange;
float: right;
} 
3. position
position은 위치의 기능을 넣는것이라고 할 수 있다.
기본적으로 배치도 하지만, scroll에 움직이지 않는거나, 따라온다거나 등의 말이다.
position의 종류
-absolute : 페이지에 고정되어있어 scroll에 사라짐
-relative : 일반적인 포지션으로 해당 페이지에만 머뭄
-fixed : 화면 자체에 고정되어있어 scroll에 따라옴
4. z-index
z-index는 층계를 정해준다. 각 구역별 style에 z-index를 지정해주면, 숫자가 낮을수록 가장 아래층계에 속하게 된다.
다음 그림은 각각 z-index가 다음과 같이 설정된 것이다.
- one > z-index :1
- two > z-index :2
- three > z-index :3
- four > z-index :4
알아두기
5. 기타 효과
1) : box_shadow
구역에 그림자를 넣는 기능이다.
: box_shadow (offset-x | offset-y | blur-radius | color)
x와 y의 방위값과 퍼짐정도(px), 그림자 색깔
2) :nth-child(n)
div.box:nth-child(1) 와 같은 코드를 마주하게 된다면 div태그 내에 box클래스가 여러개 있다는 말이다.
그중에서 (n)번째 태그를 가져오는 것으로 보다 편리하게 이용할 수 있다.
3) top, left, right, bottom
이 네가지는 전체 화면에서 위, 양옆, 아래가 얼마나 떨어질것인지 설정하는 것으로 margin과는 다르다.
