폰트와 색으로 장식하기

폰트와 색으로 장식하기

- 대부분의 컴퓨터에서는 특정한 폰트들만이 설치되며, 따라서 사용할 폰트를 선택하는데 있어서 신중해질 필요가 있다.

 

폰트 패밀리(font family)란?

일반적인 특성을 공유하는 폰트의 집합체를 담고 있으며, 산세리프(snas-serif), 세리프(serif). 모노스페이스(monospace), 흘림체(cursive) 그리고 판타지(tantasy)의 총 5개가 존재한다.

 

※ 폰트들은 컴퓨터에 따라서 다르게 보일 수 있다. 사실 사용 가능한 폰트들의 집합은 컴퓨터에 실치 된 폰트와 어플리케이션뿐만 아니라 운영체제에 따라 바뀔 수 있다. 따라서 컴퓨터에 있는 폰트들은 사용자들의 컴퓨터에서 사용 가능한 폰트들과 다를 수 있다는 점을 기억해야한다.

 

css는 font-family, font-weight, font-size, font-style 같은 속성들을 포함하여 폰트가 보이는 모습을 제어한다.

 

font-size 속성을 사용하여 폰트의 크기를 제어 할 수 있다.

px, em, %혹은 키워드로 명시 한다.

폰트 크기를 픽셀로 명시하는 것은 문자의 높이를 구성하는데 얼마나 많은 픽셀이 사용되는지 브라우저에가 말해주는 것이며,

키워드를 사용하는 것은 body 규칙에 있는 기본 폰트 크기로 설정하는 것이다. 따라서 사용자들이 텍스트를 좀더 크게 혹은 작게 만들기를 원한다면 모든 브라우저에서 폰트 크기를 조절이 가능하다.

예) body { font – size: 14px; }

body {

/* font-family: 폰트, 폰트, 폰투, 폰트패밀리;

1. Serif(명조체) : times,  궁서체, 바탕체

2. Sans-serif(고딕체) : Arial, 굴림체, 돋움체, 맑은고딕

3. Monospace : Courier, Monaco

4. Cursive(흘림체) : Comic Sans

5. Fantasy : impact

*/

  font-family:     Verdana, Geneva, Arial, sans-serif;

  

  /* font-size : 폰트의 높이

  1. px : 픽셀

  2. % : 기존의 크기를 기준으로 설정

  3. em : 배수, 기존의 크기를 기준으로 설정

  4. 상수 : xx-small ~ xx-large

  => body에서 폰트의 기본 크기 값을 설정한다. 가능하면 상수값으로 설정한다.

  => body의 기본 값을 기준으로 나머지 엘리먼트들은 % 또는 em으로 설정한다.

  */

  font-size:       small;

  color: blue;

  background-color: gray;

}

h1 {

  font-size:       170%; 

}

h2 {

  font-size:       1.3em;

}

#p1{

color: red;

border: 1px solid green;

}

/* italic : 폰트에서 제공하는 기움림체 사용

   oblique : 폰트에서 기움림채가 없더라도 소프트웨어적으로 처리. 폰트가 미려하지 않다. 계단현상 발생 

   */

blockquote {

font-family: Didot;

  font-style:      italic;

}

 

color 속성을 사용하여 텍스트에 색을 추가한다.

css는 검정색, 흰색, 빨강, 파랑, 녹색을 포함한 17가지의 미리 정의도니 색을 가지고 있다.

색의 비율이나 0에서 255까지의 숫자 값, 혹은 hex 코드를 사용하여 사용자가 원하는 색을 명시 할 수 있다.

예) body { font-weigth: bold; }

/* color (빛의 삼원색 사용 Red, Green, Blue) R B G

1. rgb(255,255,255)

2. rgb(20%, 30%, 100%)

3. #ffffff

4. #ffffffff (투명도 포함)

*/

h1, h2 {

  font-weight:     normal;

  color:           #ff0000;

  border-bottom:   thin dotted #888888;

  background-color: rgba(255,255,255,0.5); a는 투명도이다. 0~1사이로 소수점으로 지정할 수 있다.

  

}

 

 

 

 

 

 

text-decoration 속성을 사용하여 텍스트에 더 많은 스타일을 추가 한다

밑줄이나 윗줄, 가운데 줄과 일부 브라우저에서 동작하는 깜박거리는 텍스트 같은 텍스트에 장식적인 효과를 추가하는 역할을 한다.

예) body { text-decoration: underline; }

예) em { text-decoration: line-through; }

예) em { text-decoration: underline overline; }

원하지 않는 텍스트 데코레이션을 상속받았다면 속성값을 none으로 해서 장식을 하지 않을 수 있다.

예) em { text-decoration: none; }

 

- M I N -