2-1. (2) 실습 230321

text-color.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>
        body{
            background-color: #222;
        }
        .text1{
            color:rgb(255,255,255);
        }
        .text2{
            /* 투명도 0.8 */
            color:rgb(255,255,255,0.8);
        }
        .text3{
            color:rgb(255,255,255,0.5);
        }
        .text4{
            color:rgb(255,255,255,0.2);
            /* 생략가능 */
            /* color:rgb(255,255,255,2);*/ 
        }
    </style>
</head>
<body>
    <h1 class="text1">HTML+CSS3</h1>
    <h1 class="text2">HTML+CSS3</h1>
    <h1 class="text3">HTML+CSS3</h1>
    <h1 class="text4">HTML+CSS3</h1>
</body>
</html>

div-color.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>
        div{
            width:300px;
            /* dotted: 점선 */
            border: 5px dotted #222;
            background:skyblue;
            /* 테두리 아래 여백 20px */
            margin-bottom: 20px;
            /* 테두리 안쪽 여백 35px */
            padding:35px;
        }
        .bg1{
            /* 기본 값, 배경 이미지가 테두리까지 */
            background-clip: border-box;
        }
        .bg2{
            /* 배경이미지가 테두리 전, 패딩까지 */
            background-clip:padding-box;
        }
        .bg3{
            /* 배경 이미지가 패딩 전, 내용까지 */
            background-clip:content-box;
        }
    </style>
</head>

<body>
    <div class="bg1">
        <p>
            <strong>토마토:</strong>
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
        </p>
    </div>

    <div class="bg2">
        <p>
            <strong>토마토:</strong>
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
        </p>
    </div>

    <div class="bg3">
        <p>
            <strong>토마토:</strong>
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
            토마토는 비타민 A,C가 풍부할 뿐 아니라 희귀한 성분인 비타민 h와 P까지 포함된 과일이다.
        </p>
    </div>
</body>

</html>

bg-color.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>
        body {
            /* background-color: #0099ff; */
            background-color: #09f;
        }

        div {
            background-color: white;
            width: 90%;
            padding: 15px;
            border:1px solid black;
        }
        p{line-height: 30px;}
    </style>
</head>

<body>
    <div>
        <h1>초콜릿(Chocolate)</h1>
        <p>
            초콜릿은 카카오 콩을 재료로 가공한 식품이다.
            초콜릿은 카카오 콩을 재료로 가공한 식품이다.
            초콜릿은 카카오 콩을 재료로 가공한 식품이다.
            초콜릿은 카카오 콩을 재료로 가공한 식품이다.
            초콜릿은 카카오 콩을 재료로 가공한 식품이다.
        </p>
    </div>
</body>

</html>

bg-img.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>
        body{
            background-image: url(images/bg1.png);
        }
    </style>
</head>
<body>
    
</body>
</html>

bg-size.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>
        div{
            /* double 이중실선 */
            border:2px double black;
            width: 500px;
            height:500px;
            margin-bottom:20px;
        }
        .bg1{
            background:url('images/bg4.jpg');
            /* auto: 기본값 */
            background-size: auto;
        }

        .bg2{
            background:url('images/bg4.jpg');
            /* 기본은 공간 채울때까지 반복*/
            background-size: 200px 150px
        }
        .bg3{
            /* 반복 안함 */
            background:url('images/bg4.jpg') no-repeat;
            background-size: 200px 150px;
        }
        .bg4{
            /* 비율로 차지, 화면 늘리거나 줄이면 사이즈 바뀜 */
            background:url(images/bg4.jpg) no-repeat;
            background-size: 60% 40%
        }
        .bg5{
            background:url(images/bg4.jpg) no-repeat;
            /* 원본 이미지가 가로가 길어서 아래 여백 생김 */
            background-size: contain;
        }

        .bg6{
            background:url(images/bg4.jpg);
            /* 여백을 늘리면서 채워서 오른쪽이 짤림 */
            background-size: cover;
        }
        .bg7{
            background:url(images/bg4.jpg);
            /* 억지로 비율을 맞추면서 세로나 가로로 뒤틀림 */
            background-size: 100% 100%;
        }

    </style>
</head>
<body>
    <div class="bg1"></div>
    <div class="bg2"></div>
    <div class="bg3"></div>
    <div class="bg4"></div>
    <div class="bg5"></div>
    <div class="bg6"></div>
    <div class="bg7"></div>
</body>
</html>