[css] 글자 굵게 기울기 속성 (font-style, -weight) 아작내버리기 06

[css] 글자 굵게 기울기 속성 (font-style, -weight) 아작내버리기

이번 글에서는 css를 사용해서 글자의 스타일과 두께(굵기)를 지정해버리도록 하겠습니다.

사실 스타일이라고하면 글자를 기울게 하는 것이 있고 두께라고 하면 굵게하는 것이 답니다.

그런데 글을 쓸 때 굵게하는 효과를 아마 좀 많이 사용하지 않을까 생각되네요.

요즘은 그냥 글을 쓸 때 웹프로그래머가 만들어 놓은 에디터를 사용하지만..

지금 제가 쓰고 있는 이것도 티스토리용 에디터죠.

그래도 무슨 코드가 먹히면 이런 스타일이 적용되는지 궁금하지 않나요?

전 궁금하던데

html을 사용하는 것이 아니라 css를 사용해 볼게요.

위와같이 h3을 선택자로 지정하고 font-style 속성을 사용했습니다.

이 속성은 기울임꼴의 글꼴이나 오블리크 글꼴을 사용할 수 있게 합니다.

오블리크는 비스듬하게 경사가진 뜻이라고합니다.

기울임꼴은 필기체를 오블리크는 일반글꼴을 기울인 것이라고합니다.

그런데 사실 한글은 필기체가 따로없고 특성상 기울이게되면 뵈기싫습니다.

그래서 아마 한글에서는 잘 사용이 되지 않는 걸로 알고있습니다.

값은 위와 같이 줄 수 있습니다.

italic은 필기체형 기울임

위에서 설명했던 oblique 속성

그리고 normal(보통)속성이 있는 것을 알 수 있죠.

인헤릿은 말그대로 부모것을 상속받아옵니다.

default값은 initial값입니다.

이 값은 모든 속성의 기본값이라고하네요.

그 다음은 font-weight 속성입니다.

이 속성은 문자의 두께, 검은정도와 스트로크두께를 지정할 수 있습니다.

font-height 라는 속성도 있나해서 찾아보았더니 그런건 없었습니다.

참고로 line-height가 있고 이것은 줄 간격이었습니다.

저번 시간에 알아 봤는데 궁금하신 분들은 저번 글 참고하세요. (맨밑에 있어여)

값으로는 위와같이 줄 수 있네요.

가장 기본적으로 사용되는 것이 blod입니다.

사용하게되면 볼드체로 지정되며 굵게됩니다.

나머지는 별로 쓸일이 없을 듯한데 궁금하시면 알아보세요.

지정된 코드를 웹브라우저에서 실행해준 모습입니다.

이탈릭체로 지정된 h3태그와 본문은 bold체로 설정된 것을 알 수 있었습니다.

이렇게 간단하게 설정을 할 수 있다는 것을 알고갑시다.

감사합니다.

★줄간격 정렬, 밑줄 (text-align-decoration,line-height) 04

★글자에 그림자 넣기 text-shadow (+글꼴, 크기 : font-family-size) 05

★퀀트투자가 뭘까? 알고리즘으로 돈벌기 간단하게 알아보자