CSS의 font 단축 속성

이전 수업에서 우리는 텍스트를 위한 여러 속성들에 대해 살펴보았습니다. 이러한 각 속성을 따로따로 지정하는 것은 종종 꽤 번거롭기 때문에, CSS에서는 더 큰 편의를 위해 특별한 단축 속성인 font가 존재합니다. 이 속성은 글꼴 크기, 패밀리, 굵기, 기울임꼴, 줄 간격을 동시에 설정할 수 있게 해줍니다.

설명하는 속성의 구문은 다음과 같습니다:

font-style font-weight font-size / line-height font-family

이때 속성의 순서는 중요하며, font-size와 font-family는 필수입니다. 위 구문에 설명된 속성 이외의 다른 속성들은 이 단축 속성에 포함되지 않는다는 점에 유의하세요.

예제를 통해 살펴봅시다.

예제

다음과 같은 스타일이 있다고 가정해 봅시다:

p {
	font-size: 16px;
	font-family: Arial;
}

이것을 단축 속성을 사용하여 다시 작성해 봅시다:

p {
	font: 16px Arial;
}

예제

다음과 같은 스타일이 있다고 가정해 봅시다:

p {
	font-size: 16px;
	font-family: Arial;
	line-height: 50px;
}

이것을 단축 속성을 사용하여 다시 작성해 봅시다:

p {
	font: 16px/50px Arial;
}

예제

다음과 같은 스타일이 있다고 가정해 봅시다:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
}

이것을 단축 속성을 사용하여 다시 작성해 봅시다:

p {
	font: bold 16px Arial;
}

예제

다음과 같은 스타일이 있다고 가정해 봅시다:

p {
	font-size: 16px;
	font-family: Arial;
	font-weight: bold;
	line-height: 50px;
	font-style: italic;
}

이것을 단축 속성을 사용하여 다시 작성해 봅시다:

p {
	font: bold italic 16px/50px Arial;
}

실습 문제

font 단축 속성을 사용하여 코드를 단축시키세요:

p {
	font-family: "Times New Roman";
	font-size: 13px;
	line-height: 20px;
}

font 단축 속성을 사용하여 코드를 단축시키세요:

p {
	width: 300px;
	font-family: Arial;
	color: red;
	font-size: 40px;
	font-weight: bold;
}

font 단축 속성을 사용하여 코드를 단축시키세요:

p {
	font-family: Arial;
	font-size: 40px;
	font-weight: bold;
	text-indent: 50px;
	font-style: italic;
	line-height: 60px;
}