font-family 속성 : 웹 문서에서 사용할 글꼴 지정
구글 웹 폰트 사용하는 방법!!
HTML & CSS : 구글 웹 폰트 사용하기
CSS에서 구글 웹 폰트를 지정하여 사용하는 방법이다. 구글 폰트의 주소는 포스트 하단에 추가하였다. 구글 폰트 사이트로 들어간다. 여기서 원하는 글꼴(폰트)를 고른 후, 선택한다. 나는 Nanum Bru
hhahee.tistory.com
되도록 구글 웹폰트를 사용하여 글꼴 설정하는 것이 좋다.
font-size 속성
글자 크기 조절하는 속성
절대크기, 상대크기, 숫자, 백분율로 값 지정 가능
기본 값은 상대크기의 medium 값이다.
px와 em 단위를 많이 사용한다.
px 단위를 사용하면 폰트 크기가 고정된다.
em 단위는 16px가 기준으로 0.5em=0.5배(16px의), 2em=2배(16px의)로 생각하여 설정하면 된다.
font-weight 속성
글자 굵기를 조절하는 속성으로
normal, bold, bolder, lighter, 100, 200, 300, 400(normal), 500, 600, 700, 800, 900 의 속성값이 있다. (숫자 크기는 작을수록 가늘고, 클수록 굵다)
font-variant 속성
대문자를 소문자 크기에 맞춰 작게 표시
속성값으로는 normal, small-caps(작은 대문자로 표시) 가 있다.
font-style 속성
이탤릭체로 표시하는 속성
속성값은 normal, italic
font 속성
글꼴 관련 속성들을 한꺼번에 묶어서 표기하기도 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>글꼴 스타일</title>
<style>
p.txt {
font: italic 12px/24px 돋움; /* 글꼴 스타일, 크기, 줄간격, 글꼴 */
}
</style>
</head>
<body>
<p class="txt">여러 요소가 함께 사용된 웹 문서 안에서 텍스트가 눈에 띄게 하려면 내용에 맞는 글꼴과 글자
크기, 그리고 글자색을 선택하는 것이 중요합니다.</p>
<p>이럴 때 사용할 수 있는 것이 글꼴 속성입니다.</p>
<p style="font: caption">[font:caption] 캡션에 어울리는 글꼴 스타일</p>
<p style="font: icon">[font:icon] 아이콘에 어울리는 글꼴 스타일</p>
<p style="font: menu">[font:menu] 드롭다운 메뉴에 어울리는 글꼴 스타일</p>
<p style="font: message-box">[font:message-box] 대화 상자에 어울리는 글꼴 스타일</p>
<p style="font: small-caption">[font:small-caption] 작은 캡션에 어울리는 글꼴
스타일</p>
<p style="font: status-bar">[font:status-bar] 상태표시줄에 어울리는 글꼴 스타일</p>
</body>
</html>
color 속성
글자 색 지정
#16진수 값, rgb(red, green, blue), 색상이름
으로 나타내 사용 가능
text-decoration 속성
텍스트에 밑줄이나 가로지르는 줄 표시
텍스트 링크의 밑줄을 없앨 때에도 사용
속성값은 none, underline, overline, line-through 가 있다.
text-transform 속성
영문 텍스트의 대문자나 소문자를 바꾸는 속성이다.
속성값으로 none, capitalize(첫글자만 대문자), uppercase, lowercase, full-width(가능한 모든 문자를 전각 문자로 변환)이 있다.
text-shadow 속성
텍스트에 그림자 효과
text-shadow: 가로거리 세로거리 번집정도 색상;
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>text-transform</title>
<style>
h1 {
font-size: 100px; /* 글자 크기 */
font-family: "Arial Rounded MT"; /* 글꼴 */
}
.shadow1 {
color: orange; /* 글자색 */
text-shadow: 1px 1px; /* 텍스트 그림자 */
}
.shadow2 {
text-shadow: 5px 5px 3px #f00; /* 텍스트 그림자 */
}
.shadow3 {
color: #fff; /* 글자색 */
text-shadow: 7px -7px 5px #000; /* 텍스트 그림자 */
}
</style>
</head>
<body>
<h1 class="shadow1">HTML5</h1>
<h1 class="shadow2">HTML5</h1>
<h1 class="shadow3">HTML5</h1>
</body>
</html>
white-space 속성
공백 처리 방법 지정
속성값은 normal, nowrap(연속하는 공백을 하나로 처리, 줄바꿈없음), pre, pre-line, pre-wrap 이 있다.
letter-spacing, word-spacing 속성
글자간 간격, 단어간 간격
5px가 기본이다.
direction 속성
텍스트 입력 방향 지정
속성값 ltr(left to right), rtl(right to left)
text-align 속성
텍스트 정렬 방법
속성값으로는 start, end, left, right, center, justify(양쪽정렬), match-parent가 있다.
text-indent 속성
문단의 첫 글자를 얼마나 들여쓸지 지정
text-indent: 크기;
text-indent: 백분율;
line-height 속성
문단의 줄 간격 지정
글자크기의 배수로 속성값 지정.(단위 없음)
일반적으로 1.6이 가장 예쁘다고 알려졌으며, 가독성을 고려하면 1.8이 적당하다.
text-overflow 속성
지정한 영역을 벗어나는 텍스트를 어떻게 할지 지정하는 속성
속성값이 hidden 이면 넘치는 부분을 감추고,
visible이면 보여준다.
clip : 넘치는 텍스트 잘라버리기
ellipsis : 말줄임표로 잘린텍스트가 있다고 표시
list-style-type 속성
불릿 관련 속성
list-style-image: url('이미지 상대경로'); 하면 해당 이미지로 불릿이 설정됨
list-style-position : inside | outside; -> 불릿이나 번호를 들여쓰거나 내어쓸 때 사용
폰트 관련은 <span class="~~~">를 사용하여 묶어준 후, css에서 클래스선택자로 설정해주는 것이 좋다.
출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)
사진 출처 : Pixabay
'HTML5 & CSS3' 카테고리의 다른 글
| HTML & CSS #08 : CSS 박스 모델 (0) | 2022.12.13 |
|---|---|
| HTML & CSS #07 : 색상과 배경 (0) | 2022.12.13 |
| HTML & CSS #05 : CSS 기본 (0) | 2022.12.13 |
| HTML & CSS : 산술연산 계산기 만들기 (0) | 2022.12.13 |
| HTML & CSS : 버튼 만들어보기 실습 (0) | 2022.12.13 |
댓글