border, margin, padding, width, height 적용하기!

오늘은 border, margin, padding, width, height 적용하는 방법에 대해서 알아보겠습니다. 

다 기본적으로 알아둬야 하는 요소이며 간편한 것이기 때문에 한번에 소개하도록 하겠습니다. 

width 및 height에 대해서 가장 먼저 알아보겠습니다. 

예제

width 500px, height 200px;

사용방법

width 500px, height:200px;

두번째로 border에 대해서 알아보면

예제

border입니다.

사용방법

border입니다. 

<style>부분을 보시면 border:1px solid red; 라고 되어있습니다. 1px라는것은 border의 굵기 , solid는 선의 모양 , 그리고 red는 색상값입니다. 

주로 선의 모양은 solid 외에 dotted, dashed, double, groove 등이 있습니다. 예제로 몇개만 알아보겠습니다. 사용방법은 solid 부분에다가 dotted, dashed 등 넣어주시면 됩니다. 

dotted 예제

dotted입니다.

dashed 예제

dashed입니다.

double 예제

double입니다.

groove 예제

groove입니다.

그리고 주의하실점은 border를 적용할 경우 예) 1px일경우 전체 상하좌우 1px씩 잡아먹게 됩니다. 이럴경우 넓이와 높이에서 2px씩 빼도되지만 box-sizing:border-box를 하시면 border값을 포함해서 자동 계산됩니다. 

세번째는 margin에 대해서 알아보겠습니다. 

예제

margin 30px 적용되었습니다. 

사용방법

margin 상하좌우 30px적용

보시면 margin:70px;로 들어가있습니다. 상하좌우 70px을 적용시키는 겁니다. 그외에 방법으로는 상하 좌우 따로주는 방법이 있습니다. 

상하/좌우 따로주는 방법

상하는 70px, 좌우는 40px을 적용시키는 방법은 margin:70px 40px;를 적용시키시 면 됩니다. 

상/하/좌/우 각각 따로주는 방법

각각 20px씩 주는 방법을 예제로 들면 margin-top:20px; margin-bottom:20px; margin-left:20px; margin-right:20px;의 방법으로 하시면 됩니다. 

또 같은 방식이지만 margin:20px 20px 20px 20px(상/우/하/좌)로 주는 방법도 있습니다. 필요하신 상황에 따라서 쓰시면 될 것 같습니다. 

마지막으로 padding에 대해서 알아보겠습니다. 

사실 사용하는 방식으로는 padding이랑 margin이랑은 별 차이가 없습니다. 단!! 가장 큰 차이점이라고 하면 padding은 안쪽에서부터 공간을 잡고 margin은 영역 밖으로 잡는다는 점입니다. 사용할때 가장 중요한 점이니 꼭 알아두셔야 합니다. 

예제

padding: 70px입니다. 

사용방법

padding 상하좌우 30px적용

차이점을 보시면 padding의 경우는 안에서 부터 공간을 잡는것을 볼 수 있습니다. 그외에 방식은 margin이랑 같은 방식으로 사용하시면 됩니다.  예제를 보시고 상황에 따라서 유용하게 사용하시길 바랍니다.