[CSS] 글씨 꾸미기, 글자 크기(font-size),폰트(font-family), font-style

 

📌Text 글자 크기, 폰트

 

font-size

px	픽셀값, 절대적인 값, 모바일/pc 크기 같음
rem	head값 기준 상대적인 값
em	부모요소의 상대적인 값

 

font-family :  폰트

 

font-style : 스타일

 

---

1. Lorem, ipsum.

2. Lorem, ipsum dolor.

3. Lorem ipsum dolor sit.

4. Lorem ipsum dolor sit amet.

5. Lorem ipsum dolor sit amet consectetur.

---

 

• HTML

    1. Lorem, ipsum.
    <div class="container1">2. Lorem, ipsum dolor.</div>
    <div class="container2">
        3. Lorem ipsum dolor sit.
        <div class="child">4. Lorem ipsum dolor sit amet.</div>
    </div>
    <div class="container3">5. Lorem ipsum dolor sit amet consectetur.</div>

• CSS

    .container1 {
        font-size: 2rem;
        font-family: Arial, Helvetica, sans-serif;
        font-style: italic;
    }

    .container2 {
        font-size: 30px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    
    .child {
        font-size: .5em;
        font-style: oblique;
    }
    .container3{
        font-weight: 100;

    }

 

 

1번 문장이 head안에 있으므로 rem값의 기준이 된다.

2번 문장은 2rem이므로 head안에 있는 1번 문장의 2배 크기이다.

3번 문장은 30px로 절대적인 값으로 정해져 있고,

그 안에있는 4번 문장은 부모문장인 3번의 0.5배이다.