본문 바로가기
Programing/CSS

CSS box-model

by 은성 2017. 7. 25.

CSS box-model



https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/


여기를 보면

css테그의 사용 빈도가 박스 모델과 관련된 테그 사용빈도가 엄청 높다는 것을 알 수 있다.


어떤 컨텐츠가 있다. 그것을 박스라고 한다, 그 박스에 대한 것이 박스 모델인데 용어는 중요하지 않음


박스 모델중 중요한 것은

border : 테두리 값, 

margin : 다른 박스 사이의 거리

padding : 테두리와 컨텐츠(글자, 그림 등등) 사이의 거리

width : 박스의 가로 크기

hight : 박스의 세로크기

구글에 css box model이라고 검색을 하면 많은 참고 이미지가 나온다.


하지만 인라인 요소에서는 블럭 요소와 달리width 와 hight 가 적용이 안된다는 것이 차이점이 있다.

ㅋㅋㅋㅋㅋ 업계에서 사람들이 안주가 조금 나오면 왜이렇게 페딩이 많냐고 한다는데ㅋㅋㅋ 

접시와 접시 사이의 간격이 넓게 벌어져 있으면 margin이 넓다고 하고


어디서 이런 소리 하고 다니면 너드라고 한다. 




'Programing > CSS' 카테고리의 다른 글

Position  (0) 2017.07.26
마진 겹침 현상  (0) 2017.07.25
box-sizing  (0) 2017.07.25
inline / block level  (0) 2017.07.25
CSS Diner 정답공유와 정리  (0) 2017.07.24

댓글