3. 폰트 관련 속성

<div>
    <p class=default">
        이것은 예시 P 태그 내용
    </p>
    <p class=text">
        이것은 예시 P 태그 내용
    </p>
</div>

.text {
    font-size: 12px;
    font-style: italic;
    // font-style: normal
    font-weight: 700


}

font-size

• 대부분의 브라우저의 기본 설정은 16px
• px, em, rem, % 자주 사용

font-style

• 이탤릭체를 사용하고 싶을 때 사용
• default = normal
• italic
• olbique
• 글꼴에 따라 italic이 필기체처럼 보이는 것이 있음
• 하지만 대부분 글꼴은 둘이 차이가 없다.

font-weight

• 글자 굵기
• default = normal = 400
• bold 도 자주 사용

시멘틱적 요소로 <bold> 나 <i>를 하는 것은 의미가 있지만, 스타일적으로 추가하는 것은 아무 의미가 없다.

font-family

// Times 없으면 Arial 없으면 sans-serif
.text {
    font-family: 'Times New Roman', Times, Arial, sans-serif;
}

• 글꼴 자체를 변경하기 위해 사용
• 윈도우 : 맑은 고딕이 기본
• sans-serif : 끝이 꺾이지 않은 글꼴
• , 로 구분한다.
• 띄어쓰기가 있다면 그건 ‘‘로 감싸준다.

line-height

.text {
    line-height: 2.0;
}

• 줄의 높이를 의미
• font size 가 같더라도 글꼴에 따라서 default line-height 가 다를 수 있다.
• line-height 사용시, 글꼴에 상관없이 높이를 맞출 수 있다.
• px, rem 등의 단위 표현도 사용 가능

font와 단축속성 (shorthand)

.text {
    color: red;
    font-size: 20px;
    font-family: 'Times New Roman', Times, Arial, sans-serif
}

// 둘이 완전 동일하다
.text {
    color: red;
    font: 20px 'Times New Roman', Times, Arial, sans-serif
}

// style, weight는 무조건 size 보다 앞에 있어야 한다.
// line-height는 무조건 size 바로 뒤 / 하고 사용
.text {
    color: red;
    font: italic 800 20px/1.7 'Times New Roman', Times, Arial, sans-serif
}

// 마지막 font에서 font-style이 명시되어 있지 않기때문에 default 값으로 변경되어
// 2번째 줄의 font-style 무시된다
// 주의하기
.text {
    color: red;
    font-style: italic
    font: 800 20px/1.7 'Times New Roman', Times, Arial, sans-serif
}
    

• font 관련된 속성을 한줄로 단축하여 작성할 수 있는 것
• 필수 속성 : font-size, font-family
• 선택 속성 : font-style, font-variant, font-weight, line-height

letter-spacing, word-spacing

.text {
    letter-spacing: 5px
}

• letter-spacing: 글자간의 간격
• word-spacing : 단어 사이의 간격
• 글꼴별로 이미 정해진 기본값이 있다.
• default = normal
• 글꼴별로 default 값이 다르다
• letter-spacing: 5px 주면 기본 간격보다 5px 씩 더 멀어진다
• 음수도 가능하다.
• 글자 음수 지양하기
• 글꼴 만든사람이 이미 가장 이쁘게 만들어놓은 값이기 때문에 굳이 필요한 상황 아니면 하지 말자.

text-align

.text {
    text-align: center;
}

• center : 가운데 정렬
• left : 왼쪽 정렬
• right : 오른쪽 정렬
• 블록 요소일때 : 블록라인 전체를 기준으로 정렬
• 인라인 요소일때 : 인라인 기준으로 정렬 (어차피 꽉 차있기 때문에 변화가 없다.)
• 인라인 요소에 text-align 주고 싶다면 > 부모에 블록 요소를 추가하여 해당 요소에 처리하여 상속받게 하자(div)

text-indent

.text {
    text-indent: 20px;
}

• 들여쓰기
• inherited: Yes 이기 때문에 자식 요소에 상속이 된다.
• 인라인 요소에는 적용되지 않는다.
• px, % 사용 가능하다.

text-decoration

// text-decoration은 순서 상관 없다.
// line은 multiple로 할 경우 꼭 붙어 있어야한다.
// color 만 지정하면 text-decoration은 color 값 상속받는다.
p {
    color : blue
    text-decoration: underline overline red 3px double;
}

• css 단축 속성 중 하나 (shorthand)
• 필수 요소 : text-decoration-line
• 선택 요소 : text-decoration-color, text-decoration-style, text-decoration-thickness(두께)
• font 는 shorthand 보다 따로따로 많이 쓰지만 이건 shorthand를 더 많이 쓴다.

text-decoration-line

• default : none
• underline, overline(윗줄), line-throuht(중간 취소선)
• 멀티플로 여러개 다 사용 가능

text-decoration-style

• 줄이 어떻게 생겼는지
• default : solid
• double, dotted, dashed, wavy

word-break

<p lang="en">
    aaaaaaaaaaaaaaaaaaaaaaaaaa
</p>

<p lang="ko">
    가나다라마바사아자차카타파하
</p>

// 글자수가 width보다 커서 뚫고 지나간다.
// 배경색은 120px 에만 적용된다.
p {
    width: 120px;
    background-color: red;
}

// 120px 맞춰서 줄바꿈이 된다.
p[lang="en"] {
    width: 120px;
    background-color: red;
    word-break: break-all
}

// 기본으로 120px에 맞춰서 줄바꿈이 됐지만
// 그걸 취소하여 초기의 en class 처럼 뚫고 지나간다.
// 스페이싱이 있으면 줄바꿈은 된다.
p[lang="ko"] {
    width: 120px;
    background-color: red;
    word-break: kepp-all
}

• 언어에 따라 동작하는 방식이 다르다.
• defalut: normal
• break-all : 한중일 텍스트 제외 > 영어에서 주로 사용
• keep-all : 한중일 텍스트만 적용

text-transform

p {
    text-tranform: uppercase;
}

• 한글에는 적용할 수 없다.
• 사용할 수 있는 언어가 한정되어 있다.
• default == none
• uppercase : 대문자로 변경
• lowercase : 소문자로 변경
• capitalize : 단어의 첫 글자가 대문자로 변경

나의 회고 🤫

text-align 속성이 인라인 요소에는 적용이 안되는 사실을 오늘 처음 알았다.
항상 적용이 왜 언제는 되고 언제는 안될까 의문이었는데 그 의문을 해결할 수 있었다.
인라인 요소에 적용하고 싶을 때는 부모요소로 블록요소 집어 넣기!!
shortand도 정확한 이해가 없었어서 항상 하나하나 입력했는데 앞으로는 잘 활용하여 코드수를 줄여봐야겠다