[CSS] 박스 모델(border, border-redius, padding, margin)

* border: 테두리 설정

border-style: 테두리 스타일 지정

value: solid, dashed, dotted, double, groove, inset, outset

 

border-width: 테두리 두께 지정

value: px, %, thin, medium, thick

 

border-color: 테두리 색상 지정

value: color

 

코드 예시 1

html

css

오른쪽 코드처럼 border 속성을 한 줄에 한 번에 쓸 수도 있다.

 

 

출력

 

코드 예시 2

bottom은 다르게 설정

출력

 

코드 예시 3

bottom은 다르게 설정

출력

상하좌우 속성을 따로 지정할 수 있다.

 

* border-radius: 엘리먼트 코너 둥글게 하기 

html

css

출력

 

* padding, margin

패딩, 마진

크기 값을 2개 사용하는 경우: 상하, 좌우

ex) margin 30px, 50px;

 

크기의 값을 4가지 사용할 경우: 상, 우, 하, 좌

ex) margin: 10px, 20px, 30px, 40px;

 

코드 예시

html

css

출력