[CSS] font
font-family:
family-name: 사용할 폰트의 이름을 나타냄
- ''로 구분하여 여러 개 선언할 수 가능
- family-name-지정순서로 폰트의 우선순위 결정
- 먼저 선언된 순서대로 우선순위가 결정
- 공백이 있거나, 한글일 경우 작은 따옴표로 묶어서 선언
line height: 행간 조정
-line-height로 제어되는 부분=line-box
(em 박스+상하단의 여백)
= 속성 =
-normal: 기본 값
-number: 줄 간격 단위가 없는 숫자만 입력 폰트사이즈에 따라 배율로 적용
-length: px,em 등 고정값
-number: 자식 요소의 줄 높이는 부모요소의 number(비율)을 상속 받아 자식 요소는 글자 크기에 비례해서 높이가 조정된다
-%: 부모 요소에서 %가 자식요소에게 그대로 상속되지 않고 부모 요소의 값에 대해 %가 이미 계산된 값이 상속된다
※부모요소 와 자식요소가 같은 배율로 적용될 수 있도록 %나 legth를 사용하지 않고 number를 사용하는 것이 좋다.
font-size: 글꼴 크기
font-size: small/medium/ large: 브라우저 마다 사이즈가 다르게 정의
※기본 값 미지정 시 글꼴의 기본크기는 16px(1em)
글자의 크기는 절대크기, 상대크기, 백분율 및 수치를 이용한 고정 크기를 지원한다.
하지만 절대 크기나, 상대크기, 백분율은 현장에서 잘 쓰이지 않으며
px, em, rem의 수치를 가장 많이 사용한다.
※ px, em, rem의 차이점
- px : 픽셀 단위의 고정 크기를 지원한다. html 옛날부터 사용되던 절대 단위이며
현재 만들어지고 있는 반응형 웹에 대응하기는 어렵다.
- em : 반응형 웹에 대응하기 위해 만들어진 단위. 부모 요소의 폰트 크기를 기준으로
배수를 적용하여 글자 크기를 지정할 경우 사용
- rem : 반응형 웹에 대응하기 위해 만들어진 단위. em과 동일하나 차이점은
부모 요소의 크기 기준이 아닌 브라우저에서 default로 설정한 폰트 크기를
기준으로 배수를 적용한다.-->
font-weight : 글자의 굵기를 조절하는 속성
(자주 쓰임)
설정가능 범위 : 100~900
bold(=700)
ligther(=300)
font style: 글꼴 스타일 지정
- normal: 기본 값
- italic - 글자를 이텔릭체로 바꿔줄 때 사용
font-variant : small-caps - 영문 소문자를 작은 대문자로 표시
-normal: 기본값
-small-caps: 소문자를 작은 대문자로 변환된다
웹 폰트(@font-face)
-사용자의 로컬환경(컴퓨터)에 글꼴을 다운로드 받아 적용
시스템 폰트: 시스템 상에서 제공되는 폰트이다
이미지 폰트: 특정 글꼴을 사용하는 것이 아니고, 글자를 표현함에 있어 시각적인
요소를 많이 넣고 싶을 때 글꼴 대신 이미지를 이용해서 표현하는 경우이다
웹 폰트 @font-face: 다른 글꼴을 서버에 저장해서 제공하거나 웹 경로를 통해 가져와서
사용하는 폰트를 말한다.
ex) 구글 Rowdies체 :@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap');
= 속성값 =
-font-family(필수): 사용자 지정 웹 폰트명
-src: url() (필수): 다운로드 받을 웹 폰트의 경로로 여러번 중첩해서 사용할 수 있다.
브라우저에 적용할 수 있는 폰트를 찾을 때까지 이동한다.
이때, 불필요한 다운로드를 막기 위해 format 속성을 사용한다
- format 속성을 사용하면 브라우저에서 지원 가능한 파일만 다운로드
받을 수 있다
-font-weigh
-font-style
vertical align: 수직 정렬
-inline또는 inline-block에서만 사용할 수 있다.
따라서 display 속성이 변하지 않은 div, p와 같은 블록레벨 요소에는 적용되지 않는다.
-대부분 부모요소에 상대적으로 정렬됨
= 속성 =
-baseline: 기본값-부모의 baseline에 맞추어 해당 요소의 baseline을 정렬
-sub: 부모의 아래 첨자 기준으로 정렬
-supper: 부모의 위 첨자 기준으로 정렬
-text-top: 부모 텍스트의 맨위
-text-bottom: 부모의 텍스트의 맨 아래
-middle: 부모의 중앙에 위치
-top: 부모 텍스트의 맨 위
-bottom: 부모의 맨 아래
-percent/Lenth: 음수값도 사용 가능하다
text-align: 텍스트의 정렬을 지정하는 속성
-verical align과 마찬가지로 inline-level에 적용됨
-block level을 text align으로 정렬할 수 없음
※block 요소를 가운데 정렬 하고자 한다면?
margin값을 auto로 정의하면 가능하다
text-indent 텍스트 들여쓰기
-block-level요소에서 사용가능하다
= 속성값 =
-length: 문단의 첫 줄 들여쓰기, 음수 사용가능(음수값을 정의하면 왼쪽으로 들여쓰기)
-percentage(%): 텍스트를 포함하는 컨테이너 블록의 폭 기준으로 변환된 백분율 값으로
들여쓰기
text decoration: 텍스트의 장식을 지정하는 속성
= 속성 =
-none: 텍스트 꾸밈을 생성하지 않음
(의외로 다른 것은 잘 사용되지않고, <a>태그의 밑줄을 없애기 위해
none값이 가장 많이 사용됨.)
-overline: 윗줄로 꾸밈을 설정
-underline: 밑줄로 꾸밈을 설정
-underline overline: 윗줄과 밑줄이 동시에 꾸밈
text-decoration-color: 텍스트 꾸밈의 색상을 지정
색상 값을 사용하여 원하는 색상을 지정할 수 있다
= 속성값 =
기본값: currentcolor
white- space : 요소 안에 공백을 어떻게 처리할지 지정하는 속성
= 속성값 =
- norma l: 기본값, 공백과 개행을 무시하고 필요한 경우 자동 줄바꿈
- nowrap : 공백이 무시되면서 한줄로 쓸수 있음/...말줄임을 쓸 때 쓰인다
letter spacing: 글자 글자 마다의 간격을 지정하는 속성
<속성값>
- normal : 기본 값
- length : 음수 값도 선언가능
word spacing 단어간의 간격 조정
= 속성 =
word break: 단어가 라인 끝에 나올 경우 어떻게 처리할지 지정하는 속성
word wrap: 요소를 벗어난 단어의 줄바꿈을 지정하는 속성
- float : 요소를 보통의 흐름에서 벗어나게 하여 독자적인 공간
위에 배치되도록 한다.
-주변 텍스트나 인라인요소가 float된 요소의 주위를 감싸는 특징이 있다.
-대부분 요소의 display 값을 block으로 변경한다.
= 속성값 =
-none: 기본값으로 float 시키지 않음
-left: 좌측으로 float 시킴
-right: 우측으로 float 시킴