[CSS] 핵심 속성 정리

가장 핵심적인 CSS 속성에 관한 정리

1. Display

div {
    display: block;
    display: inline-block;
    display: inline;
    display: none;
}

• block = 레이아웃을 정하기 위해 사용
• inline = 엘리먼트를 같은 라인에 두기 위해 선언
• inline-block = block과 inline을 합쳐주는 디스플레이
• none = 엘리멘트를 숨겨주는 디스플레이

2.Width and Height

img {
    max-width: 100%;
    height: auto;
}

• px = 픽셀
• em = font-size unit measurement
• rem = root em, em과 비슷하지만 상속 관련 문제가 없어서 쓰기 유용
• % = percetage
• auto = 주어진 공간 전체를 채운다

3. Margin and Padding

div{
   margin: 20px 10px 20px 10px;
   /* TOP, Right, Bottom, Left. */

   margin: 20px 10px 20px;
   /* Top, Left and Right, Bottom */

   margin: 20px 10px;
   /* Top and Bottom, Left and Right */

   margin: 20px;
   /* 20px worth of margin on all 4 sides */
}

• margin = 엘리먼트 간에 빈 공간 (보더 안)
• padding = 보더 밖

4. Border

div{
    border: 1px solid black;
    /* border width, style and color */
}

• border-width = width-height이랑 같다
• border-style = 보더 스타일 정의
• border-color = 보더 색 정의

5. Floats

clear를 제대로 하지 않을 시 생기는 문제들 ↓

• left, right, none

• clear = clear:left, right, both = float 제거

• overflow-hidden = 엘리먼트 간에 충돌 방지

• clearfix = 말로 설명하기 어려움..
  

6. Color

• color = text-color로 취급된다

7. Background

body {
    background:transparent image-url('image.png') left top no-repeat;
}

• background-color = 배경 색
• background-image = 배경 이미지
• background-repeat = 배경 반복 할지 안할지 지정
• background-position = x/y로 정의, 얼만큼 떨어져서 배경을 넣을지 지정

8. Font

body {
    font: italic small-caps bold 20px/1.5 "Proxima Nova", helvetica, arial, sans-serif;
    /* font shorthand */
}

• font-style = 서체 스타일 (italics/normal)
• font-variant = small capital/normal
• font-weight = bold 여부 지정
• font-size = 서체 크기 지정
• line-height = 텍스트 위 아래로 있는 공백 지정
• font-family = 사용자가 원하는 서체 지정

해당 정리는 https://zellwk.com/blog/9-important-css-properties-you-must-know/ 페이지를 참조하여 작성하였다.