[웹] CSS의 blockquote내의 font 속성에서 14px/20px는 무슨 의미인가? 슬래쉬(slash)

안녕하세요. 개발자 드리머즈입니다.

저는 Readiz님의 fastboot 스킨을 사용 중인데요, 포스트 작성 시 인용구를 이용하면 글자가 커지는 게 마음에 들지 않았습니다.

그래서 관리자 -> 꾸미기 -> 스킨편집을 통하여 인용구(quote)를 사용하면 생기는 변화를 수정하러 갔습니다.

인터페이스가 좀 바꼈는데 위의 html 편집 버튼을 누르면 기존의 html/css 변경 가능한 화면이 뜹니다. 

바뀐 화면의 우상단에 있는 CSS를 클릭한 뒤에 Ctrl+f키를 눌러 quote 검색어를 찾습니다. 그러면 아래의 코드를 발견할 수 있습니다.

.article blockquote {
  font: 14px/20px italic Times, serif;
  /*background-color: #EEEEEE;*/
  /*background-image: url(images/iconBlockquote.gif);*/
  background-position: top 10px left 10px;
  background-repeat: no-repeat;
  border-left: 10px solid #F5A431;
  padding: 13px;
}

저는 현재 인용구를 사용하면 인용구 상단의 왼쪽 위에 나오는 " 이미지가 마음에 안들어서 주석처리 했습니다. 그리고 인용구의 주황색 배경색도 주석처리 했습니다.

이제 인용구의 글자 크기만 좀 줄이고 싶었는데 font 속성?을 보면 14px/20px 이런 식으로 되어있습니다. 이게 무슨 의미인지 몰라서 찾아봤습니다.

다행히 스택오버플로우(https://stackoverflow.com/questions/701732/size-of-font-in-css-with-slash)에 답변이 있네요.

14px/20px에서 왼쪽 값인 14px는 font-size이며 오른쪽 값인 20px는 line-height라고 합니다.

blockquote에서 font의 line-height 속성은 인용구 사용시 왼쪽에 보이는 막대의 최소 길이를 의미하는 것 같습니다. 이 값을 200px와 같이 크게 조절하면 아래 사진처럼 됩니다.

제가 원하는 것은 글자의 크기를 조절하는 것이므로 line-height는 원래대로 되돌리고, font-size 14px 값을 13px로 변경하니 일반적인 글의 font size와 같게 변한 것 같습니다.