본문 바로가기
웹프로그래밍 기초/A반소스자료

디스플레이속성 과 폰트속성

by 이데렐라 2023. 4. 27.
반응형

디스플레이 속성

<!DOCTYPE html>
<html>
    <head>
        <title>디스플레이 테스트</title>
        <style>
            .box{
                width: 500px;
                height: 150px;
                border:2px solid #000;
                margin-bottom: 20px;
            }
            .none{display: none; background-color:red;}
            .block{display:block; background-color: blue;}
            .inline{display:inline;background-color: pink;}
            .inblock{display:inline-block;background-color: orange;}

            .bg{
                width: 80%; height: 500px;
                border:2px solid #000;
                background-color: pink;
                background-image: url('resource/img/bg_img2.jpg');
                background-repeat:no-repeat;
                background-size:110% auto;
                background-position: center center;
            }
        </style>
    </head>
    <body>

        <div class="bg">

        </div>

        <div class="box">
            <div class="none">Display Test</div>
            <div class="none">Display Test</div>
        </div>
        <div class="box">
            <div class="block">Display Test</div>
            <div class="block">Display Test</div>
        </div>
        <div class="box">
            <div class="inline">Display Test</div>
            <div class="inline">Display Test</div>
        </div>
        <div class="box">
            <div class="inblock">Display Test</div>
            <div class="inblock">Display Test</div>
        </div>
    </body>
</html>

 

폰트속성

<!DOCTYPE html>
<html>
    <head>
        <title>글자 속성</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap" rel="stylesheet">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Pen+Script&display=swap');
            body{font-family: 'Black Han Sans', sans-serif;font-size: 35px;}
            .text{
                width:150px;
                border: 1px solid #000;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }l
        </style>
    </head>
    <body>
        <div class="text">
            글자수를 잘라야하는데 그러려면 길게써야하는데 아무렇게 써보세요.
        </div>

        <div>
            <h3>글자 스타일</h3>
            <span>보통</span><br/>
            <span style="font-weight: bold;">굵게</span><br/>
            <span style="line-height: 60px;" >글자 높이</span><br/>
            <span style="font-family: 'Nanum Pen Script', cursive;">폰트</span><br/>
        </div>
    </body>
</html>

 

displayTest.html
0.00MB
fontTest.html
0.00MB
resource.zip
7.18MB

반응형

'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글

실습소스  (0) 2023.05.12
위치속성과 변형/애니메이션  (0) 2023.05.11
CSS 테스트  (0) 2023.04.06
레이아웃 & CSS  (3) 2023.03.30
table & form Tag  (0) 2023.03.23

댓글