CSS 기초(4) 텍스트 관련속성 font-family, font-weight, line-height, text-align
CSS 기초(4)
오늘은 웹페이지를 구성하는데 중요한 역할을 하는 텍스트와 관련된 속성에 대해 알아보겠습니다.
저번 시간에도 텍스트와 관련된 폰트 사이즈에 대해서 배웠었는데
오늘은 더 나아가 텍스트에 적용할 수 있는 디자인과 텍스트 영역에 관련한
CSS 속성에 대해 알아보겠습니다.
(1)
font-family
font-family는 폰트의 글꼴을 지정해 줄 수 있습니다.
font-family의 작성 방식은
'font-family: [글꼴], [대체 글꼴], [글꼴 유형];' 이렇게 작성할 수 있습니다.
여기서 대체 글꼴은 제외해도 가능하지만 대체 글꼴이 있다면
만약 글꼴에 작성한 글꼴이 컴퓨터에 없다면 대체 글꼴로 대신 작성될 수 있습니다.
마지막으로 글꼴 유형은 글꼴도 없고 대체 글꼴도 없다면 글꼴 유형이 대체돼서 적용됩니다.
글꼴 유형에는 정해진 종류가 있는데요.
serif, sans-serif, cursive, fantasy, monospace가 있습니다.
serif는 글꼴에서 serif를 지원하는 글꼴을 의미하는 것이고
sans-serif는 serif가 지원하지 않는 글꼴을 의미하고
cursive는 필기체를 지원하는 글꼴을 의미하고
fantasy는 화려한 글꼴을 의미하고
마지막으로 monospace는 모든 문자의 너비가 같은 글꼴을 의미합니다.
font-family는 두 가지 방식으로 적용할 수 있는데
먼저 웹폰트로 적용하는 방식이 있습니다.
웹폰트로 적용하는 방식은 현재 컴퓨터에 원하는 폰트가 깔려있지 않아도
폰트 코드를 통해 폰트를 적요하는 방식입니다.
대표적으로 구글 폰트에서 무료로 제공하는 폰트를 많이 사용하는데
위에 사진처럼 구글 폰트 사이트에서 원하는 폰트의 굵기를 선택해서 담고 해당 굵기의 폰트의
코드를 CSS 가장 상단에 붙여 넣은 후 원하는 태그에 적용할 때는 아래쪽 코드를 적용하시면 됩니다.
여기서 다양한 굵기를 필요로 한다면 플러스 퍼튼을 눌러서 똑같이 적용하시면 됩니다.
웹폰트로 적용할 때는 HTML에 적용하는 link 태그를 이용하는 방식과
CSS에 적용할 수 있는 @import 방식이 있습니다.
실무에서는 CSS를 활용한 방식을 많이 쓰는데 이유는 가독성이 좋기 때문입니다.
HTML 링크는 일단 복잡하기도 하고 head 태그 안에 작성하기 때문에 수정하는데 복잡할 수 있습니다.
하지만 CSS를 통해 적용하면 내용도 짧고 상단에 적용해서 수정하기도 용이하기 때문에 실무에서
자주 사용되는 방식입니다.
두 번째 적용 방식에는 폰트 파일을 불러오는 방식입니다.
해당 방식은 먼저 원하는 폰트가 컴퓨터에 깔려있어야 하며
해당 폰트가 깔려있는 폴더의 위치를 적용하고 font-family의 속성 값에 원하는 이름을 적용한 후
원하는 태그에 적용할 때는 'font-family: 지정한 이름'을 사용하여 적용할 수 있습니다.
먼저 CSS 상단에
@font-face {
font-family: 지정할 이름;
src:url(../font 지정 위치/원하는 폰트);
}
이후 원하는 태그에 적용하는 방식은
선택자{
font-family:지정한 이름;
}
이렇게 적용하실 수 있습니다. 실무에서는 웹폰트를 많이 사용합니다.
왜냐하면 폰트 파일을 적용하는 방식은 원하는 글꼴이 있을 때마다
다운로드하여서 적용해야 하는 번거로움이 있지만
웹폰트를 이용하면 빠르게 원하는 폰트를 적용할 수 있기 때문에
실무에서 주로 웹폰트를 이용한 방법을 많이 사용합니다.
(2)
font-weight
font-weight는 폰트 굵기 단위를 담당하는 속성입니다.
이 속성은 100~900, normal, bold, bolder, lighter로 표현이 되는데
숫자로 하면 900으로 갈수록 굵어지고 100으로 갈수록 얇아집니다.
영어로 작성하는 방식도 결국에는 숫자로 표현하는 것과 같은데요!
예시로 norrmal은 숫자로 400에 해당하고 bold는 숫자로 700에 해당합니다.
그래서 숫자를 알아두시면 좋습니다.
font-weight를 사용할 때 주의하실 점은 해당 폰트에서 해당 굵기를 지원하는지 확인을 해야 한다는 것입니다.
만약 bold를 적용했는데 해당 폰트에서 bold를 지원하지 않으면 bold가 적용되지 않기 때문에
그 점을 유의하시고 사용하시면 됩니다.
(3)
line-height
line-height가 있는데 이 속성은 폰트의 높이를 나타내는 속성입니다.
폰트의 높이가 중요한 이유는 폰트 해당 영역의 크기를 지정해 줄 수 있기 때문에
박스 형태의 공간에 텍스트를 넣을 때 line-height 속성과
다음으로 소개해 드릴 text-aligh 속성을 통해 해당 텍스트의
위치를 박스 형태의 공간에서 가운데에 맞출 수 있기 때문입니다.
이 속성을 사용하실 때 주의하실 점은 line-height값이 해당 폰트의 사이즈보다
작으면 안된다는 것입니다.
그렇기 때문에 만약 해당 텍스트의 크기가 16px이라면 line-height값은 16px 이상의 값으로
적용해야 합니다.
(4)
text-align
마지막으로 text-align입니다. 이 속성의 역할은 텍스트의 정렬 방식인데요!
이 속성을 통해 텍스트의 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬과 같은 정렬을 할 수 있습니다.
위에서 소개해 드렸듯이 박스 형태의 공간에서 텍스트의 위치를 지정하거나
웹페이지에서 메인 텍스트를 작성할 때 해당 텍스트의 정렬 방식을 지정할 때 사용합니다.
text-align의 속성 값에는 start, end, left, right, center, justify, justify-all, match-parent가 있습니다.
오늘은 이 중에서 left, right, center정도만 소개해 드리겠습니다.
left는 말 그대로 왼쪽으로 정렬 right는 오른쪽으로 정렬 center은 가운데 정렬이라고 할 수 있습니다.
그밖에 속성 값들은 추후에 설명을 드리겠고 오늘은 위에 3가지 정도만 알아가시면 되겠습니다.
오늘은 내용이 조금 길었는데요.
길었던 만큼 유용하게 사용되는 텍스트 관련 속성의 기초에 대해 소개해드렸습니다.
추후에 웹페이지를 구성하면 텍스트도 정말 중요하게 사용되기 때문에
오늘 내용에 대해서는 반드시 숙지를 하시면 좋겠습니다.
참고하실 점은 오늘 소개해 드린 내용이 텍스트 관련 속성의 전체가 아닌 일부이고
글을 진행하면서 필요에 따라 추가로 소개해드리는 방식으로 진행해보겠습니다.
오늘 내용을 텍스트 속성의 전체라고 오해하지 마시고 오늘 알려드린 텍스트 관련 속성에서
기본 내용을 배웠다고 생각하시고 추후에 심화과정에서
차차 텍스트 관련 속성을 더 배워나간다고 생각하시면 좋겠습니다.
항상 기본이 중요하기 때문에 기본적인 내용을 꼭 숙지하시고 공부를 진행하시면 좋겠습니다!
감사합니다!!
