QQyukim.dev
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 45일차입니다!
오늘은 14번째 커리큘럼 학습을 마쳤습니다! 이제 텍스트 관련 CSS는 잘 다룰 수 있길 바라며 😎
미션이 끝날 때까지 CSS는 마스터하고 싶었는데 남은 교육 과정을 보니, 한 1~2주는 지나야 CSS 파트가 끝날 것 같더라고요. 😂
안타깝지만 50일 미션이 끝난 뒤에도 매일 꾸준히 강의를 들어서 최종 미션까지는 CSS를 마스터하는 걸로 다짐합니다!
오늘은 06. color, 색상표현법 / 07. text-align / 08. text-decoration / 09. text-indent / 10. letter-spacing, word-spacing 을 공부했습니다.
◾ color: 문자의 색상을 지정 (↔ background-color: 요소의 색상을 지정)
◾ 속성 값 ⬇
값
의미
기본값
색상
문자의 색상을 지정
rgb(0, 0, 0) ➡ 검정색
◾ 색상 표현 ⬇
표현
예시
색상 이름
브라우저에서 제공하는 색상 이름 (사용 권장 ❌)
red, blue
Hex 색상 코드
16진수 색상 (Hexadecimal Colors)
#000000, #ffffff
RGB
빛의 삼원색
rgb(255, 255, 255)
RGBA
빛의 삼원색, 투명도
rgba(255, 0, 0, .5)
HSL
색상, 채도, 명도
hsl(120, 100%, 50%)
HSLA
색상, 채도, 명도, 투명도
hsla(120, 100%, 50%, .3)
◾ 문자 정렬 방식 지정
left
왼쪽 정렬
left가 일반적으로 기본값임
right
오른쪽 정렬
.
center
가운데 정렬
justify
양쪽 맞춤 (매 줄 띄어쓰기 여백이 달라짐)
<br> 태그 사용하지 않은 2줄 이상의 문장에 적용됨
✨ direction 속성(텍스트 방향 및 쓰기 방향 지정 / ltr, rtl)의 값에 의해서 text-align 속성의 '기본값'이 변경될 수 있음
◾ 문자의 장식(line)을 설정
none
선 없음
underline
밑줄 지정
overline
윗줄 지정
line-through
중앙선(가로지르는) 지정
◾ (첫 번째 줄의) 들여쓰기 지정
➡ 음수 값 사용 가능, 음수 값을 사용하면 내어쓰기가 지정됨
➡ 이 때, 내어쓰기는 글자를 화면 밖으로 밀어내는 용도로 자주 쓰임
◽ background 이미지에 대한 내용(텍스트)가 있을 때, 이를 text-indent: -9999px; 을 사용하여 화면 밖으로 날림
➡ background 태그는 image 태그와 달리 alt(대체 텍스트) 속성이 없기 때문에 이렇게 사용함
◾ 문자의 자간(글자 사이 간격)을 설정
normal
단어 사이의 일반 간격
➡ 폰트마다 조금씩 다르지만 보통 0에서 시작
➡ 이 때 0 값이란, 기본 자간 크기 + 0 을 말함
단위
px, em, cm, ...
◾ 단어 사이(띄어쓰기)의 간격을 설정
➡ 이 때 0 값이란, 기본 띄어쓰기 크기 + 0 을 말함
강의 링크: https://bit.ly/3m0t8GM