HTML & CSS

border: <두께> <스타일> <색상>;

border: 2px solid red;

margin: <top> <right> <bottom> <left>;

padding: <top> <right> <bottom> <left>;

margin: 10px; 모든 방향에 10px

margin: 10px 20px; 위아래 10px, 좌우 20px

margin: 10px 20px 30px; 위 10px, 좌우 20px, 아래 30px

margin: 10px 20px 30px 40px; 위, 오른쪽, 아래, 왼쪽 순서 (시계 방향

margin 개별속성

margin-top

margin-right

margin-bottom

margin-left

padding: <top> <right> <bottom> <left>;

padding 개별속성

padding-top: 10px;

padding-right: 15px;

padding-bottom: 10px;

padding-left: 15px;

box-sizing: content-box | border-box;

box-sizing: content-box; /* 요소의 width와 height는 콘텐츠(content) 영역만을 의미합니다.(기본속성) */

box-sizing: border-box; /* width와 height는 전체 박스 크기(= content + padding + border) 를 의미합니다.*/

(예시)

div {

width: 200px;

padding: 20px;

border: 10px solid black;

box-sizing: content-box;

}

실제 너비는 200 + 20*2 + 10*2 = 260px

다음 예제를 살펴본다.

Color Names Supported by All Browsers

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: yellow;

border: 1px solid green;

padding: 15px;

margin: 30px;

}

p {

background-color: grey;

height: 200px;

width: 400px;

border: 10px solid red;

padding: 25px;

margin: 45x;

}

</style>

</head>

<body>

<p> HTML5를 사용하기 위해서는 Edge, FireFox, 크롬등을 사용한다.</p>

<p> 수업에서는 크롬을 사용한다.</p>

</body>

</html>

2. HTML div

HTML div 태그는 Grouping을 하는 태그로 여러개의 태그를 묶어주는 역활을 한다.

다음과 같이 style에 추가하고 HTML을 아래와 같이 div로 묶어 본다.

div {

background-color: blue;

height: 820px;

padding: 10px;

border: 5px solid hotpink;

margin: 0;

}

</style>

</head>

<body>

<div>

<p> HTML5를 사용하기 위해서는 Edge, FireFox, 크롬등을 사용한다.</p>

<p> 수업에서는 크롬을 사용한다.</p>

</div>

</body>

width와 height는 content area만을 의미한다. 실제 div의높이는 얼마일까?

820+

+10 padding x 2 (위 아래)

+ 5 boarder x 2 (위 아래)

+0 margin x 2 (위 아래)

= 850px이다.

3. Outline (css property)

Outline은 element's border 외부에 그려지는 선이다. Outline은 돋보이게 하는 옵션이다.

Outline은 element의 크기에 포함되지는 않는다. 그러므로 다른 엘레먼트와 중첩될 수 있다.

div에 다음과 같이 추가한다.

div {
   background-color: blue;
   height: 820px;
   padding: 10px;
   border: 5px solid hotpink;
   margin: 0;
   outline-width: 14px;
   outline-style: outset;
   outline-color: #ffffff;
}