본문 바로가기
HTML5

21. 01. 29. 05장- CSS의 기초, 6장. 글꼴 관련 스타일

Levinni 2021. 2. 1. 07:01

5장. CSS     

      5-1. CSS 기초

            cascading style sheet

            HTML과 함께 웹 표준의 하나

            

            스타일의 형식

            선택자 {속성명:속성값; 속성명2: 속성값2; }

            p {color:blue; font-size:16px}

            p {

                color:blue;

                font-size:16px

            } -> 세로배치 하기도 함

 

            스타일 내의 주석은 /* */

 

            <style>

  • 내부, 외부 스타일 시트

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        /* 내부 스타일시트 표기 */
        ul {color: blue; list-style-type: square;}
    </style>
</head>
<body>
    <img src="images/sydney.png" alt="시드니 오페라 하우스">
    <h1>세계 3대 미항</h1>    
    <ul>
        <li>시드니(sydney), 호주</li>
        <li>리우데자네이루(Rio de Janeiro), 브라질</li>
        <li>나폴리(Naples), 이탈리아</li>
    </ul>
</body>
</html>

<내부 스타일 시트>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <link href="style.css" rel="stylesheet"> <!-- 외부 스타일 시트 -->
</head>
<body>
    <img src="images/sydney.png" alt="시드니 오페라 하우스">
    <h1>세계 3대 미항</h1>    
    <ul>
        <li style="color: red;">시드니(sydney), 호주</li> <!-- 이런 인라인 스타일은 쓰지마 -->
        <li>리우데자네이루(Rio de Janeiro), 브라질</li>
        <li>나폴리(Naples), 이탈리아</li>
    </ul>
</body>
</html>

<외부 스타일 시트>

-> <style> 지우고 .css 파일을 링크 걸어줌.

같은 폴더 내에 style.css 만들고,

ul {color: blue; list-style-type: square;} <- 이거 한 줄 넣어 줌. 저장 꼭 하기!!

                

            5-2. 주요 선택자

            * {}: 전체 선택자

            태그{}: 태그 이름 선택자

            .스타일 이름 {}: 클래스 선택자

            #스타일 이름 {}: id 선택자

            이름, 이름, 이름 .. {}: 복수의 선택자

 

<클래스 선택자 예시>

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        /* 
        .class selector
        공백: 자손을 의미 ★중요
        */
        h2.bluetext {color: blue;}
        #title2 {color: red;}
        h1, h2 {text-decoration: underline;}
    </style>
</head>
<body>
    <h1>블루베리에 관한 연구</h1>    
    <h2 class="bluetext">블루베리와 향산화 효능</h2>
    <p class="bluetext">블루베리는 향산화제인... ... 있습니다.</p>
    <p>메사츄세츠 보스톤에 ... ... 과일 이라고 합니다.</p>
    <h2 id="title2">블루베리와 노화</h2>
    <p class="bluetext">USDA 인류 영양 연구센터 ... ... 발견하였습니다.</p>
</body>
</html>

Class-selector 출력 결과

 

            5.3 CSS

            사용자 스타일 시트의 중요 스타일 - 고대비

            제작자 스타일 시트의 중요 스타일 !important

            제작자 스타일 시트의 일반 스타일

            사용자 스타일 시트의 일반 스타일

            브라우저의 스타일 시트의 스타일

 

            태그 < 클래스 < 아이디 < 인라인 < 중요

            <우선순위 예시>

<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        /* * {color: yellow;} !important 최고높음 */
        #myId {color: pink;} /* 우선순위 매우 높음. 이것보다 높은 게 인라인 스타일. 그래서 인라인 쓰지 말라는 거 */
        .a {color: red;}
        .b {color: green}
        body p {color: lime;} /* 태그이름이 body, p 두개라서 우선순위가 더 높음 */
        p {color: blue;}
        html body p {color: brown;}

        body {color: coral;}
    </style>
</head>
<body>
    <p>문단 태그1</p>    
    <p class="a b">문단 태그2</p> <!-- .b .a면 빨갛게 나옴 -->
    <p class="a">문단 태그3</p>
    <p class="b" id="myId">문단 태그4</p>
    <h1>뉴욕타임즈에서 발표한 세계 10대 슈퍼푸드</h1>
    <ui>
        <li>블루베리</li>
        <li>귀리</li>
        <li>토마토</li>
        <li>시금치</li>
        <li>적포도주</li>
        <li>견과류</li>
        <li>브로콜리</li>
        <li>적포도주</li>
        <li>연어</li>
        <li>마늘</li>
        <li>녹차</li>
    </ui>
</body>
</html>

Priority 출력 결과

 

 

            5.4 CSS 모듈

            a. LC

            b. WD

            c. CR

            d. PR 여기서부터 써도 됨

            e. REC 확정

 

            브라우저 지원여부

            접두어

            -webkit-:  웹킷 엔진 브라우저( safari, chromel opera)

            -moz- : firefox

            -ms- : ie

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <style>
        #box {border: 3px solid green; padding: 10px; margin: 20px; display: inline-block;}
        #box:hover {
            -webkit-transform: rotate(15deg);
            -ms-transform: rotate(15deg);
            -moz-transform: rotate(15deg);
            transform: rotate(15deg);

            transition: all .5s linear .2s;
        }
    </style>
</head>
<body>
    <div id="box">Mouse Over</div>
</body>
</html>

6장. 글꼴

6-1. 글꼴 관련 스타일

        font-family

        font-size

        font-weight

        color

 

        text-align

        line-height

 

        font : 운영체제의 영향

        궁서, 바탕, 굴림 , 돋움

        serif sans-serif

 

        body { font-family : "맑은 고딕", "돋움", serif } 한글 쓸 땐 되도록 " " 써주기.

        웹 폰트- 표준: woff(webopenfontformat), eot(embedded open type)

        @font-face

 

        구글 웹 폰트

 

  • 구글 웹 폰트 이용해 보기 & ttf 파일을 웹 폰트 표준으로 변환 후 사용해 보기.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <title>Page Title</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet">
    <style>
    /* body {font-family: 'Do Hyeon', sans-serif;} */
    @font-face {
        font-family: over;
        src: url(koverwatch.woff);
    }
    body {font-family: over;}
    p {font-size: 4em;}
    </style>   
</head>
<body>
    <p>동해물과 백두산이 마르고 닳도록</p>
</body>
</html>

 

구글폰트 사이트에서 링크와 CSS 가져 옴.

 

koverwatch.ttf 파일을 변환 사이트에서 변환 후 .eot, .woff 파일을 비주얼 스튜디오에 넣음.

.eot, .woff 확장자가 .ttf보다 크기가 훨~씬 작음.

저작자표시 (새창열림)

'HTML5' 카테고리의 다른 글

21. 02. 01. 07장- 색상과 배경을 위한 스타일  (0) 2021.02.02
21. 02. 01. 06장- 텍스트·문단·목록 관련 스타일,  (0) 2021.02.01
21. 01. 28. 4장. 폼  (0) 2021.01.29
21. 01. 27. 3장. 이미지 아이프레임, 링크  (0) 2021.01.27
21. 01. 26. 목록, 표 만들기.  (0) 2021.01.26

'HTML5' Related Articles

티스토리툴바