친절한효자손 취미생활

오늘은 폰트 스타일을 적용하는 다양한 태그 요소들을 배웠습니다. 그리고 간단하게 줄여서 사용하는 방법에 대해서도 알게 되었습니다. 줄여쓰는 방법은 아직 익숙하지 않아서 자주 써야 기억에 남을 것 같아요. 확실한건 줄여서 표현하는 방법이 더 간단해서 코딩 무게를 줄임에 있어서 도움이 될 것 같습니다.




지금 보시면, 빨간색 박스친 부분이 일반적으로 사용하는 폰트 스타일 요소들 입니다. 하나하나 설명을 하겠습니다.


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 태그 요소들은 코딩하면서도 자주 만나게 되기 때문에 꼭 기억해 두시고 요긴하게 사용하시기를 바랍니다. 저도 제대로 마스터해서 잘 활용하겠습니다. 끝.




"친절한효자손 취미생활" 을 검색!


이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.