[수업노트](20.10.16)D+6 padding/margin/img/nth-child,first-child,last-child

- ctrl+T: 브라우저 새탭 생성, ctrl+W: 탭 삭제
- CSS 작성: HTML 작성 순으로, 띄어쓰기 금지. 되도록 >사용해주기
- a, img, span은 display 기본 속성값이 inline이다.

---

1. (CSS) padding과 margin
- padding: 박스의 안쪽 여백을 주는 속성(옆을 밀어내는게 아니라 자신의 몸집이 커지는 것)
- margin: 박스의 바깥쪽 여백을 주는 속성
- display inline속성값에서는 margin,padding 불가
  ex) display의 기본속성값이 inline인 a엘리먼트에 margin이나 padding 속성을 설정하려면 display 속성을
       반드시 변경해주어야 한다

---

2. (CSS) img
- 이미지를 삽입하는 속성. br태그와 같이 셀프 클로즈드 태그로 자식 엘리먼트를 가질 수 없다.
  ex) < img src="이미지 주소삽입" alt="">
- width,height 속성값으로 크기 설정
- 기본속성: display(inline)
               height(auto)

---

3. (CSS) nth-child,first-child,last-child
- 여러개의 데이터가 있을 때 일정 간격이나 패턴으로 속성 설정을 주고싶을 때 사용
- width 속성값: 부모엘리먼트 너비에 대한 %값으로 설정
  ex) section>div:nth-child(1){background:red;}=section>div:first-child(1){background:red;}
       → 첫번째 칸 배경색 레드

- nth-child(2n)또는 (even) :짝수
- nth-child(2n+1):홀수