CSS 텍스트관련 스타일

글꼴 관련 스타일

font-family 속성

웹 문서에서 사용할 글꼴 지정을한다.

기본형:p { font-family:<글꼴 이름>[,<글꼴이름>,<글꼴 이름>]
}

font-size 속성

사용할 수있는 값: 절대크기, 상대크기, 숫자, 백분율
px단위 : 폰트 크기가 고정된다.
em단위 : 사용하는 글꼴의 대문자 M을 기준으로한다. 반응형 웹 디자인을 만들때 활용

기본형: p{
font-size: 120px;
}
p{
font-size: 2.0em;
}
1em = 16px

font-weight속성

글자 굵기를 조절하는 속성이다.
100~ 800
nomal: 400
bold: 700

기본형: p{
font-weight: bold;
}

텍스트 스타일

text-align 속성

텍스트 정렬 방법을 지정한다.

left : 왼쪽 정렬
right: 오른쪽 정렬
center: 가운데 정렬
justify: 양쪽 정렬
기본형:p{
text-align: center;
}

배경 색과 배경 이미지

background-color 속성

웹 문서의 요소에 배경색 지정한다.
배경 색은 상속되지 않는다.

기본형: 태그{
background-color:blue;
}

background-clip 속성

배경을 어디까지 적용할지 지정한다.

border-box:  가장 외곽인 테두리까지 적용한다.
padding-box: 테두리를 뺀 패딩범위까지 적용한다.
content-box: 내용 부분에만 적용한다.
기본형: 태그{
background-clip: border-box;
}

background-image 속성

배경 이미지 파일 경로를 지정한다.

기본형:body{
background-image:url(파일경로);
}

배경이미지 반복 여부 및 반복 방향 지정할수있다.

repeat:   화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복한다.
repeat-x: 창 너비와 같아 질때까지 배경 이미지를 가로로 반복한다.
repeat-y: 창 높이와 같아 질때까지 세로로 반복한다.
no-repeat:한번만 표시한다.
기본형:body{
background-repeat: repeat;
}

background-size 속성

배경 이미지 크기 조절한다.

auto: 원래 배경 이미지 크기만큼 표시된다.
contain: 요소 안에 배경 이미지가 다 들어오도록 확대/축소한다.
cover:   배경 이미지로 요소를 모두 덮도록 확대/축소한다.
px: px로 조절가능하다.
백분율: 백분율로 조절가능하다.
기본형:div{
background-size: 150px 200px;
}

background-position 속성

배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정한다.

수평 위치: left, center, right, 백분율, px
수직 위치: top, center, bottom, 백분율, px
기본형:div{
background-position: 수평위치 수직위치;
}

background-attachment 속성

배경 이미지를 고정하는 속성이다.

기본형:div{
background-attachment: fixed;
}