Reference/CSS

font-size 속성은 폰트 사이즈 속성을 설정합니다.

by @webs 2022. 12. 8.

font-size

font-size 속성은 폰트 사이즈 속성을 설정합니다. 사이즈는 키워드를 사용할 수 있지만, 잘 사용하지 않습니다. 사이즈는 CSS 단위를 통해 주로 설정하는 편이며, 반응형 작업시 em, rem, vw를 많이 사용합니다.

특징	설명
기본값	font-size : medium
적용	font
버전	CSS1
사용성	★★★★☆

정의(Definition)

font-size 속성은 폰트 사이즈 속성을 설정합니다.
font-size 속성은 키워드 또는 CSS 단위로 설정할 수 있습니다.
일관된 크기의 폰트를 작성하려면 px 단위를 사용하지만, 상대적으로 변해야 하는 사이즈라면, em, rem, vw, vh 단위를 사용 할 수 있습니다.
em 단위는 부모 폰트 크기를 기준으로 변하고, rem 단위는 루트 폰트 크기를 기준으로 변하는 상대폰트 사이즈 속성입니다.
루트(root) 폰트 크기는 CSS 설정시 :root에 설정할 수 있으며, 기본 크기 값은 16px입니다.

폰트와 관련된 속성

font 속성은 폰트에 관한 설정을 일괄적으로 설정합니다.
font-family 속성은 폰트 종류를 설정합니다.
font-size 속성은 폰트 사이즈 속성을 설정합니다.
font-size-adjust 속성은 소문자를 기준으로 폰트 크기를 설정합니다.
font-style 속성은 폰트의 스타일을 설정합니다.
font-weight 속성은 폰트의 두께를 설정합니다.
font-stretch 속성은 폰트의 장평을 설정합니다.
font-variant 속성은 영문 폰트의 소문자 표시 형태를 설정합니다.
font-feature-settings 속성은 오픈 타입 글꼴의 세부사항을 설정합니다.
font-kerning 속성은 커닝 기능을 사용할 것인지의 여부를 설정합니다.
font-language-override 속성은 정의된 언어를 다른 언어로 설정합니다.
font-optical-sizing 속성은 텍스트 렌더링을 통해 다양한 크기를 설정합니다.
font-synthesis 속성은 누락된 텍스트의 합성 여부를 설정합니다.
@font-face 속성은 웹폰트를 설정합니다.
color 속성은 폰트의 색상을 설정합니다.

문법(Syntax)

font-size : absolute-size | relative-size | length | percentage

/* 절대 사이즈 */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/* 상대 사이즈 */
font-size: larger;
font-size: smaller;

/* 단위 사이즈 */
font-size: 16px;
font-size: 0.8em;
font-size: 1rem;

/* 퍼센트 사이즈 */
font-size: 80%;

/* 전역 속성 */
font-family: inherit;   /* 상속 */
font-family: initial;   /* 초기화 */
font-family: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
absolute-size	font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large;	폰트 사이즈를 xx-small으로 설정합니다. 폰트 사이즈를 x-small으로 설정합니다. 폰트 사이즈를 small으로 설정합니다. 폰트 사이즈를 medium으로 설정합니다. 폰트 사이즈를 large으로 설정합니다. 폰트 사이즈를 x-large으로 설정합니다. 폰트 사이즈를 xx-large으로 설정합니다.
relative-size	font-size: larger; font-size: smaller;	폰트 사이즈를 기준 사이즈보다 크게 설정합니다. 폰트 사이즈를 기준 사이즈보다 작게 설정합니다.
length	font-size: 14px;	폰트 사이즈를 14px로 설정합니다.
percentage	font-size: 20%;	폰트 사이즈를 퍼센트로 설정합니다.

예제1(Sample)

폰트 사이즈를 설정한 예제입니다.

어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.

운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다. 복권에 당첨되는 사람들은 금방 돈을 허비하게 된다. 단지 행운만 좋았기 때문이다. 운을 만든 사람은 돈을 날려먹거나 헛되게 쓰지 않는다. 열심히 할수록 운은 나에게 온다.

Since I was young, I liked to make my own space and I liked my own attic. I hope that even one person will be inspired or moved in the space I created. I don't have a house in Seoul, but I have a lot of my own houses here. The house can be built at any time without cost. I think being able to create my own space is a great attraction for coding. I want to design and design my own dream in one corner and live in the future.

No one is lucky. It just creates luck. To make luck, you can concentrate on what you like or want to do. As you concentrate, you can see the way and the direction. Luck is what you create yourself through hard work and hard work. People who win the lottery quickly lose their money. Because I was only lucky. A fortune maker does not squander or spend money in vainly The harder I work, the luck comes to me.

font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large;

font-size: larger; font-size: smaller;

font-size: 12px; font-size: 16px; font-size: 0.8em; font-size: 1.4rem;

HTML

CSS

SCRIPT

<div class="font-box">
    <div class="box">
        <p>
            어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 
            단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 
            서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 
            그 집은 비용도 들지 않고 언제든지 만들 수 있다. 
            나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 
            그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.
        </p>  
        <p>
            운이 좋은 사람은 없다. 
            단지 운을 만들 뿐이다. 
            운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 
            몰두 하다보면 길이 보이고 방향이 보이게 된다. 
            운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다. 
            복권에 당첨되는 사람들은 금방 돈을 허비하게 된다. 
            단지 행운만 좋았기 때문이다. 
            운을 만든 사람은 돈을 날려먹거나 헛되게 쓰지 않는다. 
            열심히 할수록 운은 나에게 온다.
        </p>
    </div>
    <div class="box">
        <p>
            Since I was young, I liked to make my own space and I liked my own attic.
            I hope that even one person will be inspired or moved in the space I created.
            I don't have a house in Seoul, but I have a lot of my own houses here.
            The house can be built at any time without cost.
            I think being able to create my own space is a great attraction for coding.
            I want to design and design my own dream in one corner and live in the future.
        </p>
        <p>
            No one is lucky.
            It just creates luck.
            To make luck, you can concentrate on what you like or want to do.
            As you concentrate, you can see the way and the direction.
            Luck is what you create yourself through hard work and hard work.
            People who win the lottery quickly lose their money.
            Because I was only lucky.
            A fortune maker does not squander or spend money in vainly
            The harder I work, the luck comes to me.
        </p>
        
    </div>
</div>

#sample1 .font-box {
    display: flex;
    justify-content: space-between;
}
#sample1 .font-box .box {
    width: 48%;
    line-height: 1.6;
}
#sample1 .font-box .box p {
    margin-bottom: 10px;
}
#sample1 .font-box .box p:last-child {
    margin-bottom: 0;
}

@media (max-width: 800px){
    #sample1 .font-box {
        flex-direction: column;
    }
    #sample1 .font-box .box {
        width: 100%;
    }
    #sample1 .font-box .box p:nth-child(2) {
        display: none;
    }
}

document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelectorAll("#sample1 .font-box .box").forEach(box => {
            box.setAttribute("style", text);
        })
    })
});