✍🏻 텍스트와 관련된 스타일을 지정하는 속성 정리
글꼴은 폰트와 관련된 스타일이면 텍스트 스타일은 글자와 문단에 사용하는 스타일이다.
📄 글자와 관련된 스타일을 지정하는 속성을 정리한 글
📖 텍스트와 관련된 속성
📌 글자색 지정 : color
글자색을 바꿀때 사용하는 속성이다. 웹 문서에서 색상을 사용하는 방법은 16진수, hsl, rgb로 표현할 수 있다.
1️⃣ 16진수로 표현 : #RRGGBB
- #을 사용하여 6자리로 표현
- RR자리는 빨간색, GG자리는 초록색, BB자리는 파란색의 양 표시
- 00부터 ff까지 16진수로 표현
- #0022ff 처럼 2자리씩 중복되면 #02f로 줄여서 표기가 가능
2️⃣ hsl로 표현 : hsl('각도', '채도(%)', '명도(%)')
- 각도 : 0은 빨간색, 120은 초록색, 240은 파란색이 배치
- 채도 : 0%는 회색 톤, 100%는 원래의 색으로 표시
- 명도 : 0% 가장 어둡게, 50%는 원래 색, 100%는 흰색으로 표시
3️⃣ rgb로 표현 : rgb(R, G, B)
- 각각 0~255 사이의 숫자로 표시
- rgba를 사용하여 투명도를 지정할 수 있다. (0~1 사이의 숫자)
ex) rgba(0, 255, 0, 0.3)4️⃣ 예약어로 표현
- red, green, blue 등으로 색상의 이름을 사용하여 표시할 수도 있다.
📌 텍스트 정렬 : text-align
문단의 텍스트를 왼쪽, 가운데, 오른쪽으로 정렬할 수 있다.
.title { text-align: center; }✨ 사용할 수 있는 속성값
- start : 현재 텍스트 줄의 시작 위치에 맞춰 정렬
- end : 현재 텍스트 줄의 끝 위치에 맞춰 정렬
- left : 왼쪽에 맞춰 정렬
- right : 오른쪽에 맞춰 정렬
- center : 가운데에 맞춰 정렬
- jusfify : 양쪽에 맞춰 정렬
- match-parent : 부모 요소를 따라 정렬
📌 줄 간격 조절 : line-height
두 줄 이상의 문단이 있을 때, 줄 간격이 너무 좁거나 넓으면 가독성이 떨어진다. 이때 사용하는 속성이다.
속성값은 단위(px), 배수, 백분율로 표시가 가능하다.p { line-height: 20px; } p { line-height: 1.5; } p { line-height: 150%; }✨ 텍스트를 세로로 정렬할 때 사용할 수 있다.
영역의 높이를 나타내는 height의 속성값과 line-height의 속성값을 똑같이 지정하면 가운데 정렬이 된다.
header { /* height와 line-height의 속성값 동일 */ height: 150px; text-align: center; line-height: 150px; }
📌 텍스트의 줄 표시 : text-decoration
텍스트에 밑줄이나 취소선을 표시할 때 사용하는 속성이다.
하이퍼링크는 기본적으로 밑줄이 표시되어 있는데 이 속성을 사용하면 없앨 수 있다.p { text-decoration: none; }✨ 사용할 수 있는 속성값
- none : 줄을 표시하지 않음
- underline : 밑줄 표시
- overline : 윗줄 표시
- line-through : 취소선 표시
📌 그림자 표시 : text-shadow
그림자 효과를 주고 싶을 때 사용하는 속성이다. 글자에 입체감을 주어 강조하여 표시할 수 있다.
거리는 양수와 음수를 사용하여 얼마나 떨어져 있는지 지정한다.
번짐정도는 얼마나 퍼져 나가는지 또는 음수를 사용하여 얼마나 축소되는지 표시힌다.p { text-shadow: '가로 거리', '세로 거리', '번짐 정도', '색상'; }
📌 글자 간격 조절 : letter-spacing, word-spacing
글자와 글자 사이의 간격을 조절하는 letter-spacing
단어와 단어 사이의 간격을 조절하는 word-spacing이 있다.
속성값은 단위(px, em), 백분율(%)을 사용하여 크기값을 조절한다.p { letter-spacing: 0.2em; word-spacing: 20%; }
