WEBVTT

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

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

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

00:00:09.532 --> 00:00:12.480
하지만 이것은 태그를 잘못 사용하는 방법중에 하나입니다

00:00:12.579 --> 00:00:14.112
첫 문단 전체를 강조하고 싶다고

00:00:14.112 --> 00:00:16.322
이야기 한적은 없어요

00:00:16.337 --> 00:00:18.628
단지 첫 문단을 보기 좋도록 굵게 만들고 싶을 뿐입니다

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

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

00:00:28.025 --> 00:00:29.345
이얍, 진짜 굵게 되었어요

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

00:00:34.782 --> 00:00:37.869
다시한번 모든 글을 태그로 감싸봅시다

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

00:00:42.555 --> 00:00:44.085
하지만 이러한 방식은 사용하면 안됩니다

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

00:00:46.842 --> 00:00:49.248
우리는 노래 전체를 강조하고자 하는게 아닙니다

00:00:49.392 --> 00:00:52.132
단순히 그것을 보기 좋게 하려고 기울이려고 생각하는 것입니다

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

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

00:00:59.529 --> 00:01:03.120
'font-style: italic'라고 추가해줍시다

00:01:03.681 --> 00:01:05.645
오케이 좋아요

00:01:05.889 --> 00:01:08.926
지금까지 우리는 우리의 노래가사를 위해서
몇몇개의 폰트에 관련된 속성들을

00:01:08.926 --> 00:01:10.454
하나하나 적용해보았습니다

00:01:10.630 --> 00:01:13.870
우리는 `font-family`, `font-size` 
그리고 `font-style`에 대해 알게되었어요

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

00:01:19.305 --> 00:01:24.445
다음과 같이 말이죠
`font: italic 13px fantasy;`

00:01:25.083 --> 00:01:28.772
좋아요 
이제 기존에 사용했었던 3개의 속성을 지워도

00:01:28.992 --> 00:01:30.908
모든것이 똑같은 것을 볼 수 있을 것입니다

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

00:01:36.091 --> 00:01:37.667
하지만 저는 이런것을 좋아하진 않아요

00:01:37.667 --> 00:01:41.038
왜냐하면 저는 항상 어떤 형식으로 속성을 적어야하는지를 잊어먹거든요

00:01:41.038 --> 00:01:43.952
그래서 저는 한번에 한개의 속성씩 쓰는것이 더 쉽습니다

00:01:44.196 --> 00:01:47.020
그러므로 저는 전에 했던 방식대로 다시 돌려놓을게요

00:01:48.360 --> 00:01:51.951
결국 단축 속성을 쓸지 안쓸지는 여러분에게 달려있습니다

00:01:52.229 --> 00:01:54.816
중요한 것은 그것이 얼마나 멋지냐는 것이죠