[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 22회차 미션

text-decoration

• 문자의 장식(line)을 지정 (선에 대한 장식)
• 속성 값
  • none : 선 없음 (기본값)
  • underline : 밑줄을 지정
  • overline : 윗줄을 지정
  • line-through : 중앙 선 (가로지르는) 을 지정

p {
    text-decoration: none
}

p {
    text-decoration: underline
}

p {
    text-decoration: overline
}

p {
    text-decoration: line-through
}

text-indent

• (첫번째 줄의) 들여쓰기를 지정
• 음수 값 사용 가능
  • 사용 시 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기) 됨

p {
    text-indent: 50px;
}

p {
    text-indent: -10px;
}

• 글자를 화면 밖으로 밀어내는 용도로도 쓰인다.
• ex ) css background 속성으로 이미지를 넣을 때 대체 텍스트를 넣어야 하는데, 화면에는 보이지 않게 하려는 경우

letter-spacing

• 문자의 자간(글자 사이 간격) 을 지정
• 속성 값
  • normal : 단어 사이의 일반 가격 (기본값, 0과 같음, 폰트마다 다를 수 있다.)
  • 단위 : px, em, cm 등 단위로 지정

p {
    letter-spacing: 0; /* 변하지 않는다 */
}

p {
    letter-spacing: 10px; /* 변한다 */
}

p {
    letter-spacing: -10px /* 글자 간격 사이가 줄어든다 */
}

word-spacing

• 단어 사이 (띄어쓰기) 의 간격을 지정
• 속성 값
  • normal : 단어 사이의 일반 간격 (기본값, 0과 같음, 폰트마다 다름)
  • 단위 : px, em, cm 등 단위로 지정

p {
    word-spacing: 0; /* 변하지 않는다 */
}

p {
    word-spacing: 30px; /* 변한다 */
}

p {
    word-spacing: -10px; /* 단어 간격이 좁아진다 */
}

프론트엔드 올인원 패키지 바로가기 -> https://bit.ly/3m0t8GM