포지션을 이용한 레이아웃 때때로 우리는 플로트로 할 수 있는 것보다 더 정밀하게 레이아웃을 짜야 할 때가 있다. 이느 포지셔닝을 이용하면 가능하다. 말하자면 divB를 원래 위치를 기준으로 일정 거리로 이동시키려면 아래 CSS규칙을 추가하면 된다 position: relative; top: 50px; left: 100px; 위 코드는 divB를 아래로 50픽셀, 오른쪽으로 100픽셀 이동시킨다. 위 코드에 대한 결과값 아래로 50픽셀 오른쪽으로 100픽셀 이동시킨 그림이다 top과 left는 기준점이 된다. 그렇다면 top과 left를 음수 값(즉 -50px)으로 코딩을 수정하면 어떻게 될까? 반대쪽인 왼쪽과 위쪽으로 이동하게 된다. 즉 position; relative를 이용하면 원래 위치와 비교해서 ..

이제 CSS를 이용하여 레이아웃을 짜보자 float: right; 지금까지는 모든 구성요소가 순서대로 앞선 구성요소의 아래에 위치했지만 플로트를 이용하여 이를 바꿀 수 있다. 박스안의 css규칙을 .divA 규칙에 추가한다. 위코딩에 대한 결과값 순서대로라면 빨간 박스가 왼쪽에 먼저 나타나야 하지만 플로트를 오른쪽으로 지정하니 위치가 오른쪽으로 변했다.

크기변경하기 div의 폭과 너비를 바꾸기 위해 width와 height 를 사용한다. 페이지의 CSS코드를 아래 내용으로 바꿔라. .divA { background-color: red; width: 200px; height: 200px; } .divB { background-color: blue; width: 50%; } divA 클래스는 배경색을 빨간색, 너비는 200픽셀, 높이도 200픽셀로 출력하라는 의미이고 클래스 divB는 배경을 파란색, 너비는 페이지 너비의 50%를 차지하게 하라는 의미이다 위의 코드를 적용한 코딩의 결과값 위 코딩의 결과값입니다