CSS font 폰트 태그 요소 다양한 스타일 적용시키는 방법
오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다.
지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다.
font-family → 글꼴을 지정합니다.
font-size → 글자 크기를 설정합니다. 단위는 px 입니다.
font-weight → 글자의 굵기를 설정합니다. 보통 bold 를 사용합니다.
font-style → 기울이기 등의 글자 스타일을 지정합니다.
font-variant → 영어 작성 시, 작은 대문자 스타일로 변경합니다. (거의 쓰지 않음)
line-height → 문장 사이의 간격을 조절합니다.
color → 글씨 색상을 변경합니다.
그런데 이 요소들을 간단하게 줄일 수 있습니다. 그것이 노란색 박스로 표시된 부분입니다. 하지만 규칙이 있습니다. 일정한 규칙대로 마크업을 해야 제대로 적용이 됩니다. 규칙은 다음과 같습니다.
font:[font-weight font-style font-variant] → [font-size/line-height] → [font-family]
color 는 따로 설정해줘야함.
각 요소를 사용할 때마다 쉼표는 필요 없으며 한 칸을 띄움으로서 적용됩니다. 또한 폰트 사이즈 뒤에 오는 line-height 에 대한 값은 백분율인 %로 작성해도 되지만, 저렇게 소수점으로 표현해도 무방합니다. 그리고 color 요소의 속성은 따로 작성했음을 확인하실 수 있습니다.
결론은, 지금 빨간 박스 부분의 스타일 요소와 노란 박스 부분의 스타일 요소는 완전히 똑같은 결과값을 가집니다.
둘 중 아무거나 하나씩 지우고 웹으로 출력되는 결과물을 확인해 보세요. 결과값이 같을 것 입니다. 저는 지금 이렇게 출력이 됩니다.
만약 간단하게 폰트 크기와 글꼴만 변경하고 싶으시다면?! 이렇게도 가능합니다.
font : 폰트크기 "글꼴"
이것이 위에 적용된 요소 입니다. 출력물을 확인해 보겠습니다.
그렇습니다. p태그가 적용된 문장이 정상적으로 적용 되었음을 확인하실 수 있습니다. font 태그 요소들은 코딩하면서도 자주 만나게 되기 때문에 꼭 기억해 두시고 요긴하게 사용하시기를 바랍니다. 저도 제대로 마스터해서 잘 활용하겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
