가오리의 코딩일기

세미나 3회차 전(2) 본문

HTML+CSS+JavaScript/세미나

세미나 3회차 전(2)

류경혜 2022. 1. 28. 17:00

 

<!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>The Best Colors</title>
    <link rel="stylesheet" href="color.css">
</head>
<body>
    <div class="header">
        <h1> The Best Colors</h1>
        <div class="container">
            <div class="square tomato">
                <div class="name">
                    <p>Tomato<br> #FF6347</p>
                </div>
            </div>
            <div class="square teal">
                <div class="name">
                    <p>Teal<br> #008080</p>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="square burlywood">
                <div class="name">
                    <p>Burlywood<br>#DEB887</p>
                </div>
            </div>
            <div class="square thistle">
                <div class="name">
                    <p>Thistle<br>#D7BFD7</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

 

body{ background-color: lightgrey; overflow: hidden;}
.header h1{ text-align: center;}
p{
    font-size: x-large;
    font-weight: bolder;
}
.container{
    display: flex;
    align-items: center;
    justify-content: space-around ;
    margin: 20px 600px;
}
.name{
    width: 205px;
    height: 105px;
    margin: 10px;
    background-color: white;
    position : relative;
    right: 11px;
}
.square{
    width: 200px;
    height: 300px;
    border: 7px solid white;
}
.tomato{ background-color: #ff6347; }
.teal{ background-color: #008080;}
.burlywood{ background-color: #deb887;}
.thistle{ background-color: #d7bfd7;}
저작자표시

'HTML+CSS+JavaScript > 세미나' 카테고리의 다른 글

세미나 3회차(2)  (0) 2022.02.07
세미나 3회차(1)  (0) 2022.02.06
세미나 3회차 전(1)  (0) 2022.01.27
세미나 2회차  (0) 2022.01.25
세미나 2회차 전  (0) 2022.01.18
'HTML+CSS+JavaScript/세미나' Related Articles more