CSS 속성공부 #5 / 글자 속성

CSS 속성공부 #5 / 글자 속성

font-size 속성

이 속성은 글자의 크기를 지정하는 속성이다. 앞서 배운 크기 단위(css 속성공부 #1 참조) or 키워드 들을 사용하여 글자의 크기를 지정할 수 있다.

font-family 속성

이 속성은 글꼴을 지정하는 속성이다. font-family 속성의 스타일 값에는 사용자에 컴퓨터에 설치된 글꼴을 입력할 수도 있고 Google Fonts를 이용하는 방법도 있다.

여기서 원하는 폰트를 선택하면 아래와 같이 Import 하는 방법을 알려준다. 우리는 그저 HTML에 사용할 폰트의 link를 넣어주고 font-family를 이용해 사용하면 된다.

하지만 내가 만든 웹 페이지를 사용하는 사용자의 컴퓨터에는 해당 폰트를 지원하지 않을 수도 있으므로 Google Font 처럼 font-family의 속성을 여러 개 입력해줘야 한다.

font-style

font-style 속성은 글자의 기울기를 조절하는 속성이며, 스타일 값에는 키워드를 사용한다.

font-weight 속성

font-weight 속성은 글자의 두께를 조절하는 속성이며, 스타일 값에는 숫자 or 키워드를 사용한다.

text-align 속성

text-align 속성은 글자의 정렬을 담당한다.

line-height 속성

line-height 속성은 글자의 높이를 지정한다. 현대의 html 페이지는 문서보다 애플리케이션 형태로 많이 사용되기 때문에 line-height 속성을 사용하여 글자의 높이를 지정하기 보다는 글자를 수직 중앙 정렬할 때 사용한다.

width 100px, height 250px인 div에 수직 중앙 정렬을 적용해보자. text-align 속성을 center로 해도 가로만 중앙정렬이 되고, 수직 중앙 정렬은 적용되지 않는다.

여기서 a 태그의 line-height 속성을 div 태그의 height 속성값과 동일하게 설정해주면 중앙 정렬이 된다.

text-decoration 속성

a 태그에 href 속성을 지정하면 위 예제의 click처럼 글자에 밑줄이 생기고 파란색으로 변경된다. 하지만 우리는 일반 웹 페이지에서 밑줄이 없는 링크들을 많이 보았다. 이는 text-decoration 속성을 정용해서 밑줄을 제거했기 때문이다.