인프런 HTML&CSS강좌 CSS 속성-4 font-family, position 속성

인프런 HTML&CSS강좌 CSS 속성 4

---

CSS  속성

font-family , font-size 속성 - font-style, font-weight,

line-height 속성 - text-align, text-decoration 속성

position 속성

 

font-family

텍스트의 글꼴을 모아놓은 명령어로 몇 개의 폰트를 세팅해 준다.

브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도하는 식으로 진행되며,

모든 글꼴을 사용할 수 없는 경우 기본체로 출력된다. 

폰트 이름을 적고, 세리프와 산세리프를 정하는 타입으로 기재하면 된다.

 

Font-Size

텍스트의 크기를 지원한다.

 

Px->em 변환법

"pixels / 16= em"

 

Font-Weight 

폰트 두께를 결정한다. normal, bold 혹은 100~900까지 숫자로 쓰는 방법이 있다.

 

line-height 

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

블록요소 안 텍스트를 중앙정렬시킬 때 사용하기도 한다.

(참고블로그 타이포그래피 참고)

기본값 normal

 

Position (★★★★★) 

position:Static 기볹값, 순차적으로 오른쪽으로 나열 되는 것

position:Relative 현재 자기 자신 위에 있는 것을 기준으로

position:absolute body 기준으로 동작함

position:fixed 고정 시켜주는 것

position:sticky 스티키스크롤

position:z-index 순서 정해주는 것

---

참고블로그

https://blog.naver.com/codbs7/221528122167

 

타이포그래피의 구조

family-name, generic-family,

타이포그래피의 요소 - em, ex, baseline, Ascender, Descender

https://blog.naver.com/pea1/221599153160

 

Position 참고 블로그

blog.naver.com/designbasekorea/222125959722

#12 위치를 내 맘대로! CSS Position 이해하기 - 웹 코딩 강좌

blog.naver.com/cks_123/222134085333