HTML5 5일차

8 분 소요

배경 속성

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            /* background-image: url("front.png"),  url("back.png"); */
            background-size: 100% 250px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            /* background-position: 0 50%; */
            background: url('front.png') bottom / 100% no-repeat fixed,
            url('back.png') bottom / 100% no-repeat fixed #eee;
            }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora, architecto.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia minima voluptatum est suscipit obcaecati! Rerum adipisci, excepturi animi ab officia quis veniam necessitatibus, suscipit accusamus repellat nulla reiciendis. Perspiciatis, quaerat.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quia neque sapiente dignissimos facere accusantium id hic! Esse tempore tempora ducimus saepe rem quis perspiciatis quod. Facere vitae ipsam quisquam a.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Culpa laudantium omnis perferendis odit sapiente adipisci tenetur eligendi ex voluptatum labore pariatur qui rerum dolore, consequatur possimus vero ab exercitationem. Eaque.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi adipisci sapiente, beatae sequi soluta debitis quis repellat veniam libero rerum voluptate, tenetur iste temporibus deleniti facilis ad, totam quisquam velit!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi adipisci sapiente, beatae sequi soluta debitis quis repellat veniam libero rerum voluptate, tenetur iste temporibus deleniti facilis ad, totam quisquam velit!</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolore reiciendis ipsum iste minima veniam velit repellat autem. Molestias quod praesentium nobis laboriosam pariatur quam et, voluptatibus, laudantium necessitatibus repellendus ad.
    Nihil eius, iusto omnis, quis nesciunt exercitationem unde ab tempora porro quia vero nam praesentium sed eum deserunt quam harum dolor veniam, libero at alias necessitatibus cumque corporis molestiae. Sed?
    Voluptatibus iure voluptatem quam molestiae odit reprehenderit eaque dolor temporibus possimus debitis omnis nisi praesentium odio ad assumenda at dolorum nostrum, dicta quo. Dolorum ut consequatur ratione ullam aliquam saepe?
    Voluptate dolore eaque sapiente odio rem. Perferendis temporibus autem ullam ipsam minus in a obcaecati animi pariatur quo est placeat eos vitae omnis, fuga ipsa voluptas nihil tenetur iusto facilis?
    Repudiandae pariatur, quo eos vero ipsum repellendus molestiae, optio unde nisi architecto reiciendis nemo inventore. Error, quidem? Numquam dolorum tenetur porro optio autem perferendis, corrupti et architecto fugiat sapiente molestias.
    Aliquam enim ad harum molestiae nemo delectus tempora eaque inventore maiores beatae dolores omnis expedita iste, soluta quae velit consectetur repellendus obcaecati nisi error illum labore odit veniam doloremque. Dicta!
    Mollitia, eum perspiciatis. Molestias accusamus possimus enim quis explicabo fuga adipisci quidem iusto corporis, minima nam ipsam pariatur placeat incidunt praesentium, itaque ullam ducimus dolorem! Pariatur fugiat corporis totam sequi!
    Fugiat doloremque odio excepturi minus doloribus natus dolores obcaecati quidem nisi fugit hic ab quisquam sunt numquam debitis dolor delectus consequuntur ea, assumenda laborum eligendi quis expedita, ipsa repellat? Cumque.
    Labore aspernatur itaque porro quidem nobis incidunt impedit rem obcaecati consequatur aliquid doloremque debitis sit id ipsum ullam, voluptatem amet, officia neque cumque a aut natus officiis iste? Ea, ab?
    Consequuntur maiores quia enim dignissimos repudiandae sed praesentium? Quo, eius, deserunt sequi fugiat blanditiis eum quisquam animi placeat dolore quam vitae nulla sed labore, eos minima ea nemo atque? Dolorem!</p>

</body>
</html>

글꼴

글꼴 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a { font-size: 32px; }
        .b { font-size: 2em;  }
        .c { font-size: large; }
        .d { font-size: small; } 
        .e { font-size: 16px;}
        .font_arial {font-family: '없는 글꼴', Arial, Helvetica, sans-serif;}
        .font_roman {font-family: '없는 글꼴, 'Times 'New Roman', Times, serif;}
        .font_big { font-size: 3em;}
        .font_italic { font-style: italic;}
        .font_bold { font-weight: bold;}
        .font_center { text-align: center;}
        .font_right { text-align: right;}
    </style>
        
</head>
<body>
    <h1 class="font_arial font_center">글자 크기 조정하기</h1>
    <p class="a font_roman font_right">글자크기를 32px로 지정 </p>
    <p class="b">글자크기를 2em로 지정 </p>
    <p class="c font_italic">글자크기를 large로 지정 </p>
    <p class="d font_bold">글자크기를 small로 지정 </p>
    <p class="d font_big">p태그의 기본 크기는?</p>
    <p class="e"> p태그의 기본 크기는? 16px = 1em </p>
    <span class="font_center"> span 태그와 중앙 정렬은 불가능</span>
</body>
</html>

글자 수직 정렬

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .font_big {font-size: 2em;}
    .font_italic {font-style: italic;}
    .font_bold {font-weight: bold;}
    .font_center {text-align: center;}

    .button {
        width: 150px;
        height: 70px;
        background-color: rgb(209, 255, 150);
        border: 10px solid rgb(7, 6, 6);
        border-radius: 30px; 
        box-shadow: 5px 5px 5px blanchedalmond;
    }

    div > a { display:block; line-height: 70px; text-decoration: none;}


</style>
</head>
<body>
    <div class="button">
        <a href="#" class="font_big font_italic font_bold font_center">Click</href>
    </div>
</body>
</html>

포지션 속성

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            position: absolute;
        }

        .box:nth-child(1) {
            background-color: red;
            left: 10px;
            top: 10px;
            z-index: 100;
        }
        .box:nth-child(2) {
            background-color: blue;
            left: 50px;
            top: 50px;
            z-index: 10;
        }
        .box:nth-child(3) {
            background-color: green;
            left: 100px;
            top: 100px;
            z-index: 5;
        }

        body> div {
            width: 400px;
            height: 100px;
            border: 1px solid black;
            position: relative;
            overflow-y: scroll;

        }
    </style>
</head>
<body>
    <h1>Lorem ipsum dolor sit.</h1>
 <div>
        <div class="box"> </div>
        <div class="box"> </div>
        <div class="box"> </div>
 </div>
    <h1>Lorem ipsum dolor sit.</h1>
</body>
</html>

float 속성

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img { float: left;, padding-right: right;}
    </style>
</head>
<body>
    <img src="wink.png" width="200px">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, consequuntur similique rerum ad reiciendis neque optio itaque ipsam porro voluptatum recusandae saepe iure nobis fugit ipsum laboriosam eos cumque pariatur?
    Quos libero, sed quas dolorem maxime veniam dolores reprehenderit autem nihil nesciunt tempora fuga, minima eligendi dicta, id voluptatem assumenda! Neque quidem fugit error excepturi, tempora mollitia quis ipsa velit.
    Quia doloribus inventore dolores voluptatum mollitia molestias consequuntur obcaecati, quisquam vero, praesentium tempora voluptatibus similique reiciendis consectetur possimus accusamus voluptate. Nostrum iusto nemo illo accusantium porro quibusdam earum dolorem tenetur.
    Expedita officiis minus reiciendis non, facere odio exercitationem id, ipsa vel sed voluptatibus molestias placeat odit est quas, quos modi iure obcaecati earum nulla possimus. Qui ut at dolore earum!
    Beatae voluptate maiores dolor fugiat doloremque, consequuntur non laboriosam, quasi magnam blanditiis dicta totam, rerum nam? Maxime in accusamus doloremque deserunt adipisci error cumque! Cum nesciunt eos repellat esse minus!
    Odio, reprehenderit rerum. Labore sed adipisci totam explicabo, sequi laboriosam dolorem quam ducimus sit veniam quasi aut quisquam maxime ipsum rerum quae nesciunt cumque laudantium ab id obcaecati eaque a.</p>


</body>
</html>

실습2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: red;
            width: 100px;
            height: 100px;
            float: right;
            margin: 10px;
        }
    </style>
</head>
<body>
    <dev class="box">1</dev>
    <dev class="box">2</dev>
</body>
</html>

Layout

실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            overflow: hidden;
        
        }

        .item {
            float: left;
            margin: 0 3px;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <dev class="container">
        <dev class="item">메뉴 - 1</dev>
        <dev class="item">메뉴 - 2</dev>
        <dev class="item">메뉴 - 3</dev>
        <dev class="item">메뉴 - 4</dev>
    </dev>
</body>
</html>

실습2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0 auto;
            padding: 0;
            width: 800px;
        }
        
        .container {
            overflow: hidden;
        
        }
        
        .item {
            float: left;
            margin: 0 3px;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit.</p>
    <div class="container">
        <div class="item">메뉴 - 1</div>
        <div class="item">메뉴 - 2</div>
        <div class="item">메뉴 - 3</div>
        <div class="item">메뉴 - 4</div>
    </div>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam, est repudiandae! Totam minus blanditiis inventore ea ipsam! Vel culpa quae officia laborum eos dolor maiores impedit repudiandae maxime ducimus. Labore.
    Sequi repudiandae qui fugit consequuntur quisquam voluptates quae nam, reiciendis aliquam libero sed blanditiis itaque quia nulla sit, eaque eum! Libero velit odio adipisci atque veritatis eaque excepturi vitae maiores!
    Veniam porro perferendis sed, excepturi ipsam numquam aliquid magnam eius soluta inventore ex nemo dolorem laboriosam, a voluptatum sit sunt? Qui, porro magnam. Nihil ratione quod quasi, repudiandae doloremque rerum?
    Neque numquam voluptas tenetur reiciendis obcaecati, vel recusandae aliquam consequuntur atque debitis repellendus veritatis, totam doloremque id exercitationem libero nisi saepe nesciunt minus! Debitis recusandae sequi modi molestias inventore error.
    Tenetur optio iure inventore dignissimos, illum earum placeat magni quos cumque quo? Nulla mollitia architecto soluta, magni minus temporibus quam dolorem minima deleniti repellat! Veniam sint voluptatibus aliquid ad fugiat?</p>
</body>
</html>

실습3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            width: 500px;
            margin: 10px auto;

        }

        #middle {overflow: hidden;}
        #left {float:left; width: 150px; background-color: aliceblue;}
        #right {float:right; width: 350px; background-color: green;}
        
        #top {background-color: skyblue;}
        #bottom {background-color: blueviolet;}
    </style>
</head>
<body>
    <div id="top">Lorem ipsum dolor sit amet.</div>
    <div id="middle">
        <div id="left">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique facilis placeat in! Dolorum inventore laboriosam nisi vitae veniam impedit ullam eum placeat cum, assumenda perspiciatis recusandae, natus eaque molestias qui?
        Earum optio facilis cumque maxime. Nulla a accusamus tempore necessitatibus placeat nostrum eum itaque repudiandae ipsa? Alias ducimus a labore, aspernatur expedita harum, voluptatum, eum debitis enim voluptatibus nam ad.
        Dolores, iusto placeat, sint exercitationem sunt cumque laboriosam tenetur, maxime ad a voluptates illo quae odit consequuntur obcaecati rem facere quaerat impedit ex nulla ipsa eveniet voluptatum quibusdam? Commodi, numquam?</div>
        <div id="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus aliquam natus modi eligendi dicta unde eveniet qui magni totam, amet saepe quisquam cumque rem. Libero, amet? Voluptas, consequuntur. Harum, aspernatur!
        A aspernatur est, neque numquam, explicabo aliquam consequuntur enim facere natus, ratione ducimus fugiat. Voluptatibus eius maiores repellat velit accusamus, atque minima eum tempora a minus totam harum? Et, itaque?
        Impedit perferendis quibusdam possimus eaque esse pariatur magnam ex corrupti quo consequatur iste inventore doloremque magni sapiente, atque dolorum recusandae sed enim? Nulla repudiandae voluptatibus hic neque laborum veritatis saepe.
        Sapiente, sint dolorem? Dolore at eveniet nam. Earum, ipsa alias. Et corrupti fugiat voluptatibus expedita, natus beatae sint praesentium ad error veritatis modi dicta vitae cum libero rerum repudiandae nam!
        Minima enim minus quasi voluptate nulla ex architecto quidem atque in aut perferendis sapiente vel culpa reprehenderit mollitia recusandae illum, at quae? Qui, necessitatibus adipisci cum voluptatum pariatur soluta! Perferendis?</div>
    </div>
    <div id="bottom">Lorem ipsum dolor sit.</div>
</html>

Twitter Facebook LinkedIn

Chaelyn Kang

HTML5 5일차

배경 속성

실습

글꼴

글꼴 실습

글자 수직 정렬

실습

포지션 속성

실습

float 속성

실습

실습2

Layout

실습

실습2

실습3

공유하기

댓글남기기

참고

Dockerfile, private-registry

AWS 4일차

AWS 3일차

AWS 2일차