텍스트 꾸미기

🧑🏻‍💻 텍스트와 관련된 속성들을 알아보자!

1.  색상

👉🏻 color : 글자의 색상을 변경하는 속성

👉🏻  background-color : 요소의 배경 색상을 지정하는 속성

👉🏻  border-color : 테두리 색상을 지정

👉🏻  opacity : 요소의 불투명도 조절

※ 삽입할 수 있는 값은 HEX(16진수로 RGB : Red, Green, Blue) 또는 색상 이름으로 동일

/* red class에 속성 적용하기 */
.red {
	color: #ff0000;
	color: red;
	background-color: #ff0000;
	border-color: #ff0000;
	opacity: 0.5;
}

2.  글꼴

👉🏻  font-family: 글꼴 지정하는 속성

.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

• 만약 사용하려는 글꼴이 존재하지 않거나 디바이스에 따라 지원하지 않을 경우 
  'fallback' 글꼴을 사용할 수 있음 

'fallback' 글꼴이란? 
- 웹 페이지에서 사용하려는 기본 글꼴이나 폰트가 사용자의 컴퓨터에 설치되어 있지 않을 경우, 대체할 수 있는 대체 글꼴
    위 예시를 보면 큰 따옴표 안에 사용할 글꼴을 지정해 놓았는데 제일 처음 "SF Pro KR" 글꼴을 사용하고 이 글꼴이 존재하지 않으면
    그 뒤에 이어지는 대체 글꼴 사용 
※ 페이지의 가독성과 일관성을 유지할 수 있음

📍 글꼴의 단위 

• 절대 단위 : px, pt 등 
• 상대 단위 : %, em, rem, ch, vw, vh 등

    🔎 언제 어떤 단위를 쓰는 게 적절할까? 

    1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 ex. 인쇄와 같이 화면 사이즈 정해진 경우
        : px(픽셀) 사용 추천, 글꼴의 크기를 고정하는 단위이기 때문에 사용자 접근성 불리함

    2. 일반적인 경우 
        : 상대 단위인 rem 추천, 브라우저의 기본 글자 크기가 1 rem, 두 배 크게 하고 싶으면  2 rem,  작게 하려면 0.8 rem
           사용자가 설정한 기본 글꼴 크기를 따르기 때문에 접근성에 유리 
            rem은 브라우저 기본 글자 크기에 따라서만 상대적으로 변함
    ※ em의 경우 요소에 따라 상대적으로 크기가 변경되므로 계산이 어려움 

 

3. 기타 스타일링

👉🏻  font-weight: 글자 굵기

👉🏻  text-decoration : 밑줄, 가로줄

👉🏻  letter-spacing : 자간

👉🏻  line-height : 행간

 

4. 정렬

👉🏻  text-align: 가로로 정렬, 유효한 값-> left, right, center, justify

👉🏻 세로 정렬의 경우, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가 글자 높이보다 큰 경우에만 적용 가능 
     vertical-align 속성이 있지만 사용하기 위해서는  부모 요소의 display 속성이 반드시  table-cell 이어야 함!