폰트의 크기와 형태 - 한 눈에 끝내는 HTML5/CSS3
한 눈에 끝내는 HTML5/CSS3
  • 폰트의 크기와 형태
    learn
    Practice
    learn
    12 글자(Text) 관련 스타일
    폰트의 크기와 형태

    이제 font-style과 font-weight에 대해 알아봅시다. 앞서 HTML을 학습할 때 이탤릭체나 Bold는 HTML보다 CSS를 통해서 스타일을 적용하기를 권장드렸습니다. 이번 시간을 통해 CSS로 이탤릭체와 Bold를 적용해봅시다.


    font-style


    font-style로 가능한 값은 normalitalicoblique 등이 있습니다.
    normal은 말 그대로 기본 값이며, 기본 글자체입니다. 여기서 italic과 oblique은 글자를 기울인 스타일이라는 것은 동일하지만, italic은 이텔릭체가 디자인되어 있는 폰트에서 사용하고 oblique는 이텔릭체 디자인이 없더라도 무조건 글자를 기울여서 표현한다는 차이가 있습니다.
    이전 강의에서 살펴본 예시에 font-style을 추가해 봅시다.


    font-weight


    font-weight는 폰트 굵기를 지정할 때 사용합니다. bold 혹은 100 단위의 숫자 값 등을 사용할 수 있죠. 숫자 값은 100부터 900까지 가능하며, 보통 normal폰트가 400bold폰트가 700의 값을 가집니다.

    위 예시에 font-weight를 추가하겠습니다.

    이렇게 일일이 font 관련 프로퍼티를 적용할 수 있지만 꽤 불편한 작업일 겁니다. font 프로퍼티를 쓰면 모든 과정을 한번에 설정할 수 있습니다.

    여기서 font-stylefont-weightfont-sizefont-family를 순서대로 띄어쓰기로 구분하여 작성하면 됩니다. 순서를 반드시 지켜야 하며 font-style과 font-weight는 생략해도 무관합니다.

    Practice

    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.

    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!

    Registered Questions(0)