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 속성을 이용한다.
'코린이 개념잡기 > CSS' 카테고리의 다른 글
| CSS 선택자 (0) | 2023.03.14 |
|---|---|
| CSS 색상, RGB, 16진법 표기 (0) | 2023.03.14 |
| display (0) | 2023.03.14 |
| 요소의 위치를 정하는 속성 (Position) (0) | 2023.03.14 |
| css3의 기능(셀렉터, 박스모델), 박스모델(마진, 패딩, 경계선) (0) | 2023.03.12 |
