본문 바로가기

WebApp/Web CSS

css의 이해- box model

 

1. border(테두리)

html의 tag는 기본적인 성격에 따라 border가 화면전체를 쓰기도 하고 자신의 content 만큼의 크기만큼을 쓰기도 한다

ex). h1=화면 전체 크기 a=자기 자신 크기

     이때 화면전체의 테두리를 쓰는 tag               :  block level element

            자신의 content만큼의 테두리를 쓰는 tag : inline element

라고하며 display:blcok or inline 의 입력으로 그 성격을 바꿀수 있다.

 

 

 

 

 

box model

2. box model css의 의미

●padding: x px; 은 텍스트와 테두리 사이의 간격

●margin: x px;은 테두리와 그 바깥 공간과의 간격  

●width:x px;은 테두리 자체의 너비

●height:x px:은 테두리 자체의 높이

 

 

 

 

 

'WebApp > Web CSS' 카테고리의 다른 글

css의 이해- 중복의 제거  (0) 2020.07.07
css의 이해-반응형디자인  (0) 2020.07.07
css의 이해-grid  (0) 2020.07.05
css의 이해-selector  (0) 2020.07.05
css의 이해  (0) 2020.07.05