태그

  1. a태그로 링크 생성 text-decoration 으로 밑줄 제거
  2. 상위 요소에 center 같은것을 주면 하위 요소 다 적용됨
  3. border주면 바깥 여백, 상자, 색 지정 border-radious 둥굴게

레이아웃

  1. div로 구역 나누기
  2. 리스트 태그안에 a태그 넣어서 네비게이션 div만들기→nav
  3. 레이아웃 만들 때 컨테이너 박스 생성 꼬꽁 width 지정하기

정렬

  1. float : left,right 로 요소 띄어서 정렬하기, 그 후 clear: both로 다음 박스 제자리 찾게하기 안되면 flot: none 주기.

  2. 네모모양을 가운데 정렬: display:block + 마진 left right auto 주기

  3. display : inline-block 으로 요소 왼쪽으로 정렬하기 inline 속성은 넓이와 높이가 없으며 block 속성은 박스형태 inline-block 은 줄바꿈이 들어가지 않는 박스(넓이와 높이가 있다!)

  4. 마진 패딩 4개 값은 각각 상, 우, 하, 좌

  5. margin이 겹쳐서 마진값이 공유되는 버그 : 상위 요소에 padding주기

  6. 태그선택자에 box-sizing을 주면 padding을 무시함 (width는 패딩을 포함하기에 정확한 값이 나오지 않는다) ex) box-sizing : border-box (보더 포함) content-box (padding 안쪽)