Google Fonts

폰트 속성

[html/css] 글꼴을 지정하는 font 속성 배우기

• font-family ⇒ 글꼴. 쉼표로 여러개 지정 가능

  • 고딕체(san-serif) ⇒ 굵기가 일정함 ex) 굴림체
  • 명조체(serif) ⇒ 장식이 있고 굵기가 다름 ex) 바탕체

• font-style ⇒ 글씨체

• font-size ⇒ 크기(높이) ⇒ 고정형(px, cm, mm), 상대형(%, rem, em, vh, vw)

  • rem : html에서 정한 font-size 단위 ⇒ 모든 요소에 설정 가능

  • em : 부모요소 기준으로 설정 ⇒ 자식+하위요소에서 설정가능

    <div><a>web</a></div>

    div{font-size:2rem} ⇒ div a{0.5em}

• font-weight ⇒ 굵기 (100~900, bold)

• color ⇒ 글씨 색상

텍스트(문단) 관련

• text-align ⇒ 정렬기준 (left, center, right)
• text-decoration ⇒ 장식, 효과?
• text-indent ⇒ 문단 첫 줄 들여쓰기
• line-height ⇒ 행 높이
• text-shadow ⇒ 음영효과 (x y blur color)

★블록요소 가로정렬 방법

1. float 이용 (요소를 띄워서 부모의 좌우에 위치) ⇒ 기본방법

   [css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁)

   • float:left ⇒ 왼쪽. 가장 많이 사용. 여러 태그에 적용시 차례대로 정렬

   • float:right ⇒ 오른쪽. 리스트 적용시 순서가 바뀜

   • clear:both ⇒ 부모요소의 높이 오류를 보완 (float요소 다음 블록요소에 설정)

     • 가상태그(부모태그명:after)를 이용하여 clear:both 설정 가능

       ⇒ 부모태그에 속한 자식태그가 float이기 때문에, float 다음요소가 되려면

       부모태그의 다음요소가 됨 (after)

     부모태그명:after{ 
     	content: '';     /* 빈 콘텐츠 생성 */
     	display:block;
     	clear:both;
     }
     

     • 부모요소에 overflow:hidden ⇒ 제한적으로 사용 (하위요소 없을때)

2. margin, padding 이용

3. position 이용