[CSS] 다시 정리해보는 박스 구성 요소 (Margin, Border, Padding, Content)

 

🌈 박스를 구성하는 요소 - Content, Padding, Border, Margin

 

1. Border (테두리)

 

h1 tag 에 border의 빨간 선을을 추가하여 확인해보면 아래와 같이 h1 tag의 테두리를 확인할 수 있다.

💡 테두리를 점선으로 만들어보기

 

border의 속성값 중 테두리 스타일에 dotted라는 속성을 넣어주면 된다.

 

💡 테두리를 둥글게 만들어보기

 

border-radius 를 이용해 테두리를 둥게 만들어볼수도 있다.

 

💡 테두리에 그림자 넣기

 

box-shadow 를 이용해 테두리에 그림자도 넣을 수 있다.

 

2. Margin (바깥여백)

 

tag에 margin을 주어 border와의 차이점을 먼저 확인해보자. 살구색으로 표시되어 있는 border의 바깥 부분이 margin 인 것을 확인할 수 있다.

 

Margin: top, right, bottom, left

 

값을 두개만 넣으면 첫 번째 값이 top, bottom, 두 번째 값이 left, right에 적용

값을 하나만 넣으면 모든 방향의 값에 적용

 

 

💡 바깥 여백의 값에는 음수도 가능한데, 음수를 사용하면 다른 엘리먼트와의 간격이 줄어들어 화면에서 사라지게 하거나 다른 엘리먼트와 겹치게도 만들 수 있다.

 

3.  Padding (안쪽여백)

 

tag에 padding을 주어 magin 과의 차이점을 먼저 확인해보자. padding은 투명한 그린색으로 표시되어 있는데, 아래 사진을 보면 contents 의 바깥에서 부터 border 의 안쪽까지가 padding 인 것을 확인할 수 있다.

Pdding: top, right, bottom, left

 

💡 개발자 도구에서 확인해보면 내가 설정했던 margin, border, padding의 값을 확인할 수 있다.