Category: HTML

Serif fonts

Serif fonts have a small stroke at the end of their longer strokes.

Serif fonts examples:

• Times New Roman
• Times

How to specify Serif fonts

.serif-class {
  font-family: "Times New Roman", Times, serif;
}

Sans serif fonts

Sans serif fonts have clean lines without small strokes attached.

Sans serif fonts examples:

• Arial
• Helvetica

How to specify Sans serif fonts

.sans-serif-class {
  font-family: Arial, Helvetica, sans-serif;
}

Monospace fonts

A monospace font is a font in which all the letters have the same fixed width.

Monospace fonts examples:

• Courier New
• Courier

How to specify Monospace fonts

.monospace-class {
  font-family: 'Courier New', Courier, monospace;
}

스타일시트로 웹 세이프 (safe) 폰트를 지정하는 방법을 알아보자.

웹 세이프 폰트는 대부분의 컴퓨터나 모바일 장치에서 공통적으로 사용할 수 있는 폰트이다.

폰트는 샌-세리프 (sans-serif) 계열, 세리프 (serif) 계열, 모노스페이스 (monospace) 계열의 폰트로 분류할 수 있다.

1. 샌-세리프 계열 폰트

폰트를 지정할 때는 스타일시트의 font-family 속성을 이용한다.

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

세번째의 sans-serif 폰트는 일반 폰트 패밀리 (generic font family) 이다.

일반 폰트 패밀리는 비슷한 폰트들을 모아놓은 집합이다. 각 폰트에는 우선순위가 부여되어 있다.

2. 세리프 계열 폰트

.font-serif {
  font-family: "Times New Roman", Times, serif;
}

serif 폰트는 일반 폰트 패밀리이다.

3. 모노스페이스 계열 폰트

.font-monospace {
  font-family: "Courier New", Courier, monospace;
}

monospace 폰트는 일반 폰트 패밀리이다.

HTML 에서 이미지를 중앙 정렬하는 방법을 알아보자.

1. 인라인 요소와 블록 레벨 요소

<img> 태그는 인라인 요소 (inline element) 이다. 인라인 요소는 블록 레벨 (block-level) 요소와 달라서 중앙 정렬할 수가 없다.

인라인 요소를 블록 레벨 요소처럼 다루기 위해 스타일시트를 이용한다.

2. 스타일시트로 이미지를 중앙 정렬하기

다음과 같은 <img> 태그를 중앙 정렬해 보자.

<img src=”tree.png”>

여기에 class 속성을 추가한다.

<img class=”center” src=”tree.png”>

스타일시트를 아래와 같이 작성한다.

.center {
  display: block;
  margin: auto;
}

display 속성의 block 속성값은 인라인 요소가 블록 레벨 요소처럼 취급되도록 한다.

margin 속성의 auto 속성값은 블록 레벨 요소의 여백이 자동으로 지정되도록 한다. 이런 경우에는 좌우 여백이 동일하게 지정되므로 블록 레벨 요소는 중앙 정렬된다.