text 문자 꾸미기
자간 설정
letter-spacing: 0px;
word-spacing: 0px;letter-spacing은 글자간 자간설정
word-spacing은 단어간 자간설정으로
모두 음수일수록 촘촘해지고 양수일 수록 넓은 간격을 가진다.
행간 설정
line-height: 1px0>x>1일 경우 좁은 행간, 1>x 일 경우 넓은 행간을 가지며 기본 값은 1
정렬
text-align: left
direction: ltr;text-align은 텍스트가 작성되는 순서를 의미
justify 속성 적용시 모든 줄의 너비가 동일해진다.
text-align-last 속성은 마지막 줄 정렬 방식을 의미하며 마지막 줄의 정렬법만 따로 구분할 수 있다.
direction은 아랍권 언어가 오른쪽부터 작성되듯 작성 시작위치를 의미한다. 기본 속성은 left-to-right인 ltr.
unicode-bidi도 함께 사용하여 bidi-override 혹은 isolate-override 사용시 텍스트를 반대로 출력할 수 있다.
텍스트 + 장식선
text-decoration: none;
text-decoration-line: overline
text-decoration-color: red
text-decoration-style: solid
text-decoration-thickness: 1px텍스트에 선을 그려야할 경우 사용되며 a 태그를 이용하여 텍스트에 링크 연결시 밑줄을 제거하기 위해 사용하는 경우가 있다.
한번에 text-decoration으로 한번에 적용도 가능하며
-line으로 종류, -color으로 색상, -style으로 선의 종류, -thickness로 두께 정보를 나눠 사용할 수도 있다.
text-decoration-line만 필수 입력이며 색상, 스타일, 두께는 선택 옵션이다.
들여쓰기
text-indent: 0px;문단을 구분하기 위해 들여쓰기 할 경우 들여쓸 너비를 정할 때 사용된다.
공백 처리
white-space: nomal요소 내부의 공백 처리 방식으로
nowrap: 줄 바꿈없이 한 줄로 출력
pre:공백 유지, 줄바꿈 기준으로 영역을 무시
pre-wrap: 공백 유지, 줄바꿈은 영역을 벗어나지 않음
pre-line 공백 제거, 줄바꿈은 영역을 벗어나지 않음
영문자 변환
대문자로, 소문자로, 단어 앞머리만 변경할 때 사용할 수 있으며 한글, 숫자에서는 당연히 적용되지 않는다.
text 디자인적 꾸미기
색상 변경
color: black;
background-color: white;설정시 검정색 글씨가 적용. HEX 코드, 색상명 RGB등 웹에서 사용가능한 색상 코드 모두 이용 가능
그림자 효과
text-shadow: x, y, z color;x: 가로 그림자
y: 세로 그림자
z: 흐림효과 (선택)
color: 직전 효과에 대한 색상
2가지 효과 지정시
text-shadow: x y z color, x y z color;처럼 반점으로 구분하여 동시에 지정할 수 있다.
font 설정
폰트 종류
css에 있는 5가지 폰트 종류
serif: 문자 가장자리에 삐침이 존재
sans-serif: 깨끗하게 마감된 모습
monospace: 동일한 폭을 가진 폰트
cursive: 필기체와 유사함
fantasy: 장식용 폰트, 포인트를 준다.
모든 폰트명은 위 5가지 중 하나에 속한다.
font-family: 'word name', Name, value;font-family 속성을 이용하며 두글자 이상으로 이루어지면 묶어주고 아닐경우 그대로 적을 수 있다. value 값은 위 5가지 중 하나.
모든 웹에 실존하는 모든 폰트가 존재할 수 없기 때문에 백업 글꼴 으로 사용한다. 위 경우 word name이라는 가상의 폰트를 먼저 적용하며 적용되지 않을 경우 name 이라는 웹 폰트를 시도하게 된다.
폰트 변화주기
font-style: italic / obliquefont-style 로 폰트의 기울임 등의 변화를 줄 수 있다.
font-variant: small-caps;font-variant를 통해 대문자 출력은 동일하지만 대문자와의 구분이 되도록 설정할 수도 있다.
폰트 두께 변화
font-weight: 100~900 / lighter / bolder / bold숫자 혹은 문자로 구분할 수 있다.
폰트 크기 변화
px, %, em/rem, vw 등 다양한 단위로 크기를 조절할 수 있다. (절대값은 px) 상대값은 이외
한번에 적용하기
font 태그를 통해 한번에 적용할 수 있다.
font: 20px Helvetica, sans-serif;font-size, font-family는 필수 속성 나머지는 선택 속성으로 크기, 폰트명 중 한가지가 누락될 경우 기본 값이 사용된다.
구글 폰트 사용하기
구글 폰트(바로가기)에서 원하는 폰트를 클릭
하단 스타일에서 원하는 스타일을 추가하여
상단 메뉴에서 선택 폰트 보기 클릭시
저장한 폰트 스타일과 적용방법을 확인할 수 있다.
드래그된 부분을 이용하여
head 부분에 외부 스타일 추가로 구글 폰트등 다양한 곳에서 활용할 수 있다.
<head>
<link rel='stylesheet' href="https://fonts.google.com/css?famliy=?"
</head>