CSS 기초 #2 (font, text, paragraph, list)

폰트 관련

font-family: 글꼴을 지정. 여러 글꼴을 쉼표로 구분하여 작성하면, 첫 번째로 지원되는 글꼴이 적용

p {
  font-family: Arial, sans-serif;
}

font-size: 텍스트의 크기를 지정. px, em, % 등의 단위를 사용할 수 있음

p {
  font-size: 16px;
}

font-weight: 텍스트의 두께를 설정. normal, bold, 숫자로도 설정할 수 있음. (100~900 사이 값)

p {
  font-weight: bold;
}

font-style: 텍스트의 스타일을 지정. normal, italic, oblique 등이 있음.

p {
  font-style: italic;
}

line-height: 텍스트 줄 간격을 조절. 숫자 또는 px, em 등의 단위로 설정할 수 있음.

p {
  line-height: 1.5;
}

letter-spacing: 글자 간의 간격을 조정.

p {
  letter-spacing: 2px;
}

text-transform: 텍스트의 대소문자 변환을 설정. uppercase, lowercase, capitalize 등이 있음.

p {
  text-transform: uppercase;
}

color: 텍스트의 색상을 설정

p {
  color: #333333;
}

text-decoration: 텍스트에 장식을 추가. underline, overline, line-through, none 등을 설정할 수 있음

p {
  text-decoration: underline;
}

text-align: 텍스트의 정렬을 설정. left, right, center, justify 등이 있음

p {
  text-align: center;
}

text-shadow: 텍스트에 그림자를 추가. horizontal offset, vertical offset, blur radius, color 순서로 값을 설정

p {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

white-space: 텍스트 내의 공백 처리를 정의. normal, nowrap, pre, pre-wrap 등이 있음

p {
  white-space: pre-wrap;
}

margin: 문단의 외부 여백을 설정

p {
  margin: 20px;
}

padding: 문단의 내부 여백을 설정

p {
  padding: 10px;
}

background-color: 문단의 배경 색상을 지정

p {
  background-color: #f0f0f0;
}

text-indent: 문단의 첫 번째 줄을 들여쓰는 데 사용

p {
  text-indent: 30px;
}

line-height: 줄 간격을 조정하여 문단의 가독성을 높일 수 있습니다.

p {
  line-height: 1.8;
}

list-style-type: 목록 항목의 표시 형태를 설정. disc, circle, square, decimal, lower-roman 등이 있음

ul {
  list-style-type: square;
}

list-style-image: 목록 항목에 이미지를 사용하여 목록을 표시.

ul {
  list-style-image: url('bullet.png');
}

list-style-position: 목록 항목의 불릿이 텍스트 안에 있을지 밖에 있을지를 결정. inside, outside가 있음

ul {
  list-style-position: inside;
}

list-style: list-style-type, list-style-position, list-style-image를 한 번에 설정할 수 있음.

ul {
  list-style: square inside url('bullet.png');
}

실습

See the Pen CSS text by Cheolho Jang (@chiro-J) on CodePen.