Younho9 NotesCSS 속성 10. text
❗️ 해당 글은 패스트캠퍼스 - 프론트엔드 개발 강의에서 HTML & CSS, SASS(SCSS) Part의 박영웅 강사님의 강의자료를 정리한 것입니다.
color
문자의 색상을 지정
☝️ 요소의 색상은 background-color
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| 색상 | 문자의 색상을 지정 | rgb(0, 0, 0) |
색상 표현
| 표현 | 의미 | 예시 |
|---|---|---|
| 색상이름 | 브라우저에서 제공하는 색상의 이름 | red , blue , … |
| Hex 색상코드 | 16 진수 색상 (Hexadecimal Colors) | #000000 ~ #ffffff |
| RGB | 빛의 3원색 | rgb(255, 255, 255) |
| RGBA | 빛의 3원색 + 투명도 | rgba(255, 0, 0, .5) |
| HSL | 색상, 채도, 명도 | hsl(120, 100%, 50%) |
| HSLA | 색상, 채도, 명도, 투명도 | hsla(120, 100%, 50%, .3) |
☝️ 색상이름은 브라우저 별로 상이할 수 있으므로, 정확한 색상 값을 위해서는 사용하지 않는 것을 추천함.✌️ 위 표는 색상을 이용하는 모든 속성(property)의 값으로사용할 수 있음.RGBA : Red, Green, Blue, Alpha channelHSLA : Hue, Saturation, Lightness, Alpha channel
text-align
문자 정렬 방식을 지정
| 값 | 의미 | 기본값 |
|---|---|---|
| left | 왼쪽 정렬 | left |
| right | 오른쪽 정렬 | |
| center | 가운데 정렬 | |
| justify | 양쪽 맞춤 |
☝️ direction 속성(텍스트 방향 및 쓰기 방향 지정 / ltr , rtl )의 값에 의해서 text-align 속성의 ’기본값’이 변경될 수 있다.✌️ 일반적으로 left 가 기본값으로사용된다.
text-decoration
문자의 장식(line)을 설정
| 값 | 의미 | 기본값 |
|---|---|---|
| none | 선 없음 | none |
| underline | 밑줄을 지정 | |
| overline | 윗줄을 지정 | |
| line-through | 중앙 선(가로지르는)을 설정 |
text-indent
(첫 번째 줄의) 들여쓰기를 지정
☝️ 음수 값을 사용할 수 있다. 음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기) 된다.
div {text-indent: -10px;}
div {text-indent: -10px;}
background: url(""); 로 이미지 삽입 시 alt 입력법
<img src="이미지 링크" alt="대체 텍스트">
<img src="이미지 링크" alt="대체 텍스트">
HTML의 이미지 태그를 사용시에는 이렇게 alt를 사용해 대체 텍스트를 입력할 수 있다 .
그런데 CSS의 background: url(""); 속성을 사용 시에는 어떻게 대체 텍스트를 입력할 수 있을까?
<div class="class-name">대체 텍스트</div>
<div class="class-name">대체 텍스트</div>
.class-name {width: 100px;height: 100px;text-indent: -9999px;background: url("이미지 링크");}
.class-name {width: 100px;height: 100px;text-indent: -9999px;background: url("이미지 링크");}
☝️ HTML 요소의 내용에 대체 텍스트를 입력하고 text-indent: -9999px; 로 텍스트를들여쓰기하면 ’명시적’으로 텍스트를 보이지 않게 하겠다는 의미로 사용가능하다.
letter-spacing
문자의 자간(글자 사이 간격)을 설정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | 단어 사이의 일반 간격 | normal |
| 단위 | px , em , cm 등 단위로 지정 |
☝️ normal 은 단위로 보면 0 에 해당하고 폰트마다 다르게 보일 수 있다.음수 값도가능하다.
word-spacing
단어 사이(띄어쓰기)의 간격을 설정
속성 값
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | 단어 사이의 일반 간격 | normal |
| 단위 | px , em , cm 등 단위로 지정 |
☝️ normal 은 마찬가지로 단위로 보면 0 에 해당하는데, 띄어쓰기의 너비가 0 이라는 뜻이 아니라 ‘기본 띄어쓰기 너비 + 0’ 이라는 뜻이다
Reference
패스트캠퍼스 - 프론트엔드 개발 강의 - HTML & CSS, SASS(SCSS) Part by ParkYoungWoong