CSS 폰트 스타일

그러면 어떻게 우리가 또 다른 방식으로
폰트(font)를 바꿀수 있는지 알아보겠습니다

첫번째 문단을 굵게(bold) 만들고 싶다면 어떻게 해야할까요?

그 문단 전체를 태그를 이용해 감싸서
원하는 것 처럼 만들 수 있습니다

하지만 이것은 태그를 잘못 사용하는 방법중에 하나입니다

첫 문단 전체를 강조하고 싶다고

이야기 한적은 없어요

단지 첫 문단을 보기 좋도록 굵게 만들고 싶을 뿐입니다

그러므로 우리는 위의 방법 대신에
'font-weight'라는 CSS속성(property)을 사용해야합니다

그러면 CSS 룰을 만족하는 방식인
'font-weight: bold'를 사용해 봅시다

이얍, 진짜 굵게 되었어요

그러면 이 가사들을 기울어지게 해보고 싶으면 어떻게 해야할까요?

다시한번 모든 글을 태그로 감싸봅시다

을 사용하게 되면 브라우저에서
기울어진 스타일을 기본으로 하게 되기 때문입니다

하지만 이러한 방식은 사용하면 안됩니다

이것 역시 태그를 잘못 사용하는 방법중에 하나이기 때문입니다

우리는 노래 전체를 강조하고자 하는게 아닙니다

단순히 그것을 보기 좋게 하려고 기울이려고 생각하는 것입니다

그래서 이런 방법 대신에 'font-style'이라는
CSS 속성을 사용해보도록 합시다

일단 룰에 맞도록 `song-lyrics`스타일을 정의 한 곳으로 이동해서

'font-style: italic'라고 추가해줍시다

오케이 좋아요

지금까지 우리는 우리의 노래가사를 위해서
몇몇개의 폰트에 관련된 속성들을

하나하나 적용해보았습니다

우리는 `font-family`, `font-size`
그리고 `font-style`에 대해 알게되었어요

만일 원한다면 실제로 여러개의 속성을
`font`라는 하나의 속성 다음에 한꺼번에 쓸 수 있어요

다음과 같이 말이죠
`font: italic 13px fantasy;`

좋아요
이제 기존에 사용했었던 3개의 속성을 지워도

모든것이 똑같은 것을 볼 수 있을 것입니다

이것을 '단축 속성(shorthand property)'이라고 부릅니다
보다싶이 이것은 원래의 형태보다 많이 짧기 때문이죠

하지만 저는 이런것을 좋아하진 않아요

왜냐하면 저는 항상 어떤 형식으로 속성을 적어야하는지를 잊어먹거든요

그래서 저는 한번에 한개의 속성씩 쓰는것이 더 쉽습니다

그러므로 저는 전에 했던 방식대로 다시 돌려놓을게요

결국 단축 속성을 쓸지 안쓸지는 여러분에게 달려있습니다

중요한 것은 그것이 얼마나 멋지냐는 것이죠