[ifp_html_css] color

2022년 06월 04일

홍유진
작성자
2022.06.04.:36

[실행 화면]

[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>Color</title>
  <link rel="stylesheet" href="style_color.css">
</head>
<body>
  <h1>The Best Colors</h1>
  <div class="wrapper">
    <div class="container">
      <div class="color tomato">
        <div class="color_bg"></div>
        <div class="color_info">
          <h3>Tomato</h3>
          <h5>#FF6347</h5>
        </div>
      </div>
      <div class="color teal">
        <div class="color_bg"></div>
        <div class="color_info">
          <h3>Teal</h3>
          <h5>#008080</h5>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="color burlywood">
        <div class="color_bg"></div>
        <div class="color_info">
          <h3>Burlywood</h3>
          <h5>#DEB887</h5>
        </div>
      </div>
      <div class="color thistle">
        <div class="color_bg"></div>
        <div class="color_info">
          <h3>Thistle</h3>
          <h5>#D7BFD7</h5>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

[css 소스]

body {
  height: 100vh;
  background-color:rgb(219, 217, 217);
}
h1 {
  text-align: center;
  margin-bottom: 50px;
}
.wrapper {
  width: 450px;
  margin: 0px auto;
}
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.color {
  width: 200px;
  position: relative;
  margin-bottom: 20px;
}
.tomato .color_bg {
  background-color: tomato;
}
.teal .color_bg {
  background-color: teal;
}
.burlywood .color_bg {
  background-color: burlywood;
}
.thistle .color_bg {
  background-color: thistle;
}
.color_bg {
  border: 5px white solid;
  height: 300px;
}
.color_info {
  position: absolute;
  width: 100%;
  background-color: white;
  top: 20px;
  padding: 0px 10px;
  box-sizing: border-box;
}

: 처음에 4개의 요소를 한 컨테이너에 넣었는데 알고 보니 tomato, teal 그리고 burlywood, thistle 이렇게 나눠야 하는 거였다.

'Web Frontend > HTML_CSS' 카테고리의 다른 글

[ifp_html_css] Gredient (0)	2022.06.04
[ifp_html_css] CSS diner 21 ~ 32 (0)	2022.06.03
[ifp_html_css] CSS diner 11 ~ 20 (0)	2022.06.03
[ifp_html_css] CSS diner 01 ~ 10 (0)	2022.06.03
[ifp_css_html] 나누기 (0)	2022.06.03

다음 글이 없습니다.

이전 글이 없습니다.

[실행 화면]

[html 소스]

[css 소스]

'Web Frontend > HTML_CSS' 카테고리의 다른 글

티스토리툴바