아.. 그..그..그… 뭐였지..? 할 때, 한 눈에 찾아볼 수 있도록 간략하게만 작성되었습니다. 각각의 자세한 사용방법은 개별 문서를 찾아보시는 것을 권장드립니다.

• display – 화면에 보여지는 방식
  • block, inline, inline-block, none
  • grid, flex
• position – 위치 지정하기
  • static, relative, absolute, fixed, sticky
• float – 특정 위치에 띄우기(부유시키기)
  • none, left, right
• width – 너비
  • min-width, max-width
  • px, em, rem, %
• height – 높이
  • min-height, maxheight
  • px, em, rem, vh
• margin – 외부여백
  • margin: 10px; (상하좌우 10px)
  • margin: 10px 20px; (상하 10px, 좌우 20px)
  • margin: 10px 20px 30px; (상 10px, 좌우 20px, 하 30px)
  • margin: 10px 20px 30px 40px; (상 10px, 우 20px, 하 30px, 좌 40px) – 순서주의
  • margin-top, margin-left, margin-right, magin-bottom
• padding – 내부여백
  • margin 과 적용방식 같음
  • padding-top, padding-left, padding-right, padding-bottom
• border – 테두리
  • border: 1px solid black; (순서 상관없음)
  • border-width, border-style, border-color, border-radius
  • border-top, border-left, border-right, border-bottom
  • border-top-color, border-left-width, border-top-left-radius …
  • style: none, solid, dotted, dashed, double, groove, ridge
• box-sizing – size에서 padding 과 border의 포함여부 결정
  • content-box, border-box
• font – 글자 관련
  • font-family: “Nanum Gothic”, “Malgun Gothic”, sans-serif;
  • font-size: 16px; (1.2rem)
  • font-weight: 600; (normal / bold)
  • fint-style: normal; (italic)
  • line-height: 24px;
  • color: red; (#ff0000)
  • text-align: center;
  • text-decoration: underline;
• background – 배경
  • background-color: lightgray;
  • background-image: url(“https://….”)
  • background-reapeat: no-reapeat;
  • background-position: center;
  • background-size: auto; (contain, cover, 100% 100%)
  • background-attachment: scroll; (fixed)
• 미디어 쿼리
  • @media 미디어 유형 and (조건문){조건이 참일때 적용할 css}
  • ex) @media screen and (max-width: 768px){.div{width: 100%}}