서체의 지정과 크기 설정[CSS]

[광고 누르면 오늘의 행운 상승!!]

 

• 웹 서체의 이해
  - 서체 사용 이유 : 문서 외형 꾸미기, 문서의 특성 제시, 구조 이해 쉽게 하기 위함
  - 웹은 다양한 서체를 사용
  - 웹 이용자 간의 서체 공유가 원활히 이루어지지않음
  - 운영체제 간에도 다른 서체들을 제시
• 폰트 패밀리(font-family)
  - font-family : 비슷한 모양의 서체를 묶어서 제시
  - 형식 : font-family : (사용할서체),(대안서체1),(대안서체2)

p{
font-family :Helvetica, Arial, sans-serif;
}
font-family에서 지정한 마지막 서체도 없다면 웹 브라우저 기본 서체 사용

• 일반 폰트 패밀리 serif(명조체), sans-serif(고딕체), monospace(고정폭 글꼴), cursive(필기체), fantasy(판타지)
• 한글 폰트 패밀리 설정 한글은 영어와 공통된 서체가 없기 때문에 적절하게 사용해야 한다.

서체 크기 조절

• font-size 속성 : 서체 크기 조절

p{
	font-size : 11pt;
}
//pt(포인트) , pc(파이카) px, %, em, ex

 

절대 크기 값	pt(포인트)	- 가장 흔히 사용하는 서체 크기 - mm, cm, in(인치) 도 사용 가능 - 1in = 72pt
	pc(파이카)	- 12pt = 1pc
상대 크기 값	px(픽셀)	- 모니터 화소 하나를 의미 - 모니터 해상도에 대한 상대 값
	%(퍼센트)	- 부모 요소에 대한 상대적 크기를 수치로 표현 - 100% - 부모 요소의 서체 크기 - 100% 초과, 미만 등으로 설정하여 상대적 크기 설정
	em	- 서체의 크기 설정(서체의 대문자 크기에 대한 비율) - 부모 요소에 대한 상대적 크기를 수치로 표현 - 100% = 1em, 55% = 0.55em, 135% = 1.35em
	ex	- 서체의 소문자 크기 비율 - 한글에는 대소문자가 없기에 크게 의미 없음 - 영문일 경우 정확한 서체 크기를 맞추기 위해 사용

• medium을 기준으로 
  - 위(small, x-small, xx-small) : 점점 더 작게
  - 아래(large, x-large, xx-large) 점점 더 크게
• 이외 smaller, lager 키워드 존재
  - smaller : 부모 요소에 대해 상대적으로 작음
  - lager : 부모 요소에 대해 상대적으로 큼
  - 부모 요소의 서체 크기에 비해 크거나 작아지는 것은
    웹 브라우저의 기본 설정에 따라 차이가 있음

다양한 변형 서체(Italic, Bold, Small cap)

• Italic : 약간 비스듬한 모양의 서체(영문에 자주 사용되는 서체, 한글에서는 잘 사용하지 않음)
  - 설정 방법 : font-style 속성사용 // font-style : italic;
• Bold : 일반 텍스트 보다 굵은 서체
  - 설정 방법 : font-weight 속성 사용// font-weight : bold;
• font-weight 속성

bold	- 해당 서체 bold 타입의 서체로 변환
bolder	- 부모 요소의 두께보다 좀 더 두꺼운 타입의 서체로 변환
lighter	- 부모 요소의 두께보다 좀 더 가는 타입의 서체로 변환
100~900	- 100~900 사이의 100단위의 수치는 서체의 굵기 의미 - 서체 세트에 다양한 굵기의 서체 있을 때 사용
normal	- bold 타입의 서체 일반 타입의 서체로 변환

• Small cap : 알파벳을 사용하는 문자에 해당하는 서체 스타일, 텍스트의 크기로 대소문자 표기 -설정 방법 font-variant 속성 사용 // font-variant : small-caps;

텍스트 스타일 설정

• 텍스트 간격 설정
  - 텍스트 간격 : 글자와 글자간의 간격 또는 단어와 단어간의 간격 의미
• 자간 설정
  - 자간 : 글자와 글자간의 간격
  - 자간 설정 : letter-spacing 속성 사용

a{
   letter-spacing : -0.02em;
}

• 단어 간격 설정
  - 단어 간격 설정 : word-spacing 속성 사용

a{
   word-spacing : 0.2em;
}

• 행간 설정
  - 행간 설정 : line-heght 속성 사용

a{
   line-height : 2em;
}

텍스트 스타일 설정

• 텍스트 정렬

가로정렬	- 왼쪽, 오른쪽, 중앙 절렬 + 양끝 정렬(HTML5 추가( - 가로 정렬 설정 : text-align 속성 사용 - text-align 속성의 속성 값 : left, right, center, justify(양 끝 정렬), auto(기본 정렬) 예) 단락의 텍스트 내용을 중앙 정렬 p{     text-align : center; }
세로정렬	인라인 요소에 적용 - 텍스트 줄 속에서 상대적인 수직 위치 설정
	테이블 셀에 적용 - 텍스트 셀 안에서 텍스트가 상단, 중간, 하단 중 어떻게 정렬될지 설정

• vertical-align : 세로 정렬의 속성 값
• vertical-align : 속성 값
  - top : 위
  - middle : 중간
  - bottom : 아래
  - baseline : 서체의 기본 정렬선 정렬 의미
  - super : 위첨자
  - sub : 아래첨자
  - text-top : 텍스트 상단
  - text-bottom : 텍스트 하단
  ** 수치와%도 가능하다. 하지만 아직까지 대부분의  웹 브라우저에서는 설정이 잘 되지 않음
  
  

컬러

• 웹 색상 코드

16진수 표현	- 16진수 수치를 이용한 색 표현 방법 - 예 : color : #4B0082 - 인디고 색 - 범위 : 00~FF 까지 표현 가능 - 표현 방법 : color : #FF0000 //빨강 초록 파랑
10진수 표현	- 10진수 수치를 이용한 색 표현 방법 - 범위 : 0~255 까지 표현 가능 - 표현 방법 : color : rgb(255,0,0) - 예 : rgb(0,0,0) - 검정색, rgb(255,255,255) -흰색
HSL표현	- 전문적인 그래픽 툴(포토샵 등)에서 사용하는 색을 나타내는 방법 - 색조, 채도, 명조, 색으로 표현 - Hue(색조) : 0~360도 사이 수치 입력 - Saturation(채도) : 0~100% 까지의 퍼센트 단위 수치 입력 - Lightness(명도) : 0~100% 까지 퍼센트 단위 수치 입력 예 : color : hsl(120,100%,25%)-어두운 초록색
색상 키워드	- CSS에서 사용 가능한 색 이름(영어 색 이름이 미리 지정) - 예 : color : red;

• 투명도 표현 -컬러에 투명도 설정 가능
  - 투명도 설정 방법 : 10진수 색상 코드로만 가능
  예) color : rgba(255,0,0,0.5); rgba : RGB속성에 투명도 값 추가
  예) color : hsla(120,100%,25%,0.5); hsla : HSL 속성에 투명도 값 추가 
  투명도 1 : 불투명
  투명도 0 : 투명

• 텍스트 색 지정 -텍스트 색 지정 : color 속성 사용
  
  

h1{
	color : red;
}
h1{
	color : rgb(255,0,0);
}
h1{
	color : #FF0000;
}