패딩 (adsbygoogle = window.adsbygoogle || []).push({});  (adsbygoogle = window.adsbygoogle || []).push({}); 파란색과 빨간색 div 모두 텍스트에 안쪽 여백이 없다. div의 경계와 텍스트 사이에 일정간격이 있으면 더 예쁘다. 이를 위해 '패딩'을 이용한다. 아래규칙을 divA에 적용해 보자.   padding : 10px;  이를 통해서 빨간색 사각형 안쪽에 10픽셀의 패딩이 생겨난다.                   (adsbygoogle = window.adsbygoogle || []).push({});

마진 마진은 선택적인 그리고 어떤 의미에서는 더 간단하게 구성요소의 위치를 설정하는 방법이다. 실습을 위해 divA 와 divB에서 모든 플로팅과 위치 설정규칙을 지우고 아래 코드를 divA에 추가한다. margin: 20px; 이 코드는 빨간색 div주변에 20픽셀의 여백을 만든다. 다음 그림과 같은 모습이다. 빨간박스는 위쪽, 왼쪽으로 각각 20px의 여백을 가진다. 마진은 대상을 이동시키고 원하는 만큼의 간격을 설정하는 훌륭한 방법이다. 유사한 방법으로 구성요소 내부에 여백을 설정할 때 '패딩'을 사용할 수 있다

포지션을 이용한 레이아웃 때때로 우리는 플로트로 할 수 있는 것보다 더 정밀하게 레이아웃을 짜야 할 때가 있다. 이느 포지셔닝을 이용하면 가능하다. 말하자면 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%를 차지하게 하라는 의미이다 위의 코드를 적용한 코딩의 결과값 위 코딩의 결과값입니다

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

DIV는 분할의 줄임말이다. (division) 이를 이용해 코드를 여러 부분으로 나눌 수 있다. 각 부분으로 나누어 스타일을 지정할 수 있다. div로 실제 할 수 있는 일이 별로 없을 것 같아 보이지만 실제 스타일을 적용할 때 많은 도움이 된다. 문단에 컬러를 넣는 것부터 해보자. 배경컬러 스타일 태그에서 모든 CSS코드를 삭제하고 아래 코드로 대체한다. div ( background-color: grey; ) 그리고 부분은 아래 사진처럼 수정한다. 다시 말씀드리지만 코딩을 보고 대략적인 알고리즘 즉 코딩의 의미와 흐름을 파악할 줄 알아야 합니다. html은 코딩의 가장 기초부분입니다. 익숙해질때까지 반복해서 보시고 연습해 보세요. 전체코딩모습 보기 위 코딩 결과물 보기 ※ 코딩은 반드시 직접 해보셔..