# div 디자인에 많이 사용하는 CSS 속성

**네모 박스 디자인에 많이 사용하는 CSS 속성**

```css
.box {
  margin : 20px; 
  padding : 30px;
  border : 1px solid black;
  border-radius : 5px;
}
```

margin은 바깥 여백,

padding은 안쪽 여백,

border는 테두리 (차례로 두께, 선의 종류, 색상),

border-radius는 테두리 둥글게 처리입니다.&#x20;

가운데 정렬도 많이 하는데 저번 이미지처럼 display : block; margin-left : auto; margin-right : auto 이렇게 주면 됩니다.

&#x20;



**Q. 이렇게 많은 스타일을 다 언제 외우고 있냐고요?**

외워봤자 맨날 까먹기 때문에 필요하면 구글에서 찾아쓰는게 일반적입니다.&#x20;



**margin과 padding을 원하는 방향에만 줄 수 있습니다.**

&#x20;

```css
.box {
  margin-top : 20px;
  padding-left : 30px; 
}
```

top, left, bottom, right 중 원하는 곳에만 여백을 줄 수 있습니다.&#x20;

(참고) margin은 음수도 가능합니다. -20px 이런 식입니다.

(참고) **margin : 5px 6px 7px 8px;** 이렇게 띄어쓰기를 이용해 작성하시면

차례로 **상 우 하 좌** 마진을 5,6,7,8px 한번에 줄 수 있습니다.&#x20;



**display : block이 내장되어있는 div박스**

모든 div, p, h1, li 등은 display : block 속성을 주지 않아도 기본적으로 내장되어있습니다.&#x20;

그래서 p태그나 div태그를 그냥 사용하면 한 행을 전부 차지하게 됩니다.&#x20;

이게 싫다면 display 속성을 다른 것으로 부여해주면 됩니다.

display : inline, inline-block, flex 등 여러가지가 있습니다.&#x20;





**일부 스타일은 inherit 됩니다**

font-size, color, font-family, text-align 이런 속성들은

부모 태그에 쥐어주면 거기 안에 있던 태그들까지 전부 상속됩니다.&#x20;

영어로 inherit 된다고합니다.&#x20;

안에 글자들이나 태그들이 많을 경우 전부 font-size를 작성안해도&#x20;

부모태그에 한번에 작성하고 끝낼 수 있으니 편리합니다.&#x20;

다 inherit되는건 아니고 글자와 관련된 스타일들이 주로 inherit 됩니다. &#x20;

&#x20;

&#x20;✨ 과제. 오늘 만든 박스에 우측하단에 그림자를 만들어보세요.

&#x20;              안배운건 구글 검색해서 찾아서 해보는겁니다.



