[ 코딩 ] css font 속성 알아보기

 

[ 코딩 ] css font 속성 알아보기

 

css 글자 속성

 

 

글자에 적용하는 font 속성에 대해서 알아보자.

 

 

 

font-family : 폰트이름(영문), 대체 폰트;

일단 앞쪽에 폰트이름(영문)부터 보자면 컴퓨터로 다운받은 폰트만 적용이 가능하며, 

다운받아서 설치한 폰트의 영문 이름을 적어주면 사용이 가능하다.

 

뒤쪽에 대체 폰트라고 적은 부분은 앞쪽의 폰트이름(영문)이 적용이 안될 경우 사용할 폰트를 말한다. 

여기에 들어갈 대체 폰트는 정해져 있다. 

sans-serif : 굵기가 균일한 고딕계열 폰트 (나는 보통 요 폰트를 넣어둔다)

serif : 글자 획에 삐침이 있는 바탕체의 폰트

monospace : 폭과 간격이 일정한 폰트

cursive : 손으로 쓴 듯한 필기체의 폰트

fantasy : 개성있는 특이한 모양의 폰트

 

 

정확히 어떤 모양의 폰트인지 궁금하다면 font-family : 대체폰트; 만 적고 글자를 확인해보면 된다. 

 

 

 

font-size : 16(값)px;

글자 크기를 조절 할 수 있다. 

 

 

font-weight: 값;

폰트의 두께를 조절할 수 있다. 

값은 아래와 같이 적을 수 있다.

normal(보통 크기 ), bold(굵은 크기), lighter(부모보다 얇은 폰트 적용), bolder(부모보다 굵은 폰트 적용)

100,200,300,400,500,600,700,800,900(숫자가 높아질수록 폰트의 두께가 굵어진다)

 

 

font-style : italic;

보통 기울임을 줄때 사용한다. 안에 들어가는 값으로는 아래와같다. 

italic(이태릭체로 보여줌), oblique(기울임꼴로 보여줌), inherit(상위 요소의 폰트스타일을 물려받음)

 

 

color: 색상이름;

글자에 색상을 적용한다. 

색상이름이나 색상코드를 넣어주면 된다.

 

 

text-decoration : underline;

글자에 밑줄을 쳐준다.

보통 마우스 오버시 밑줄이 생기도록 효과를 줄때 많이 이용된다. 

 

 

 text-align : center;

글자를 정렬할때 사용한다. 보통 가운데 정렬은 많이 하기 때문에 center를 많이 사용한다. 

그외 left(왼쪽 정렬), right(오른쪽 정렬), justify(왼쪽과 오른쪽열에 맞춰 화면을 늘어뜨림)

 

 

line-height: 값;

글자의 높이를 지정해준다. 

해당 태그의 높이와 동일하게 설정하면 글자가 가운데에 위치하게 적용할 수 있다. 

 

 

letter-spacing : 값;

글자 사이의 간격을 줄 수 있다.

 

 

word-spacing : 값;

단어 사이의 간격을 줄 수 있다. 

 

 

 

폰트 속성 한번에 입력하기

 

font : style weight size / line-height family, family, family;

위에를 한번에 적고 그 외는 아래처럼 하나씩 적어준다. 

color

text-decoration

text-align

letter-spacing

word-spacing

 

 

 

한번에 적는 방법은 한번도 사용해 본 적이 없다. 

못외우겠다. 

 

 

쉽게 외우는 방법을 아시는 분은 저 좀 알려주세요... 

 

 

그리고 font-family에 대한 나의 지식이 너무 부실하다. 

복습하려고 포스팅을 열심히하고 있는데, 

내 글을 읽는 분이 계시다면 부디 다른 포스팅도 보시길 바랍니다...하하.

 

 

이상 내가 공부했던 font 속성에 대한 포스팅을 마친다.