HTML, CSS ( 기초 - 1 )

- `<img src="" alt="">`
  - CSS 속성
    - object-fit: contain; (가로 세로 비율에 맞게 조정)
    - object-fit: cover;

- padding과 margin 차이 : 밖으로 나가는지, 안으로 들어가는지.

- display 속성 중 inline-block, inline, block 차이
  - inline : width, height, margin, padding 속성 적용 안 됨.
    - inline이 default인 태그 : a, span, img

  -  display 속성 중, lnline-block와 block 요소의 수평 정렬
    - display: line-block : 부모 요소에  text-align: center;
    - display: block: margin-left: auto; (left는 오른쪽으로 붙음)
             margin-right: auto; (right는 왼쪽으로 붙음)
             둘 다 써주면 가운데 정렬 = margin: 0 auto;

- section > div:nth-child(1) / div:nth-last-child(1)
  - section의 자식이면서 첫번째 자식이 div인 요소 / 뒤에서 첫번째
- :nth-child(2n+1) = nth-child(odd)
- :nth-child(2n) = nth-child(even)
- border-radious: 50px;
  - 해당 요소의 border. / 50%를 주면 원이 된다.

- inherit 속성값
  - ex) color: inherit;
    - 해당 태그의 부모 태그의 color 값을 상속받는다.

- ul, ol, li 개념
  - ul, ol은 목록
    - ul : 순서가 없는 목록
    - ol : 순서가 있는 목록
  - li 는 목록의 요소(리스트)

- 태그를 다양하게 쓰기보다는, div에 class를 부여해서 사용하는 편이다.
  단, 목록인 게 명확하다면, ul, ol을 사용하면 좋다.

- 노멀라이징
  - body 태그
  - body는 div의 default 부모 태그이고, margin이 default로 들어가있다.
    - body 노멀라이징
   

body{
	margin: 0;
}

 

- ul, li 태그

ul, li{
  list-style: none;
  padding: 0;
  margin: 0;
  }

  - h1~h6 태그
 

h1, h2, h3, h4, h5, h6{
    margin: 0;
  }