가오리의 코딩일기

[2주차] 2022 여름방학 HTML & CSS 세미나1 본문

HTML+CSS+JavaScript/세미나

[2주차] 2022 여름방학 HTML & CSS 세미나1

류경혜 2022. 7. 19. 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>DIVIDE</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <article class="bigBox">
      <div class="box"></div>
      <div class="box" id="long"></div>
      <div class="box"></div>
    </article>
  </body>
</html>
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: rgb(255, 98, 0);
  display: flex;
  justify-content: center;
  align-items: center;
}
.bigBox {
  background-color: rgb(226, 223, 200);
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}
.box {
  width: 100px;
  height: 100px;
  background-color: rgb(19, 61, 18);
  border: 5px solid white;
}
#long {
  width: 400px;
  border: 5px dashed white;
}
저작자표시

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

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