#font-size #background-color #font-family

CSS Style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들이다. 이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여한다. 색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용한다.

font 색상 변경

span {
	color: red;
	/* 혹은 */
	color: rgba(255, 0, 0, 0.5);
	/* 혹은 */
	/* 16진수 표기법으로 가장 많이 사용된다. */
	color: #ff0000;
}

font 사이즈 변경

 #wrapper {
	font-size: 16px;
}

#wrapper > div {
	font-size: 2em; /* 16px의 두 배인 32px이 나오게 된다. */
}

배경색

span {
	background-color: #f00;
	/* background-image, position, repeat 등의 속성이 있다. */
	background: #0000ff url("../background.png") no-repeat center top; /* 한 줄 정의 가능 */	
}

글씨체/글꼴

span {
	font-family: "Gulim";
	font-family: monospace;
}

웹 폰트

웹폰트는 브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드 받아 사용할 수 있는 방법이다. 다양하고 예쁜 폰트들을 웹폰트로 사용할 수 있긴 하지만 다운로드를 받아야 한다는 단점이 있음. 다운로드 시간이 오래 걸리게 되면 화면에 노출되는 시간이 느려져 오히려 사용자에게 불편함을 느끼게 할 수도 있다. 또한 다양한 해상도에서 깨지는 문제도 발생할 수 있다.

웹폰트에는 수많은 종류가 있다. 대표적으로 구글 웹폰트가 있으며 최근에는 다양한 크기에서 품질을 유지하는 벡터 방식의 아이콘 웹폰트도 등장했다. (unicode 영역 중 Private Use Area (PUA) 영역을 활용해서 제작) 또한 웹폰트 방식말고, 기본 unicode를 사용해서 간단한 아이콘을 표현하는 것도 가능하다. 아래 unicode를 사용한 HTML 코드를 참고하자

<div>안녕하세요 &#x263a;</div> //☺  웹 화면에는 웃음 표시가 표현되는 코드입니다.