스크린샷 2019-09-05 오후 9.08.01.png

[CSS] ;Margin & Padding & Border

9921C3505A42FB1B07.png

  • MARGIN ; ELEMENT사이의 여백. 마진에 값을 주면 그 만큼의 거리만큼 다른 엘리먼트와의 거리가 멀어지게됨.
  • BORDER : 테두리. ELEMENT의 경계선. div영역 표현하는 선 두께
  • PADDING : 테두리와 컨텐츠 사이의 여백.

<margin>스크린샷 2019-09-16 오전 2.24.40.png
<border>
스크린샷 2019-09-16 오전 2.29.11.png
<padding>
스크린샷 2019-09-16 오전 2.31.09.png

div{
  font-size: 32px;
  width: 400px;
  text-align: center;
  padding: 30px;
  margin: 30px;
}
  • MARGIN & PADDING
    값을 줄 때, 위> 오른쪽> 아래> 왼쪽 순서로 들어가게 됨. 근데 상위처럼 한가지만 써주면 사방에 다 적용.
p.example {
  padding: 50px;
}

padding과 border 모두 width에 포함되지 않음.. 매번 MARGIN/BORDER에 추가 값을 주고 싶지 않다면
box-sizing: border-box를 주면됨. 그러면 width와 height는 content의 너비가 아니라 border까지 포함한 태그의 너비가 된다.

  • border
    테두리를 넣게 될 때 하기와 같은 순서로 넣음. 사실 정해진 건 아니지만 coding convention(코딩 규칙)에 따라 순서 (선 두꼐, 선 종류, 선 색상)를 맞춰주는 것이 좋음.
border: 1px solid black;
`

border의 선 스타일은 하기와 같고 적절하게 사용하면 된다.
그리고 radius로 4방향의 모서리에 적용될 반지름을 결정함.
top-left, top-right, bottom-right, bottom-left 순서로 값이 지정.

example >> border-top-left-radius : 2px;

* { box-sizing: border-box; }
border의 width와 height는 엘리먼트의 컨텐츠의 크기를 지정.
따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 크기를 가늠하기가 어렵다.
box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있다.

아래와 같은 "*" selector로 모든 태그에 적용할 수 있다!



:: 토요일에도 나와서 하루종일 공부하는 우리 wecode 3기..
엄청난 면학 분위기,
이렇게 다양한 사람들이 하루종일, 일주일 내내 모여서 공부를 할 수 있다니.
이런 분위기에 혼자 자극이 안된다 그러면 거짓말이겠죠