텍스트 스타일

🔔 텍스트 크기 : font-size

font-size속성은 텍스트 크기를 조절할 때 사용한다.

텍스트 크기는 모든 브라우저에서 16px을 기본값으로 설정되어 있다.

단위는 px같은 절대 단위 고정 값을 주로 사용하고 반응형 제작 시 상대에 따라 변화 시켜줄 수 있는 rem, vw, vh를 사용할 수 있다.

<style>
	body {
		/*font-size: 10px;*/
		font-size: 62.5%; /* 10px */
	}
	p:first-child {
		font-size: 20px;
	}
	p:nth-child(2) {
		font-size: 2rem; /* body의 초기 폰트크기에 따라 변화됨, 20px */
	}
	p:last-child {
		font-size: 3vw; /*브라우저 너비값에 따라 지속적으로 달라짐*/
	}
</style>

<body>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</body>

🔔 글자 스타일 : font-style

font-style속성은 글자 스타일을 조절할 때 사용하며, 기본스타일, 이탤릭체, 기울어진 스타일로 설정할 수 있다.

속성값으로는 normal, italic, oblique가 있다.

italic, oblique의 스타일은 차이가 없으며, 웹에서는 주로 italic 을사용한다.

em {
	/*글자 스타일 기본값, 기울어진 모습을 기본 형태로 만들어준다.*/
	font-style:noraml;
}

div {
	/*글자 모양을 이탤릭체로 표시해준다.*/
	**font-style : italic**
}

p {
	/*본래 글꼴에서 기울어진 모양으로 표시해준다.*/
	**font-style : oblique;**
}

🔔 글자 색 : color

color 속성은 텍스트 색상을 지정할 때 사용한다.

color색상 이름, HEX(#ff0000 16진수), rgb(0, 0, 0), rgba(0, 0, 0, 0.5), hsl등의 속성 값으로 사용할 수 있다.

rgb()와 rgba()의 차이는 투명도를 적용하는 것으로, a는 투명도 즉, opacity값을 추가하면 된다.

디자인 프로그램에서 작업 시 opacity값을 50% 되어 있다면 rgba값에서 0.5 또는 .5로 표기할 수 있다.

<style>
	p:first-child {
		color:blue;
	}
	p:nth-child(2) {
		color:#ff0000;
	}
	p:last-child {
		color:rgba(0, 0, 0, 0.5);	
	}
</style>

...
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>