🔵 CSS - font style

jea_i·2022년 2월 7일

목록 보기

3/19

<body>
    <h2><i class="fab fa-apple"></i>글자관련 속성 알아보기</h2>
    <h3><i>(ff)</i> font-family:value;</h3>
    <p>
        이 속성이 적용된 요소는 지정된 값으로 글꼴을 변경합니다.
        <br>글꼴이름에 공백이 있으면 반드시 따옴표를 표기합니다.
    </p>
    <h3>웹폰트 적용하기</h3>
    <ol>
        <li><a href="http://fonts.google.com" target="_blank">구글웹폰트</a>에 접속하기</li>
        <li>적용할 글꼴 검색하여 검색된 글꼴 클릭하여 페이지 이동하기.</li>
        <li>[+Select This Style] 클릭하여 적용할 글꼴스타일 선택.</li>
        <li>&lt;link&gt;항목 복사하여 문서 head태그 안에 붙여넣기.</li>
        <li>글꼴을 적용할 선택자에 font-familt속성의 값으로 지정하기.</li>
        <li></li>
    </ol>
    <h3>이모지폰트 적용하기</h3>
    <ol>
        <li><a href="https://fontawesome.com/">폰트어썸</a>에 접속하기.</li>
        <li><a href="http://use.fontawesome.com/releases/v5.15.4/fontawesome-free-5.15.4-web.zip">글꼴파일 다운</a>받아 압축풀기</li>
        <li>압축해제된 폴더에서 [webfonts]폴더 [site-root]폴더로 옮겨놓기</li>
        <li>압축해제된 폴더에서 [css/all.css]파일 [site/root/css]폴더로 옯겨놓기</li>
        <li>head태그 안에 all.css파일 &lt;link&gt;</li>
        <li>폰트어썸에서 이모지 코드 복사 붙여넣기 하여 적용하기</li>
    </ol>
    <hr>
    <h3><i>(fw)</i> font-weight: value;</h3>
    <p>
        이 속성이 적용된 요소는 지정된 값으로 <span class="fw">글꼴의 두께</span>가 변합니다.
    </p>
    <hr>
    <h3><i>(fs)</i> font-style : value;</h3>
    <p>
        이 속이 적용된 요소는 지정된 값으로 <span class="fs">글꼴이 기울어</span>집니다.
    </p>
    <hr>
    <h3><i>(fz)</i> font-size: value;</h3>
    <p>
        이 속성이 적용된 요소는 지정된 값으로 <span class="fz">글꼴의 크기</span>가 변합니다.
    </p>
    <hr>
    <h3><i>(c)</i> color: 색상값;</h3>
    <ul>
        <li>
            <h4>red | green | blue</h4>
            <p>키워드 색상값</p>
        </li>
        <li>
            <!--255가지의 색-->
            <h4>rgb(255, 0, 0)</h4>
            <p>rgb색상값: 16,777,216가지의 색을 사용할 수 있다.</p>
        </li>
        <li>
            <!--a값이 0.5이면 50% 투명, 0이면 100& 투명-->
            <h4>rgba(255, 255, 255, 1)</h4>
            <p>rgba색상값: rgb색상값에 Alpha형태의 투명도를 적용할수 있는 색상값</p>
        </li>
        <li>
            <h4>#ff0000</h4>
            <p>헥사코드색상값 : 16,777,216가지의 색을 사용할 수 있다.</p>
        </li>
        <li>
            <h4>#f00</h4>
            <p>웹컬러색상값 : 4,096가지의 색을 사용할 수 있다.</p>
        </li>
    </ul>
</body>

<style>
html{
    font-size: 20px;
}
h2{
    color:cadetblue;
    /* inherit : 상속받다 */
    font-family: 'inherit';
    /* 대체폰트들로 맨마지막 폰트는 안전폰트임 따옴표 없이 작성 */
    font-family: 'Noto Sans KR', 'Malgun Gothic', '굴림', snas-serif;
    font-family: 'Gugi', sans-serif;
}
p{
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    font-size: 14px;
}
h3{
    font-family: 'Nanum Gothic', sans-serif;
}
.fw{
    font-weight: 900;
}
.fz{
    font-size: 24px;
    /* 반응형 or 모바일에서는 em,rem 단위를 사용함*/
    /* 부모 글자크기의 배수단위 */
    font-size: 2em;
    /* 시조 글자크기의 배수단위 */
    font-size: 2rem;
    /* 웹개발에서 %는 부모요소를 기준으로 합니다.*/ 
    /* 120%=1.2em */
    font-size: 120%;
    /* vw(Viewport Width),vh(Viewport Height) 단위 */
    /* 반응형웹 만들 때 사용 */
    font-size: 0.3vw;
    font-size: 5vh;
}
h4{
    color: rgba(255, 0, 0, 0.5);
}
.fs{
    font-style: italic;
}
</style>

jea_i

열정열정열정🔥

이전 포스트

🔵 CSS - basic selecter

다음 포스트

🔵 CSS - font style

CSS

🔵 CSS - basic selecter

🔵 CSS - text style

0개의 댓글

관련 채용 정보