[CSS] 웹사이트용 기본 CSS속성 - font(feat. 티스토리)

웹페이지는 사용자에게 보여지는 화면부분(html)과 뒤에서 작동을 지원하는 부분(js, css 등)으로 구성된다고 할 수 있습니다.

html은 웹페이지의 구조, 입력창(input, table) 등의 구성을 합니다.

오늘 설명하고자 하는 CSS는 위치, 간격, 크기, 색 등 화면을 꾸미는 역할을 하는데 비 전문가를 위해 간단하게 주요 항목만 설명하려고 합니다.

 

< 기본 CSS속성 - font >

 

목차(Contents)

 

요즘은 워낙 툴이 좋아서 드래그앤드롭으로 웹페이지 만드는 건 일도 아닙니다.

그래도 티스토리나 네이버 등 블로그를 운영하시는 분들도 많아 간단한 css만 소개하려고 합니다.

페이지 전체를 뜯어 고칠게 아니라면 이 정도로도 충분히 사용할 만 합니다.

 

font

명칭만 봐도 딱 아시겠죠? font는 화면에 보여지는 폰트(글꼴)와 관련된 설정을 다룹니다.

font관련 속성 중에서는 가장 많이 사용하는 아이들입니다.

 

• font-family : 폰트 종류 설정
• font-size : 폰트 크기 설정
• font-style : 폰트 스타일 설정(italic, oblique 등)
• font-weight : 폰트 두께 설정
• color : 폰트 컬러 설정

 

font-family

첫번째로 font-family입니다. 웹에서 폰트가 중요한 이유는 가독성이 필요하기 때문입니다.

보통은 폰트를 웹서버에 올려놓고 사용하는 경우가 많습니다.

그 이유는 폰트파일이 없으면 아무리 개발자가 설정을 해놔도 사용자는 기본폰트로 보이기 때문입니다.

이런 이유로 웹서버에 올려놓고 사용자가 화면 접속시 다운로드하여 지정한 폰트로 화면이 보입니다.

요즘은 웹폰트도 무료로 다양하게 이용이 가능해서 많이 사용하는 추세입니다.

 

사용예시)

 

font-family: 'notokr', sans-serif, 'Noto Sans KR';

 

font-family는 위의 예시처럼 사용합니다. notokr, noto sans kr은 웹서버에 있다고 치고... sans-serif는 기본폰트입니다.

위의 예시처럼 사용하면 제일 먼저 notokr을 적용하고 notokr이 없으면 sans-serif를 적용하는 식입니다.

 

font-size

말 그대로 폰트의 사이즈를 설정합니다. 사용하는 단위는 많이 있지만 보통 px, em 등을 사용합니다.

px은 직접 크기를 지정하는 방식입니다.(ex. font-size: 16px)

em은 css 전체에 기본으로 정해진 폰트사이즈를 1로 보고 1에 비례하여 크기를 정합니다.(ex. font-size: 1.1em)

1.1em은 기본 폰트사이즈에 1.1배를 적용한 크기를 사용한다는 뜻입니다.

%를 사용하기도 하는데 %도 em처럼 비율로 조정할 때 사용합니다.

 

사용예시)

font-size: 12px;
font-size: 0.8em;

 

font-style

font-style은 거의 normal과 italic을 사용합니다.

normal은 일반 글자체이고, italic는 기울임꼴입니다.

 

사용예시)

font-style: normal;
font-style: italic;

• normal일 경우 : 이 font-style은 normal입니다.
• italic일 경우 : 이 font-style은 italic입니다.

 

font-weight

이 속성은 폰트의 두께를 구분하기 위해 사용합니다.

폰트에 따라 설정방법이 다를 수 있습니다만 보통은 normal, bold로 사용합니다.

디테일하게 설정하기 위해서는 100 ~ 900까지의 숫자로 구분하여 지정할 수도 있습니다.

 

사용예시)

font-weight: normal;
font-weight: bold;

font-weight: 100;
font-weight: 400;
font-weight: 900;

 

color

폰트의 색을 지정할 수 있는 속성입니다.

속성은 red처럼 영문으로 직접 지정할 수도 있고, 보통은 색상표를 이용하여 16진수로 지정합니다.

예를 들면 white는 #ffffff, black는 #000000 이렇게 되어 있습니다. #000처럼 줄여서 사용할 수도 있습니다.

색상에 따라 코드를 외울 수 없기 때문에 color cop같은 프로그램을 이용하기도 합니다.

 

사용예시)

color: black;
color: #000000;
color: #000;

 

 

생각보다 내용이 길어졌네요. 여백을 설정할 수 있는 padding, margin도 같이 적으려고 했는데...

분리해서 padding과 margin은 다시 작성할께요.