top 요소의 위쪽 속성을 설정 top은 위에서 얼마의 공간을 두고 배치 할지 설정합니다. left, right, bottom 값 설정 방법과 동일합니다.

text-align 텍스트 정렬 방식을 설정 left : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 inherit : 상위 요소에 상속 받는다.

right 요소의 오른쪽 속성을 설정 right 값은 px, %로 표현합니다. 오른쪽에서 얼마의 공간을 두고 배치 할지를 정합니다.

position 요소의 위치를 설정 static : 기본값. top, right, bottom, left로 값을 지정 할 수 없습니다. absolute : 절대적 위치 값. top, right, bottom, left로 위치 값을 지정합니다. relative : 상대적 위치 및 기준점으로 설정. top, right, bottom, left로 위치 값을 지정합니다. fixed : 위치를 고정. 스크롤해도 움직이지 않는다. top, right, bottom, left로 위치 값을 지정합니다. * 예시 이미지로는 설명을 다 할 수 없는 부분이 있습니다. 많이 연습해보세요.

padding 요소의 안쪽 여백을 설정 ▲ 녹색 영역이 padding 입니다. 값은 em, px, % 를 쓸 수 있고 음수 값을 가질 수 있습니다. padding은 padding-top, padding-right, padding-bottom, padding-left 모든 값을 가지고 있습니다. padding: 10px; /* 상-우-하-좌 */ padding: 10px 20px; /* 상하-좌우 */ padding: 10px 20px 30px; /* 상-좌우-하 */ padding도 margin 거의 99% 동일하게 속성을 설정합니다.

outline 요소의 아웃라인의 색, 스타일, 굵기를 정의 outline-color : 색outline-style : 라인 종류outline-width : 굵기outline 태그에는 위 3가지 속성이 있습니다. 그러나 각각 태그를 쓸 필요 없이 다음 처럼 사용하면 됩니다. outline: 8px inset #ccc; >> outline : 라인굵기 라인종류 색; outline 태그는 border와 쓰는 방법이 같음을 알 수 있습니다.

margin 요소의 바같쪽 여백을 설정 margin은 margin-top, margin-right, margin-bottom, margin-left 모든 값을 가지고 있습니다. {margin: 50px;} 상-우-하-좌 {margin: 50px 60px;} 상하-좌우 {margin: 50px 60px 30px;} 상-좌우-하 {margin: 0 auto;} 상하-중앙정렬 위 값의 순서는 기억하기 어려우니 그냥 {margin: 0 0 0 0;} 상우하좌 하나만 기억하면 됩니다. 값은 px, %, auto를 쓸 수 있습니다. ▲ 마진 값을 가진 박스의 상하 마진 값은 겹칩니다. 상하 마진 값이 큰쪽으로겹치게 됩니다. 마진은 음수, 양수 값을 가질 수 있고 합산한 마진 값을 적용합니다. ▲ float으로 정렬..

line-height 문장과 문장 사이의 간격을 설정 문장 사이의 간격 값은 숫자; px; %;를 사용합니다.

left 요소의 왼쪽 속성을 설정 브라우저의 왼쪽에서 얼마만큼의 공간을 두고 요소를 표시 할지 정합니다.값은 px; 또는 %;로 정합니다. 참고로 position : absolute;는 요소의 절대적 값입니다.position : absolute;는 부모 div에 설정 할 수 있습니다.

height 콘텐츠 요소의 세로값을 설정 높이는 px; 또는 %; 로 설정합니다.