에듀위드 05-12 정리

Font-family

글꼴을 지정하는 속성입니다.

• family-name : 사용할 폰트의 이름을 나타냅니다. ','로 구분하여 여러개를 동시에 선언 할 수 있습니다.
  먼저 선언한 순서 대로 우선순위가 정해집니다. 이름 중간에 공백이 있거나, 한글일 경우 ''로 묶어서 선언합니다.
• generic-family : family-name을 사용 할 수 없을 때 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다.
  font-family 속성의 가장 마지막에 선언합니다. font-family속성을 사용할 때에 항상 선언 해야합니다. 대표적인 서체로는 serif와 sans-serif가 있습니다.

font-family의 문법은 아래와 같습니다.

font-family : 'family-name','family-name',sans-serif;

 

Margin,Padding의 %값

margin과 padding의 %값은 상하좌우 관계 없이 항상 요소의 width값을 기준으로 계산합니다.

 

line-height

텍스트 라인의 높이를 의미하는 것으로 주로 행간을 제어 할 때에 사용합니다.

행간을 제어 할 때 사용 하기 때문에 줄간격이라고 오해하지만 line-height는 줄간격을 제어하는 것이 아니라 line-box를 제어합니다.

line-box는 타이포그래피 구조에서 'em박스'와 '상하단의 여백' 까지를 의미 합니다.

속성값으로는 아래와 같은 값을 사용합니다.

• nomal : 기본 값으로 브라우저의 기본 값을 따릅니다. 폰트나 브라우저에 따라 다르지만 보통 1.2정도로 되어있습니다.
• number : font-size를 기준으로 설정한 숫자 만큼의 배율로 계산합니다.
• length : px,em등 고정 수치로 할당 할 수 있습니다.
• % : font-size를 기준으로 설정한 퍼센트 만큼 배율로 계산 합니다.

number와 %는 비슷하지만 전혀 다른 차이가 있습니다.

number와 %를 적용한 요소의 자식 요소가 있을 때 차이를 가지고 있습니다.

number의 값이 자식에게 상속 되었을 때에
자식 요소의 font-size를 가지고 number의 값을 가지고 다시 배율로 계산합니다.

하지만 %는 상속 되었을 때에 %값이 상속 되는것이 아니라 부모요소에서 %로 계산한 값이 자식 요소에게 상속됩니다.

 

number은 계산한 값 대신 비율을 상속받을 수 있기 때문에 가능하면 단위가 없는 값을 사용하는 편이 좋습니다.