1. 텍스트 관련 속성
1) font-family
요소를 구성하는 텍스트의 글꼴을 정의한다
글꼴명을 속성값으로 지정한다
여러 개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다
ex) *{
font-family: Times, monospace, serif;
}
→ Times를 우선 지정하되, 지원되지 않을 경우 monospace를 지정한다
2) font-size
수치와 단위를 지정해 글자의 크기를 정의할 수 있다
2-1) px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
2-2) rem : <html> 태그의 font-size에 대응하는 상대적인 크기
2-3) em : 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기
ex) span{ font-size: 16px; }
span{ font-size: 2rem; }
span{ font-size: 1.5em; }
2. 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 문서</title>
<style>
/* *{ font-family: serif, monospace; } 폰트 사이즈 */
html{ font-size: 12px; }
/* h1{ font-size: 16px; }
p{ font-size: 32px; } */
h1 { font-size: 2rem; }
p{ font-size: 1rem; }
span{ font-size: 2em; }
</style>
</head>
<body>
<h1>아무 내용</h1>
<p>반갑습니다<span>호호</span></p>
</body>
</html>
3. 텍스트 관련 속성
3) text-align
블록 내에서 텍스트의 정렬 방식을 정의한다
미리 정의된 키워드 값을 지정한다
3-1) left/right : 왼쪽 또는 오른쪽 정렬한다
3-2) center : 가운데 정렬한다
3-3) justify : 양끝 정렬한다(마지막 줄 제외)
ex) p{ text-align: right; }
4) color
텍스트의 색상을 정의한다
다양한 방법으로 색상을 지정할 수 있다
4-1) 키워드 : 미리 정의된 색상별 키워드를 사용한다 ex) red, blue
4-2) RGB 색상 코드 : # + 여섯자리 16진수 값 형태로 지정한다
4-3) RGB 함수 : Red, Green, Blue 의 수준을 각각 정의해 지정한다
ex) span{ color: red; }
span{ color: #FF0000; }
spna{ color: rgb(100%, 0%, 0% }
4. 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 문서</title>
<style>
p{
text-align: justfy;
/* color: teal; */
/* color : #FF00FF; */
color : rgb(100%, 0%, 0%);
}
</style>
</head>
<body>
<p>
결코 시간이 멈추어 질순 없다 ye~!
무엇을 망설이나 되는 것은 단지 하나 뿐인데
바로 지금이 그대에게 유일한 순간이며
바로 여기가 단지 그대에게 유일한 장소이다
환상 속에 그대가 있다
모든 것이 이제 다 무너지고 있어도
환상 속에 아직 그대가 있다
지금 자신의 모습은 진짜가 아니라고 말한다
</p>
</body>
</html>
Back-End Developer