공간분할태그

DIV = 공간분할태그 = 레이아웃을 나타내기위한 공간분할 표현

<div> box </div> <- 박스 생성

 

box-size에 영향을 주는 스타일

width : 넓이,가로폭 / px, %, auto -> 사용가능 수평공간 꽉차게 / 추가되는 요소를 함께 가져가며 폭값을 유지하기 위해 노력 -> %와 다름

height: 높이, 세로폭

padding = 안쪽여백 / 한자리면 전체면 적용/두자리 - 상하, 좌우/ 네자리(시계방향 top->right)

                 padding-top처럼 한쪽면만 줄 수있음 위의 내용들은 margin도 동일

margin = 바깥여백  / 숫자값 auto => 박스,blcok요소의 중심배치 / 50px auto -> 중심에 배치되고 상하좌우 50px만큼 margin값 적용 (width값 100퍼면 중앙못감)

border : 선의굵기  선의스타일  선의색상(테두리) - border:5px solid #000; / 얘도 개별적용됨

border-width = 선 굵기 전체적용

border-color = 선 색상 전체적용

border-style:solid = 선 스타일 전체적용

border-radius = 모서리를 둥글게 표현 / px, % 1자리~4개 모서리 전체, 2자리 왼쪽 상단시작 대각선 x자 대칭, 4자리 시계방향 왼쪽상단시작