CSS 기초 코드 정리

내가 보려고 만드는 CSS 기초 코드 정리

• head-style에 입력(전체는 *사용, body에서 class 지정 후 .(class)로 사용)

• 이미지 삽입 시

  body에 div class="(ex)item_image"
  head-style에 .item_image {
  width: (원하는 크기) (ex) 500px;
  height: (원하는 크기) (ex) 300px;
  background-image: url("(ex) (이미지 주소)");
  - width height의 크기의 박스 안에 해당 (이미지 주소)를 넣음
  - url 타이핑 후 tab키 누르면 됨
  background-size: (ex) cover;
  background-position: (ex) center;
  - 박스 안에서 해당 (이미지 주소) 크기와 위치 설정
  }

• margin: 요소의 네 방향 바깥 여백 영역 설정
  - margin-top, margin-right, margin-bottom, margin-left
  - margin: 10px 50px 30px 0; :위, 오른쪽, 아래, 왼쪽 순서 (시계방향)
  - auto (브라우저가 적절한 여백 크기 선택, 예를 들어 요소를 중앙 정렬하고 싶을 때 사용): margin: auto (상하0, 수평 중앙정렬), margin: 10px auto (상하10px, 수평 중앙정렬),

• padding: 요소의 네 방향 안쪽 여백 (콘텐츠와 테두리 사이의 공간) 영역 설정

참고 사이트

• 스파르타 코딩클럽
• https://developer.mozilla.org/ko/docs/Web/CSS/margin