[HTML5, CSS3] 텍스트 style 알아보기 (font-size, color, font-family)

안녕하세요. 오늘은 텍스트 style 관련 포스팅 하겠습니다.

 

기본적으로 웹에서 텍스트를 출력을 할때, 텍스트의 크기, 색상, 글꼴 등을 설정 할수 있는데요,

 

font-size : 폰트 크기(기본적으로 px값을 이용하며, 반응형의 경우 %값을 설정할 수 있습니다.

color : 폰트 색상 (black, red 처럼 css에서 바로 적용 가능한 색상이 있지만 기본적으로 #000000 이런 색상표 형식을 이용해서 적용합니다.

font-family : 글꼴 설정(보통 웹폰트를 이용하기도 하고 글꼴 파일을 올려서 적용하기도 합니다.)

line-height : 행간

letter-spacing : 자간

font-weight: 폰트 굵기

text-align : 텍스트 정렬 (left, center, right)

 

보통은 이정도만 기억하고 계시면 텍스트 작성하시는데에는 어려움이 없으실 겁니다.

 

<p>텍스트 테스트<p>

p 태그에 있는 글을 수정하려면 p태그에 style 값을 수정해주면 됩니다.

 

p {
font-size:14px;
color:#ff0000; 
font-weight:bold; //700으로 사용가능 기본 font-weight값은 400입니다.
line-height:18px; // %값으로 사용할 수 있습니다.
font-family:"Noto Sans KR"; // ""으로 감싸 줍니다.
}

이렇게 설정하면

 

스타일 주기 전

 

스타일 적용 후

기존 텍스트에 스타일 값에 맞게 적용됩니다.