텍스트 관련 속성
- font-family : 글꼴 정의
- font-size : 글자 크기 정의
- text-align : 정렬 방식 정의
- color : 글자 색상 정의
font-family
요소를 구성하는 텍스트의 글꼴을 정의한다.
쉼표를 통해 우선순위를 정할 수 있다.
[style.css]
.goodbox{
font-family: monospace, serif, Georgia;
}monospace 폰트를 지정하고 지원하지 않으면 serif를 지정하라는 의미
[index.html]
<body>
<div>
<h2 class="goodbox">Hello world!</h2>
</div>
</body>font-size
글자 크기를 지정할 수 있다.
여러 단위를 설정할 수 있다.
px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
rem : 태그의 font-size에 대응하는 상대적인 크기
em : 부모태크(상위태그)의 font-size에 대응하는 상대적인 크기
[style.css]
.textSizePx{
font-size: 12px;
}
.textSizeRem{
font-size: 3rem;
}
.textSizeEm{
font-size: 2em;
}[index.html]
<body>
<div>
<div class="textSizePx"">가나다라마바사</div>
<div class="textSizeRem"">가나다라마바사</div>
<div class="textSizeEm"">가나다라마바사</div>
</div>
</body>
- rem은 html 태그의 크기에 배수로 크기가 커진다
- em은 상위태그의 크기에 배수로 크기가 커진다.
text-align
블록 내에서 텍스트의 정렬 방식을 지정한다.
lefr : 왼쪽으로 정렬
right : 오른쪽으로 정렬
center : 가운데 정렬
justify : 양끝에 맞게 정렬(마지막줄 제외)
[style.css]
.textAlignLeft{
text-align: left;
}
.textAlignRight{
text-align: right;
}
.textAlignCenter{
text-align: center;
}
.textAlignJustify{
text-align: justify;
}[index.html]
<body>
<div>
<div class="textAlignLeft">가나다라마바사</div>
<div class="textAlignRight">가나다라마바사</div>
<div class="textAlignCenter">가나다라마바사</div>
<div class="textAlignJustify">가나다라마바사</div>
</div>
</body>
color
텍스트의 색상을 지정한다.
키워드 : 미리 정의된 색상별 키워드를 사용한다.
RGB 색상 코드 : # + 6자리 16진수 값 형태
RGB 함수 : Red, Green, Blue 의 비율을 각각 지정한다.
[style.css]
.textColorKeyword{
color: red;
}
.textColorCode{
color : #00ffd5
}
.textColorFunc{
color : rgb(50%,20%,30%)
}[index.html]
<body>
<div>
<div class="textColorKeyword">가나다라마바사</div>
<div class="textColorCode">가나다라마바사</div>
<div class="textColorFunc">가나다라마바사</div>
</div>
</body>
좋은 개발자가 되고싶은