CSS 텍스트 효과, 배경(background)

CSS 텍스트 효과

속성 및 속성 값	의미
font-weight : bold, normal 등	글자 두께
font-size : 16px, 20px 등	글자 크기
font family : ‘arial'	글자 폰트
color : red, blue, #fff	글자 색깔
line height : 150%, 20px 등	줄 간격
text align : center, left 등	글자 정렬
text decoration : underline, none 등	글자 장식 underline: 밑줄, none
letter spacing : 5px	문자 사이의 간격
word spacing : 3px	단어 사이의 간격
text-shadow : 1px 1px 2px #444	글자 그림자
text-indent :	들여쓰기, 내어쓰기 값이 양수면 들여쓰기 음수면 내어쓰기
list-style-image :	ul, ol 등 목록의 마커를 사용하는 속성 url을 등록하여 사용 가능

 

배경(background)

▶background-color : 배경색상

▶background-image : 배경 이미지 지정

▶background-position : 배경 이미지의 위치를 지정

▶background-repeat : 배경 이미지를 반복할지 여부

▶background-size : 배경 이미지의 크기를 지정

background-imege 속성 값	효과
none	기본값, 이미지를 배경으로 사용하지 않음
url()	이미지의 url을 입력
initial	기본값으로 설정
inherit	부모요소로부터 상속받아 속성 값을 이어감

 

background-repeat 속성 값	효과
repeat	기본값. 가로, 세로를 반복함.
repeat-x	가로 방향만 반복
repeat-y	세로 방향만 반복
no-repeat	반복하지 않고 한번만 사용
initial	기본값으로 설정
inherit	부모요소로부터 상속받아 속성 값을 이어감

 

background-position 속성 값	효과
left, right, center, top, bottom, %, px 등	배경의 위치가 해당 위치로 이동
initial	기본값으로 설정
inherit	부모요소로부터 상속받아 속성 값을 이어감

 

background-attachment 속성 값	효과
scroll	기본값. 배경이 스크롤에 영향을 받지 않음
fixed	화면에 고정되어 배경이 움직이지 않음. But, 스크롤 되면서 우리 눈에는 이동되는 것처럼 보임

 

background-size 속성 값	효과
auto	기본값. 이미지 크기대로
cover	비율을 유지하면서 가로를 꽉 채웁니다. (위 아래는 잘릴 수 있다.)
contain	비율을 유지하면서 세로를 꽉 채웁니다. (양 옆에 빈 공간이 있을 수 있다.)

 

▶한번에 사용 하려면 “color→image→repeat→position→attachment” 순서로 작성하며, 속성마다 띄어쓰기로 구분 (부여하지 않는 속성은 생략)

EX) p {background:red url('sample.jpg') no-repeat x10 y10 fixed;}

단! background-size는 한번에 사용되지 않는다.

 

IMG 태그 vs background

▶해당 콘텐츠 영역에서 중요한 의미를 가지는 이미지의 경우 img 태그를 사용한다. 그래야 alt 속성을 통해 스크린 리더기에서도 이미지를 접근 할 수 있으니까!

▶중요한 이미지이기 보다는 디자인을 위한 그림을 넣어야 할 때 background 속성을 이용한다.