웹프로그래밍 css (16) 너비 높이 지정 총 정리

🔥오늘의 목표🔥

css박스요소에는 content,padding,bordding,margin으로 나뉘는데 
크기를 설정할 수 있는 건, content,padding,margin이다. 
공부를 하다보니 너무 헷갈려서 추가 정리를 해야겠다고 생각했다.

📕 요소의 구성

- content
- padding
- bordding
- margin

📖 content의 너비 width

📒 auto : 기본 값으로 적용된다. 브라우저가 자동으로 계산해서 적용한다.
📒 length : 절댓값으로 px,em등의 값을 가질 수 있다
📒 percentage : 컨테이닝 블록너비의 백분율이다.

📖 content의 높이 height

📒 auto : 기본설정값이며, 브라우저가 자동으로 계신해서 적용한다.
📒 lenght : 절댓값으로 단위를 사용해 지정한다. (px,em)
📒 % : 컨테이닝 요소의 높이를 기준으로 백분율로 지정된다.
🔸부모요소의 height값이 명시적으로 지정되어있어여한다.

📖 padding의 높이, 너비 지정 방법

📒 padding:length : 위쪽 오른쪽 아래쪽 왼쪽을 단위를 이용해 지정할 수 있다.
📒 percent (%) : 컨테이닝 요소(부모 요소, 조상요소)의 너비를 기준으로 백분율을 계산한다.

📖 margin의 높이, 너비

📒 margin:length : 위쪽 오른쪽 아래쪽 왼쪽을 단위를 이용해 지정할 수 있다.
📒 percent(%) : 컨테이닝 요소(부모 요소, 조상요소)의 너비를 기준으로 백분율을 계산한다.
📒 auto : 정렬

📕 %값

📖 content의 width, height는 각각 컨테이닝 요소의 백분율
📖 padding,margin는 무조건 컨테이닝 요소의 width요소의 백분율을 기준으로 한다.

🔥오늘의 배움🔥

정리하고 나니까 후련하다. 근데 동생 과 상담해주러 가야겠음.