가오리의 코딩일기

[3주차] 2022 여름방학 HTML & CSS 세미나 과제 본문

HTML+CSS+JavaScript/세미나

[3주차] 2022 여름방학 HTML & CSS 세미나 과제

류경혜 2022. 9. 23. 18:32

index.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>COIN</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div><img src="./coin.png" alt="" /></div>
  </body>
</html>

style.css

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
div {
  transition: background-color 1s ease-in-out;
  border: 3px solid black;
}
img {
  width: 300px;
  height: 300px;
  transition: 3s ease-in-out;
}
img:hover {
  transform: rotateX(360deg) scale(1.5);
}

 

 

 

게임으로 flex 연습(13단계까지)

 

Gradation

index.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>Gradation</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <article>
      <div class="circle">
        <div class="big">
          <div class="front">
            <div class="small"></div>
          </div>
          <div class="middle">
            <div class="small"></div>
            <div class="small"></div>
          </div>
          <div class="bottom">
            <div class="small"></div>
            <div class="small"></div>
            <div class="small"></div>
          </div>
        </div>
      </div>
    </article>
  </body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
  background-color: rgb(240, 240, 150);
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.circle {
  width: 600px;
  height: 600px;
  background: linear-gradient(60deg, #0093e9 0%, #80d0c7 50%, #0093e9 100%);
  border-radius: 50%;
  border: 5px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.big {
  width: 400px;
  height: 400px;
  border: 5px solid white;
  background: linear-gradient(90deg, #8ec5fc 0%, #e0c3fc 50%, #8ec5fc 100%);
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
.small {
  width: 100px;
  height: 100px;
  border: 5px solid white;
}
.front,
.middle,
.bottom {
  display: flex;
  justify-content: space-around;
}
.front div {
  background: #0093e9;
}
.middle div {
  background: #16a085;
}
.bottom div {
  background: #f4d03f;
}
저작자표시

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

[5주차] 2022 여름방학 HTML & CSS 세미나  (0) 2022.09.23
[4주차] 2022 여름방학 HTML & CSS 세미나  (0) 2022.09.23
[3주차] 2022 여름방학 HTML & CSS 세미나  (0) 2022.09.23
[2주차] 2022 여름방학 HTML & CSS 세미나 정리  (0) 2022.07.21
[2주차] 2022 여름방학 HTML & CSS 세미나2  (0) 2022.07.20
'HTML+CSS+JavaScript/세미나' Related Articles more