Front_ CSS font-family, 폰트 색상 변경법 예시 코드

 

---

font-family

텍스트를 사용하는 요소들에 사용

p { font-family: ”맑은 고딕”; }
body { font-family: ”맑은 고딕”, 돋움, 굴림; }

 

 

 

@font-face

웹 폰트 추가

웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가

사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식 

구글 웹 폰트를 사용하거나, 웹 폰트를 업로드해 사용할 수 있음

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@font-face{
src:url('BMJUA_ttf.ttf');
font-family: 'JUA';
}

 

 

 

font-size 

글자 크기 조절

일반적으로 px을 사용하지만, 모바일에서 확인하는 경우 디바이스 기준으로

크기가 표시되기 때문에 다양한 디바이스를 고려하여 em을 사용함

단위	설명
em	해당 글꼴의 대문자 M의 너비를 기준으로 크기 조절( 1em == 16px )
ex	해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절
px	모니터에 따라 상대적 크기
pt	일반 문서에서 사용하는 단위

 

 

 

font-weight

글자 굵기 지정

속성 값	설명
normal	기본값
bold | lighter | bolder	굵게 | 원래 굵기보다 더 가늘게 | 원래 굵기보다 더 굵게
100~900 수치	400은 normal, 700은 bold

 

 

 

font-style 

글자 스타일 지정

속성 값	설명
normal	기본값
italic	이탤릭체로 표시

 

 

font 

font-weight, font-style, font-size, font-family 등의 속성을 한꺼번에 묶어 약식으로 표현이 가능

p.txt {
font: italic 12px 돋움; /* 글꼴 스타일, 크기, 글꼴 */
}

 

 

---

color 

글자 색 지정 

색상 값은 16진수, rgb(rgba), hsl(hsla) 또는 색상이름으로 표기 가능

h1 {color:rgb(0,200,0);} /* rgb 값 사용 */
h2 {color:blue;} /* 색상 이름 사용 */
.accent {color:#f00;} /* 16진수 사용 */

 

 

16진수 표기법

#ffff00처럼 #기호 다음에 6자리의 16진수를 쓰는 것이 가장 일반적인 방법 

 

 

 

rgb와 rgba 표기법

rgb(255,0,0) 혹은 rgba(255,0,0,0.5) 로 표기하고, 십진수로 표현

rgba의 a는 불투명도 값을 나타내고, 0에서 1사이 수로 지정 가능. 

 

 

 

hsl과 hsla 표기법

hsl(360, 100%, 0%) 혹은 hsla(360,100%,0%,0.5)로 표현

hue(색상), saturation(채도), lightness(밝기) 를 의미

hsla의 a는 불투명도 값을 나타내고, 0에서 1사이 수로 지정 가능.

 

---

color 

색상 이름 표기법

red, yellow, black, white, blue 등 잘 알려진 색상 이름으로 표시 가능.

 

 

 

색상 추출 방법

구글에서 컬러 피커 검색

컬러캅 (http://colorcop.net/download/)

 

 

 

text-decoration 

텍스트 밑에 줄을 긋거나 취소선 표시

속성값	설명
none	기본 값
underline	밑줄 표시
overline	영역 위로 선 표시
line-through	영역을 가로지르는 선(취소 선) 표시

 

 

 

text-transform

영문자의 대소문자 변환

속성값	설명
none	기본 값
capitalize	첫번째 글자를 대문자로 변환
uppercase	모든 글자를 대문자로 변환
lowercase	모든 글자를 소문자로 변환

 

 

 

letter-spacing, word-spacing 

letter-spacing 속성은 낱 글자 사이 간격을 조절

word-spacing 속성은 단어와 단어 사이 간격을 조절

주로 letter-spacing 사용

 

 

 

text-align 

텍스트 정렬

line-height

문단의 줄 간격을 조절

 

 

 

text-overflow 

white-space: nowrap 으로 지정해서 줄 바꿈 하지 않을 경우 넘치는 텍스트를 처리하는 것

 

 

 

list-style-type 

순서 없는 목록에서 기본적으로 ●을 사용

순서 목록에서 숫자가 기본적으로 붙고, 속성을 이용하여 숫자 스타일 변경 가능

 

list-style-image 

url(이미지경로) 형태로 불릿을 이미지로 변경해서 지정 가능

 

 

---