html 폰트 스타일과 사이즈
홈페이지를 만들 때 많은 글자 중에서 특정 글자만 강조하기 위해서 꾸밀 때는 CSS에서 폰트 속성만 설정해주면 되는데요. Font와 관련된 몇 가지 속성을 알아보겠습니다.
1. font-family는 글꼴을 지정하는 속성인데요. 지정한 태그 안쪽에 있는 글꼴을 지정할 때 사용합니다. 속성값으로는 글꼴의 이름을 입력해주면 되구요. 형식은 다음과 같습니다.
body { font-family : "나눔고딕","굴림", "돋움", ...} 속성값으로 여러 개의 글꼴을 연속해서 입력할 수 있는데요. 이렇게 입력하는 이유는 모든 사용자의 컴퓨터에 해당 글꼴이 없을 경우를 대비하기 위해서입니다. 나눔 고딕 글꼴은 윈도우 기본 글꼴이 아니기 때문에 컴퓨터에 따로 이 폰트를 설치하지 않으면 그 컴퓨터에서는 나눔 고딕이라는 글꼴은 보이지 않게 되고 윈도우의 기본 글꼴이 보여지는데요. 이렇게 설정한 글꼴이 없는 경우를 대비해서 원하는 녀석들로 여러 개를 지정해줄 수 있습니다.
2. font-size는 글자의 크기를 정해주는 속성입니다. 여기서 사용할 수 있는 값은 일정한 크기 값인 "pt", 모니터의 크기에 따라 상대적으로 글자의 크기가 변하는 픽셀(px), 상위(부모) 요소의 글자 크기의 비율에 해당하는 "백분율" 등이 있는데요. 백분율을 사용할 때는 부모 요소의 글자 크기 단위가 px, pt처럼 크기 값으로 설정되어 있어야 합니다.
기본값은(medium) 12pt, 16px, 1em, 100%로 표시가 되고, 상대 값을 사용할 경우 xx-small < x-small < small < medium(기본값) < large < x-large < xx-large 순서로 나열 되구요. 각 단위마다 1.2배씩 글자의 크기가 커지거나 작아지게 됩니다. 또한, 크기값 중에 em은 해당 글꼴의 대문자 M의 넓이를 기준으로 한 값이구요. ex는 소문자 'x'의 높이를 기준으로 한 값입니다. 픽셀은 모니터의 상대적인 크기입니다.
3. font-style 속성은 글자의 기울기를 조절해서 이탤릭 글씨체로 표현하는 속성입니다. 형식은 body {font-style : 속성값} 인데요. 여기서 사용할 수 있는 속성값은 'normal'이 일반적인 형태이구요. 'italic' 또는 'oblicque'는 글자를 이탤릭체로 표시하는 속성입니다.
4. fond-weight 속성은 글자의 굵기를 조절하는 속성으로 속성값에는 일반적인 형태인 normal, 진하게 표시하는 bold, 상대적으로 연하게 표시하는 lighter, 상대적으로 굵게 표시하는 bolder 등을 사용할 수 있구요. 마지막으로 100~900까지의 숫자를 입력해서 굵기를 조절할 수도 있습니다. 이때 400이 '보통'이고 700이 '진하게' 입니다.
이렇게 알아본 font 속성들은 [ p { font : "나눔고딕" 14px bold italic}]과 같은 형식으로 한번에 묶어서 사용할 수 있습니다.
