Internet Media LCC

본 글은 독자들이 보다 쉽게 이해를 할 수 있도록 하기 위해 최삼순이라

는 특정인물과 상황을 만들었습니다.
 

 ○ 2단계 글씨를 조금 더 이쁘게

 “최삼순”인턴사원은 위와 같이 문서의 글씨에 크기를 조절하고 글꼴의 색을 마음껏 바꿀 수 있었지만, 자신이 원하는 글씨를 다른 글씨보다 이쁜 폰트로 바꾸고 글씨에 효과를 더 주고 싶었습니다. 그래야 조금 더 효과적으로 내용을 보여줄 수 있기 때문이죠.

 엘리먼트에 포함된 글꼴을 바꾸어 주는 속성으로는 font-family가 있습니다. 이 속성의 이름은 조금 특이하게 명칭이 family라고 되어 있습니다. 왜냐하면 여러분이 사용하는 HTML문서에서 사용하는 언어들은 여러 가지이며, 각각의 언어들에 맞는 글꼴들이 있습니다. 바로 family가 이런 각각의 언어들의 글꼴을 모아놓은 형태입니다. 영어는 영어의 폰트가 필요하고 일본어는 일본어의 폰트가 필요하며, 한국어는 한국어에 맞는 폰트가 필요합니다. 물론 모든 이렇게 각각의 폰트를 일일이 지정해 줄 수 있습니다. 반면 주의할 점은 폰트의 이름에 공백이 들어 갈 경우 겹 따옴표(“  ”) 안에 위치해야 합니다. 여러분이 각각의 언어별로 지정한 글꼴에 적용되지 않는 언어들은 HTML에서 지원하는 기본 글꼴을 따르게 되어 있습니다. font-family를 사용하는 방법은 다음과 같습니다.

위의 CSS를 사용하면 P Element에 사용되는 글씨들의 글꼴을 바꿀 수 있습니다. 처음의 나온 “Baskerville”는 영어에 관련된 내용만 정의 할 수 있는 속성값으로 영어글씨에만 효과를 미치게 됩니다. 다음에 보이는 “Heisi Mincho W3"는 일본어에 관련된 글꼴이며, Symbol은 수학기호와 관련된 문자입니다. 그리고 마지막 serif는 그 외의 언어들에 대한 기본 글꼴로 작용할 수 있습니다. 이렇게 글꼴과 관련된 font-family의 속성값을 정의하기 위해서는 그 언어를 지원하는 글꼴에 대하여 알고 있어야 합니다. 하지만 이런 언어별 글꼴에 대한 정보를 알기 힘들기 때문에 여러분에게는 일반적으로 인터넷에서 자주 사용하는 영어에 관련된 generic-family글꼴과 한글과 관련되어 사용하는 글꼴들을 다음과 소개해 드리겠습니다.

 이렇게 여러분이 원하는 엘리먼트에 font-family의 속성을 정의 하고 그 값으로 위에서 여러분에게 소개한 글꼴들을 입력해 주시면 됩니다. HTML에서 기본적으로 제공하는 글꼴이외에 여러분이 사용하고 싶은 글꼴(예를 들어 한글의 복숭아, 오이, 가지 등)들을 사용하기 위해서는 여러분이 만든 HTML문서와 같이 사용하고 싶은 글꼴도 같이 사용자들에게 제공해야 합니다. 이럴 경우 font-family의 사용이 조금 복잡해집니다. 이 부분은 차후에 다루어 보도록 하겠습니다.

 문서의 글꼴을 정해주는 font-family까지 알아보았습니다. 다음으로는 글씨에 장식을 해주는 방법에 대하여 알아보겠습니다. 처음으로는 여러분이 워드프로세서에서 자주 사용하는 글꼴의 기울기 설정할 수 있는 font-style와 글꼴의 굵기를 정해줄 수 있는 font-weight 그리고 글씨에 밑줄, 취소선을 설정해 줄 수 있는 text-decoration에 대하여 알아 보겠습니다. 일단 각각의 속성에 따라 기능별로 사용할 수 있는 값을 다음과 같이 표로 정리해보았습니다.

위의 표에 나타난 속성들은 글꼴의 크기, 색상과 같이 모든 엘리먼트에 적용할 수 있으며, 엘리먼트에 포함된 글씨들에게 효과를 보일 수 있습니다. 그럼 각각의 글꼴이 적용된 HTML문서의 화면을 보도록 하겠습니다.

 위의 그림과 HTML문서의 <style> </style> 부분이 보입니다. 이름클래스에는 이태릭체를 적용하였으며, 소속팀에는 글씨의 굵기의 값을 700으로 주어 글씨를 굵게 하였으며, 반대로 직급부분에는 굴기의 값을 100으로 주어서 글씨를 얇게 해였습니다. 사무실에는 밑줄을 주었으며, 전화 부분에는 취소선을 주었습니다. 여기서 굵기 속성인 “font-weight"의 속성값에 대하여 조금 더 보충 하겠습니다. 굵기의 속성값은 기본이 400이며, 100부터 900까지 단위로 속성값을 줄 수 있습니다. 속성값이 커질수록 글씨의 굵기는 증가합니다. bold를 속성값을 지정할 경우 700의 값을 지정한 것과 같은 효과를 주며 normal은 400의 값과 같은 효과를 주게 됩니다. 그리고 bolder은 "font-size"와 같이 부모엘리먼트의 값을 기준으로 굵기의 값을 한 단계 높여주며, 반대로 lighter 굵기의 값을 한 단계 줄여줍니다. 이상으로 여러분이 HTML문서에서 글꼴에 적용할 수 있는 기본적 속성들에 대하여 알아보았습니다. 그럼 이렇게 알아본 기능을 ”최삼순“인턴사원이 어떻게 활용하였는지 확인해 볼까요?

위의 2개의 그림이 보이시나요? 왼쪽은 “최삼순” 인턴사원이 글꼴 크기와 색깔만을 HTML문서에 적용한 것이고 오른쪽에 보이는 그림은 전체 글꼴을 고딕으로 바꾸었으며, 글꼴의 굵기, 이태릭, 글꼴장식(밑줄)등을 적용한 문서입니다. 오른쪽의 문서가 한결 자연스러워 보이시나요? 그럼 “최삼순” 인턴사원이 어느 정도 성공을 한 것이겠네요.

 2단계 스타일적용문서에 어떠한 속성들을 적용하였는지 HTML 코딩을 한번 보도록 하겠습니다.

 다음으로 A(링크) 엘리먼트의 가상클래스(link, visited)에 속성을 적용했습니다. 위의 2개의 그림을 비교해 볼 때 눈치를 채셨는지 모르겠지만 1단계와 다르게 2단계의 홈페이지 부분의 링크 태그가 다른 글씨들과 마찬가지로 검은색에 밑줄이 없게 만들어졌습니다. 이처럼 HTML에 존재하는 기본 엘리먼트의 속성도 여러분이 원하는데로 바꾸어 줄 수 있습니다. 위의 경우를 보면 HTML의 A(링크)태그는 기본적으로 파란색에 밑줄이 쳐있지만 그 속성을 바꿀수 있다는 것입니다. 여기서 조금 더 들어가 A(링크)태그가 가지고 있는 가상클래스인 link와 visited에 각각 다른 속성을 주었습니다. 아래의 그림과 같이 여러분이 방문한 링크가 기존 HTML 방문한 A(링크)와 다르게 하늘색으로 바뀌는 것을 볼 수 있습니다.