[CSS] BOX모델

1. block 요소와 inline요소

display: none;

- 요소를 렌더링하지 않도록 설정.

- 원래의 요소가 있었던 영역도 나타내지 않는다.

- 스크린 리더기도 읽어주지 않는다.

​

 

display: block;

- 가로 영역을 모두 사용한다.

- block요소 다음에 오는 요소는 무조건 줄내림이 된다.

- width, height, margin, padding속성을 지정할 수 있다.

- inline, block요소를 중첩시킬 수 있다.

- ex). <div>, <h>, <p>, <ul>, <ol>, <li>, <dl>, <form>..

  이중 h와 p는 예외적으로 내부에 inline요소만 중첩시킬 수 있다.

​

 

display: inline;

- 해당 html요소의 내용만큼만 영역을 차지한다.

- 다음에 오는 요소가 줄바꿈이 되지 않는다.

- width, height, margin 상하간격, padding 상하간격을 지정할 수 없다.

- ex). <span>. <b>, <img>, <a>, <strong>..

  a는 예외적으로 내부에 block요소를 중첩시킬 수 있다.

​

 

display: inline-block;

- 해당 html요소의 내용만큼만 영역을 차지한다.

- 다음에 오는 요소가 줄바꿈이 되지 않는다.

- width, height, margin, padding속성을 지정할 수 있다.

- ex). <button>, <select>

​

 

 

*주의점*

display속성값을 변경해도 해당 요소가 완전히 다른 요소가 되는 것은 아니다.

 

​

 

2. 박스모델

웹문서의 내용을 박스 형태로 정의하는 방법을 가리켜 BOX모델이라 한다.

 

- width​

콘첸츠 영역의 너비를 의미한다.

그러나 인터넷 익스플로러 6에서는

콘텐츠 영역+패딩+테두리+마진 영역 모두를

박스 너비로 취급하기 때문에 주의해야한다.

 

- padding

박스와 콘텐츠 사이의 영역

 

- border

박스의 테두리

 

- margin

여러 박스 모델 사이의 여백

 

 

 

 

 

출처

- https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1

- https://www.daleseo.com/css-display-inline-block/

- http://tcpschool.com/css/css_position_display

- 고경희, 탄탄한 웹기본기를 위한 교과서, 이지스퍼블리싱, 2020, 294-299쪽.