이제 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%를 차지하게 하라는 의미이다 위의 코드를 적용한 코딩의 결과값 위 코딩의 결과값입니다

컬러코드 지금까지는 컬러를 지정할때 이름을 사용했다. 하지만 실제로 적용할 때는 보다 세부적으로 색을 골라야 할 경우가 있다. 이제 컬러 코드를 사용해 보자. 컬러에 대한 HTML엔티티(특수문자나 기호의 고유코드를 모아 놓은 것)와 같다. 각 코드는 특정색을 나타낸다. 아래 규칙을 시험해 보자. .divA { background-color: #765481; } .divB ( background-color: #F7E1A2; } 해시기호 #은 브라우저에게 색을 지정하기 위해 숫자를 사용한다고 알려준다. 이후 원하는 색을 지정하기 위한 알파벳과 숫자로 이루어진 6자리 코드가 이어진다. 이 경우에는 자주색과 오렌지색이다. 모든 코드를 암기할 필요는 없다. http://html-color-codes.info/같은..