Block-level Elements

 

 

https://www.w3resource.com/html/HTML-block-level-and-inline-elements.php

 

div는 Block Elements span은 Inline Elements

 

 

Width & Height

 

percentage로 하면 화면에 따라 사이즈가 변경됨.

 

 

Rounded Corners

 

https://caniuse.com/  에 CSS를 넣으면 브라우저별 지원여부가 나옴.

 

border-radius:

 

border-radius: top-left top-right bottom-right bottom-left;

 

 

Backgrounds

 

background-color:

background-image:  디폴트는 repeat

background-repeat: no-repeat;   round

background-position: center; top center  bottom right etc.

  또한 20% 60% 식으로  20px 10px    첫번재는 왼쪽에서 얼마,  두번째는 top에서 얼마 떨어지게..

background-size:  

 

 

Background shorthand

 

background: url() no-repeat top center;

이미지, 반복, 위치

background-color, background-size 만 별도로