TIL * 22.01.29

🔷 CSS

font-family

• family-name : 사용할 폰트의 이름. ','로 구분지어 사용할 수 있으며 공백이 있거나 한글일 경우 홑따옴표 사용
• generic-family : family-name으로 지정된 글꼴을 사용할 수 없을 때 대체할 폰트. font-family의 맨 마지막에 선언

line-height

• 줄 간격을 의미하며, 기본값은 normal
• 단위 없는 숫자만 입력 가능

vertical-align

• 요소의 수직 정렬을 지정하는 속성으로, 기본값은 baseline
• 인라인 레벨에서만 선언이 가능하므로 인라인 요소 또는 테이블 셀 상자의 수직 정렬을 지정할 때 사용한다.

text-align

• text의 정렬을 지정하는 속성으로, 기본값은 left (RTL일 경우 right)
• display와의 관계: text-align은 inline-level에 적용되며, block-level을 text-align으로 정렬할 수 없음

display

• 요소의 rendering box 유형을 결정할 때 사용하는 속성
• 화면 상에서 블록 요소를 인라인 요소처럼 보여줄 수 있으며, 그 반대 또한 가능하다. 따라서 태그마다 고유하게 가지고 있는 rendering box의 특징을 변경할 수 있다.

1. none : 브라우저에서 render tree를 만들지 않으므로 화면 상에 나타나지 않는다.
2. inline : 본인의 콘텐츠 요소만 가진 상태로 행을 차지하게 된다. height와 width 속성이 적용되지 않으며, margin, padding, border 속성은 부모 요소에 영향을 끼치지 않는다.
3. block : <div> 의 기본값.
4. inline-block : inline과 block을 합친 속성. inline처럼 화면에 나타나지만 block의 box-model 성질을 가진다.

float

• 요소를 보통의 흐름에서 벗어나게 할 때, 레이아웃을 만들며 영역을 좌우로 분할할 때 사용하는 속성, 기본값은 none
• 주변 텍스트나 인라인 요소가 주위를 감싸는 특징이 있으며 대부분 요소의 display 값을 block로 변경

clear

• floating된 요소의 영향에서 벗어나 다음 행으로 이동할 때 사용
• block-level 요소에만 적용 가능

position

• 요소의 위치를 원하는 곳으로 이동시킬 때 사용하는 속성

position: static; // 기본값, 정상 흐름대로 배열, 좌표 설정 X
position: relative; // 상대 위치, 정상 흐름대로 배열, 주변 요소에 영향 X
position: absolute; // 절대 위치, 정상 흐름에서 벗어나 offset 이동, 부모 요소 좌표를 기준으로
position: fixed; // 고정 위치, viewport 상에서 offset 이동, 부모 위치 및 요소 영향 X