211006 필기내용

font 개념

• font-family
  • 서체를 사용하는 속성으로
  • 사용할 영문, 대안, 대중적인, 사용할 한글, 대안
• weight
  • 서체의 굵기
  • ultra thin, thin, light, regular, nomal, bold, bolder, black
  • 100, 200, 300, 400, 500, 600, 700, 800, 900
• font-style
  • 서체의 기울
  • normal, italic, oblic
• line-height
  • 행간 - 텍스트와 텍스트 사이의 줄(위/아래) 간격 / leading과 같은 개념
  • px, %, 기타 다른 단위(단위없는 수치/기본서체크기 기준 scale)
• font-size
  • 폰트의 크기 (기본은 영문 대문자 X의 크기를 기준)
  • 단위에 따라 조금 다를 수 있으며, 일부 font-size에 따라 박스의 크기가 변경되기도 함
• text-transform
  • 대문자, 소문자, 단어 첫글자 대문자...
  • uppercase, lowercase, capitalize
• letter-spacing
  • 자간 - 글자와 글자 사이의 간격
  • 0이 기본 수치
• word-spacing
  • 어간 - 단어와 단어 사이의 간격
• white-space
  • 의미 없는 공백
• word-break
  • 줄바꿈시 처리되는 방법
• text-overflow
  • 글자가 지정영역을 넘칠때
• color
  • 글자 색상

---

font 실습

• 구형브라우저 : eot
• 한글은 웹폰트로 전환시 인식 지원이 약한경우가 많음
• src: format('eot'); 써주는 것이 좋음 (구형브라우저를 위해)
• line-height
  • 1.6 / 160% 비슷한 비율이지만 1.6으로 쓴게 더 많이 벌어짐
  • 120%가 기준
• letter-spacing : 0이 기준
• word-spacing : 0이 기준
  • log in 에 많이 사용
    • login으로 사용하면 screen leader프로그램에서 다르게 읽음
    • word-spacint: -3px;
• text-align: justify; : 양쪽 정렬
• word-break
  • keep-all : width 사이즈에 맞게 줄바꿈을 하며 단어가 깨지지 않음
  • break-all : width 사이즈에 맞게 줄바꿈을 하며 단어가 깨짐
• white-space
  • nowrap : 엔터 쳤을때 공백 제거 / 주로 밑 2개 코드와 함께 사용
    • overflow: hidden; : 넘치는 부분 숨김
    • text-overflow: ellipsis; : 넘치면 ...처리
• font: weight style size/line family...;순으로 한번에 처리 가능
  • 이후 수정이 까다로움
• font-size는 10px이하로 내려가지 않음

---

 

unit

• 16px === 12pt === 100% === 1em === 1rem
  • em 단위는 잘 적용하지 않음 - 완벽하게 처리가 잘 안됨
  • em은 font사이즈에 박스사이즈를 다시 맞춰야함
  • 기준(root) font-size가 14px 일 경우 :root { font-size: 14px;}
    • 16px === 12pt !== 100% !== 1em !== 1rem
  • rem은 root기준

---

 

 

@supports (--color1: #220) {
    .size_03 {
    background-color: var(--color2);
    }
}

• --color1이라는 변수가 읽히면 밑의 내용을 수행해라

rem과 px을 두개 다 쓰기