CSS 속성

font

---

#title {
    font-family: "사용할 글꼴 이름", <일반적인 글꼴 분류>;
    font-size: value;
    font-weight: normal | bold;
    font-style: normal | italic | oblique;
}

font-family

어떤 글꼴을 사용할 것인지 결정하는 속성입니다. 글꼴의 이름에 띄어쓰기가 들어갈 경우 큰따옴표로 묶어주어야 합니다.

#title {
    font-family: 'Times New Roman', Times, serif;
}

#title2 {
    font-family: Arial, Helvetica, sans-serif;
}

#title3 {
    font-family: 'Courier New', Courier, monospace;
}

font-family 속성의 펄백 시스템은 지정할 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴들을 순서대로 지정해줍니다. 사용하고 싶은 글꼴의 이름을 콤마로 구분하여 순서대로 적고, 가장 마지막에 일반적인 글꼴 분류를 적어줍니다.

일반적인 글꼴 분류는 Generic Font Family을 말합니다. 모든 글꼴은 일반적인 글꼴 분류 중 하나에 속합니다.

• serif
  각 글자의 모서리에 작은 테두리를 갖고 있는 형태의 글꼴.

• sans-serif
  모서리에 테두리가 없이 깔끔한 선을 가진 글꼴. 모니터에서 가독성이 좋음.

• monospace
  모든 글자가 같은 가로 길이를 가지는 글꼴. 코딩할 때 주로 사용.

• cursive
  사람이 쓴 손글씨 모양의 글꼴.

• fantasy
  장식이 들어간 형태의 글꼴.

font-size

글꼴의 크기를 설정합니다. 값으로는 px(pixel), em, rem, vW(viewport width) 등의 단위를 사용합니다.

• 브라우저 기본 글꼴 크기 1m은 16px입니다.

font-weight

글꼴의 두께를 설정합니다. 값으로는 normal, bold 를 사용하거나 100에서 900까지의 100단위의 숫자로 된 값을 사용할 수 있습니다.

font-style

글꼴의 스타일을 지정합니다.

• normal
  일반적인 글자의 형태를 의미.

• italic
  글자가 기울어진 형태로 나타남. (별도로 기울어진 형태의 글자들을 직접 디자인해서 만든 것)

• oblique
  글자가 비스듬한 형태로 나타남. (그냥 글자가 기울인 것)

기타

---

background-color

엘리먼트의 배경색을 지정합니다. CSS에서 색상값으로 들어갈 수 있는 값은 다음과 같습니다.

• 16진수 컬러 값 : #ff0000
• 투명도를 가진 16진수 컬러 값 : #ff000055
• RGB 컬러 값 : rgb(255, 0, 0)
• RGBA 컬러 값 : rgba(255, 0, 0, 0.5)
• HSL 컬러 값 : hsl(120, 100%, 25%)
• HSLA 컬러 값 : hsla(120, 100%, 50%, 0.3)
• 미리 정의된 색상의 이름 : red
• currentcolor 키워드 : 현재 지정된 색상 값을 사용

div {
    background-color: color | transparent;
}

• transparent : 배경색을 투명하게

border

테두리를 위한 속성입니다.

.red {
  width: 100px;
  height: 100px;
  border: 2px solid blue;
  background: yellow;
}

참고 문서 - border

padding

padding은 요소의 내부에 빈 공간을 추가합니다.

.red {
  width: 100px;
  height: 100px;
  padding: 20px 0px;
  padding-top: 20px;
  /* 상하: 10px */
  /* 좌우: 0px */
  background: yellow;
}

참고 문서 - padding

margin

요소의 네 방향 바깥 여백 영역을 설정합니다.

.red {
  width: 100px;
  height: 100px;
  margin: 20px 0px;
  margin-top: 20px;
  background: yellow;
}

참고 문서 - margin