블록 레벨 요소, 인라인 요소

블록 레벨 요소

div, h1, p

사용 가능 최대 너비를 사용

크기를 지정할 수 있다.

기본 width:100%; height:0;으로 시작.

(안에 값이 있다면 height가 0이어도 0을 기준으로 출발 하는거지 무조건 0이 고정되는 것이 아니다.)

+ width:auto; height:auto; 로 하면 위와 마찬가지로 가로는 최대로 꽉차고 높이는 필요한만큼만 늘어난다.

block요소에 스타일 아무것도 설정안하면 auto, auto가 들어간다.

근데 auto, auto가 위와 같이 작동하는거다.

(인라인 요소도 auto, auto가 들어가는 것은 동일하다!)

수직으로 쌓임

margin.padding 위아래 양옆 다 사용가능

 

인라인 요소

span img

필요한 만큼 너비만 사용 (background색을 넣고 높이 가로 크기를 다 주어져도 텍스트를 써보면 텍스트만큼만 값이 들어간다.)

크기를 지정할 수 없다 : width나 height넣어도 지정못한다.

기본 width:0; height:0으로 시작

수평으로 쌓임

가로로 인라인 요소들을 다 붙이면 띄어쓰기가 안들어가고 줄바꿈을 하게 되면 띄어쓰기가 사이에 자동으로 들어간다.

margin.padding 위 아래는 사용할 수 없다. 좌우는 된다는 것을 기억하자!

중요한건. padding으로 background색을 상하에 넣었을 때 표시는 될 수 있다. 근데 실질적으로 공간을 차지하고 있지 않기 때문에 이렇게 사용하지 않는다.