가오리의 코딩일기

[6주차] 2022 여름방학 HTML & CSS 세미나 정리

류경혜 — Fri, 23 Sep 2022 18:43:35 +0900

✏️ z-index

→ 쌓임 맥락(Stacking context)

자식 엘리먼트들의 z-index 속성 값은 부모 안에서만 의미를 가진다

부모 엘리먼트의 쌓임 맥락을 구성하는 하나의 단위

부모가 가지고 있는 z-index 값이라는 기본 속성이 낮으면 자식의 z-index값이 높아도 부모의 쌓임 순서에 따른다

→ position 속성을 이용하면 요소를 겹치게 놓을 수 있다

→ 이 요소들의 수직 위치를 z-index 속성으로 정한다

→ 숫자가 클수록 위로, 작을수로 아래로, 기본값_0

✏️ outline

→ border가 테두리라고 한다면 outline은 border의 바깥 외곽선을 말한다

→ outline의 선 너비는 레이아웃에 관여하지 않고 눈에만 선이 보인다

✏️ display: inline-flex

→ display: flex로 지정된 flex container는 block 요소와 같은 수직 쌓임을 가진다

→ display: inline-flex로 지정된 flex container는 inline block 요소와 같은 수평 쌓임을 가진다

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

류경혜 — Fri, 23 Sep 2022 18:42:11 +0900

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>2022 Summer Vacation Seminar - HTML/CSS</title>
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    <link href="https://fonts.googleapis.com/css2?family=DynaPuff&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Signika&display=swap" rel="stylesheet" />
  </head>
  <body>
    <header class="flex-div">
      <span class="material-symbols-outlined icon"> integration_instructions </span>
      <h1>gaori</h1>
      <div class="span-div">
        <a href="https://ryu-ddo.notion.site/2022-summer-vacation-HTML-CSS-seminar-e59ed2189cd64d48bad90acd9aaf0850">
          <span class="material-symbols-outlined icon"> description </span>
        </a>
        <a href="https://ryu-ddo.notion.site/6b8799f68f8d4c50b32eb1c2fcca2c6d">
          <span class="material-symbols-outlined icon"> contacts </span>
        </a>
      </div>
    </header>
    <!-- sidebar start -->
    <nav class="flex-div">
      <ul class="ul-left sidebar">
        <a href="../week1/index.html"><li>Information</li></a>
        <a href="../week2/robot/index.html"><li>Character Card</li></a>
        <a href="../week3/movingCard/index.html"><li>Cards</li></a>
        <a href="../week4/index.html"><li>Halloween</li></a>
        <a href="./templates/week5/index.html"><li>Sign Up</li></a>
      </ul>
      <ul class="ul-right sidebar">
        <a href="../week3/gradient/index.html"><li>Gradient</li></a>
        <a href="./templates/week3/transition.html"><li>Transition</li></a>
        <a href="./templates/week3/transform.html"><li>Transform</li></a>
        <a href="./templates/week2/index.html"><li>SpaceSuit</li></a>
        <a href="#"><li>VidTube</li></a>
        <!-- VidTube: url 연결 후 연결 예정 -->
      </ul>
    </nav>
    <!-- main start -->
    <main>
      <div id="change-img"></div>
      <!-- first container -->
      <div class="container flex-div">
        <!-- list1 -->
        <div class="img-list">
          <a href="../week1/index.html">
            <img src="./images/list1.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-ako.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Information To My Favorite Thing Page</p>
              <p class="date">2022.07.10</p>
            </div>
          </div>
        </div>
        <!-- list2 -->
        <div class="img-list">
          <a href="../week2/robot/index.html">
            <img src="./images/list2.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-ako.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Character Card Page</p>
              <p class="date">2022.07.17</p>
            </div>
          </div>
        </div>
        <!-- list3 -->
        <div class="img-list">
          <a href="../week3/coin/index.html">
            <img src="./images/list3.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-gaori.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Flip Coin Page</p>
              <p class="date">2022.07.24</p>
            </div>
          </div>
        </div>
      </div>
      <!-- second container -->
      <div class="container flex-div">
        <!-- list4 -->
        <div class="img-list">
          <a href="../week3/gradient/index.html">
            <img src="./images/list4.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-ako.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Gradient Page</p>
              <p class="date">2022.07.24</p>
            </div>
          </div>
        </div>
        <!-- list5 -->
        <div class="img-list">
          <a href="../week4/index.html">
            <img src="./images/list5.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-gaori.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Halloween Page</p>
              <p class="date">2022.08.02</p>
            </div>
          </div>
        </div>
        <!-- list6 -->
        <div class="img-list">
          <a href="#">
            <!-- VidTube: url 연결 후 연결 예정 -->
            <img src="./images/list6.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-ako.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Make A VidTube Page</p>
              <p class="date">2022.08.14</p>
            </div>
          </div>
        </div>
      </div>
      <!-- third container -->
      <div class="container flex-div">
        <!-- list7 -->
        <div class="img-list">
          <a href="./templates/week1/index.html">
            <img src="./images/list7.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-ako.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Movie Information Page</p>
              <p class="date">2022.07.10</p>
            </div>
          </div>
        </div>
        <!-- list8 -->
        <div class="img-list">
          <a href="./templates/week2/index.html">
            <img src="./images/list8.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-gaori.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">SpaceSuit Page</p>
              <p class="date">2022.07.17</p>
            </div>
          </div>
        </div>
        <!-- list9 -->
        <div class="img-list">
          <a href="./templates/week3/transform.html">
            <img src="./images/list9.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-ako.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Transition Page</p>
              <p class="date">2022.07.24</p>
            </div>
          </div>
        </div>
        <!-- this -->
      </div>
      <!-- fourth container -->
      <div class="container flex-div">
        <!-- list10 -->
        <div class="img-list">
          <a href="./templates/week3/transition.html">
            <img src="./images/list10.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-gaori.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Transform Page</p>
              <p class="date">2022.07.24</p>
            </div>
          </div>
        </div>
        <!-- list11 -->
        <div class="img-list">
          <a href="./templates/week5/index.html">
            <img src="./images/list11.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-gaori.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">SignUp Page</p>
              <p class="date">2022.08.14</p>
            </div>
          </div>
        </div>
        <!-- list12 -->
        <div class="img-list">
          <a href="./templates/week3/index.html">
            <img src="./images/list0.png" class="list" />
          </a>
          <div class="flex-div">
            <img src="./images/icon-ako.jpeg" class="img-icon" />
            <div class="list-info">
              <p class="title">Flip Cards Page</p>
              <p class="date">2022.08.02</p>
            </div>
          </div>
        </div>
        <!-- this -->
      </div>
    </main>
    <!-- footer start -->
    <footer class="flex-div">
      <div class="footer-left">
        <p class="title">gaori</p>
        <p>Monday to Friday - 9am to 9pm</p>
        <p>Saturday and Sunday - 8am to 11pm</p>
      </div>
      <div class="footer-middle">
        <p class="flex-div"><span class="material-symbols-outlined"> home </span>Seoul</p>
        <p class="flex-div"><span class="material-symbols-outlined"> send </span>example@gamil.com</p>
        <p class="flex-div"><span class="material-symbols-outlined"> call </span>010-1234-5678</p>
      </div>
      <div class="footer-right">
        <p class="flex-div"><span class="material-symbols-outlined"> priority_high </span> Notice</p>
        <p class="flex-div"><span class="material-symbols-outlined"> question_mark </span>Q&A</p>
        <p class="flex-div"><span class="material-symbols-outlined"> rate_review </span> Review</p>
      </div>
    </footer>
    <script src="./main.js"></script>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
  font-family: "Signika", sans-serif;
  color: #5a5a5a;
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* header start */
.flex-div {
  display: flex;
  align-content: center;
}
header {
  width: calc(100% - 340px);
  height: 50px;
  justify-content: space-between;
  position: fixed;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.83);
}
.material-symbols-outlined.icon {
  font-size: 35px;
  font-weight: 500;
  color: black;
}
h1 {
  font-family: "DynaPuff", cursive;
  color: black;
}
/* sidebar start */
.sidebar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ul-left,
.ul-right {
  width: 170px;
  margin: 0 15px;
  position: fixed;
}
.ul-left {
  left: 0;
}
.ul-right {
  text-align: end;
  right: 0;
}
li {
  list-style: none;
  font-size: 20px;
  margin-top: 20px;
}
li:hover {
  color: #789bce;
}
/* main start */
main {
  width: calc(100% - 340px);
  height: fit-content;
  padding-left: 170px;
  padding-right: 170px;
  padding-top: 50px;
}
#change-img {
  width: 100%;
  height: 500px;
  background: center/contain no-repeat black;
}
.img-list {
  width: 33%;
  padding-top: 10px;
  padding-right: 0.5%;
}
.list {
  width: 100%;
}
.img-icon {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  margin: 3px 3px;
}
.title {
  font-weight: 600;
  font-size: 17px;
  color: black;
}
.date {
  color: #5a5a5a;
  margin-top: 3px;
}
/* footer start */
footer {
  width: calc(100vw - 340px);
  margin: 40px auto 0;
  justify-content: space-between;
  align-items: center;
}
footer > div > p:nth-of-type(2) {
  margin-top: 5px;
  margin-bottom: 5px;
}
.footer-left .title {
  font-family: "DynaPuff", cursive;
  font-size: 20px;
  margin-left: 5px;
}
.footer-middle,
.footer-right,
.footer-left {
  margin-left: 30px;
  width: 33%;
}
.footer-middle,
.footer-right {
  align-items: center;
}

main.js

const imgArr = new Array();
for (let i = 0; i < 12; i++) {
  imgArr[i] = `list${i}`;
}
function showImage() {
  const imgNum = Math.round(Math.random() * 11);
  const objImg = document.getElementById("change-img");
  objImg.style.backgroundImage = `url(./images/list${imgNum}.png)`;
}
setInterval(() => showImage(), 3000);

도메인

https://ifp-2022-summer-seminar.netlify.app/

2022 Summer Vacation Seminar - HTML/CSS

Information To My Favorite Thing Page 2022.07.10

ifp-2022-summer-seminar.netlify.app

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

류경혜 — Fri, 23 Sep 2022 18:39:29 +0900

https://www.youtube.com/watch?v=4ykAepVkG5Y

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>Video Sharing Website - Easy Tutorials YouTube Channel</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <nav class="flex-div">
      <div class="nav-left flex-div">
        <img src="./images/menu.png" class="menu-icon" />
        <img src="./images/logo.png" class="logo" />
      </div>
      <div class="nav-middle flex-div">
        <div class="search-box flex-div">
          <input type="text" placeholder="Search" name="" id="" />
          <img src="./images/search.png" />
        </div>
        <img src="./images/voice-search.png" class="mic-icon" />
      </div>
      <div class="nav-right flex-div">
        <img src="./images/upload.png" />
        <img src="./images/more.png" />
        <img src="./images/notification.png" />
        <img src="./images/Jack.png" class="user-icon" />
      </div>
    </nav>
    <!-- flex-nav end -->
    <div class="sidebar">
      <div class="shortcut-links">
        <a href="">
          <img src="./images/home.png" />
          <p>Home</p>
        </a>
        <a href="">
          <img src="./images/explore.png" />
          <p>Explore</p>
        </a>
        <a href="">
          <img src="./images/subscriprion.png" />
          <p>Subscription</p>
        </a>
        <a href="">
          <img src="./images/library.png" />
          <p>Library</p>
        </a>
        <a href="">
          <img src="./images/history.png" />
          <p>History</p>
        </a>
        <a href="">
          <img src="./images/playlist.png" />
          <p>Playlist</p>
        </a>
        <a href="">
          <img src="./images/messages.png" />
          <p>Messages</p>
        </a>
        <a href="">
          <img src="./images/show-more.png" />
          <p>Show More</p>
        </a>
        <hr />
      </div>
      <div class="subscribed-list">
        <h3>SUBSCRIBED</h3>
        <a href="">
          <img src="./images/Jack.png" />
          <p>Jack Nicholson</p>
        </a>
        <a href="">
          <img src="./images/simon.png" />
          <p>Simon Baker</p>
        </a>
        <a href="">
          <img src="./images/tom.png" />
          <p>Tom Hardy</p>
        </a>
        <a href="">
          <img src="./images/megan.png" />
          <p>Megan Ryan</p>
        </a>
        <a href="">
          <img src="./images/cameron.png" />
          <p>cameron Diaz</p>
        </a>
      </div>
    </div>
    <!-- sidebar end -->
    <div class="container">
      <div class="banner">
        <img src="./images/banner.png" />
      </div>
      <div class="list-container">
        <!-- vid-list start -->
        <div class="vid-list">
          <a href="./play-video.html">
            <img src="./images/thumbnail1.png" class="thumbnail" />
          </a>
          <div class="flex-div">
            <img src="./images/Jack.png" />
            <div class="vid-info">
              <a href="./play-video.html">Best channel to learn coding that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views &bull; 2days</p>
            </div>
          </div>
        </div>
        <!-- vid-list start -->
        <div class="vid-list">
          <a href="">
            <img src="./images/thumbnail2.png" class="thumbnail" />
          </a>
          <div class="flex-div">
            <img src="./images/Jack.png" />
            <div class="vid-info">
              <a href="">Best channel to learn coding that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views &bull; 2days</p>
            </div>
          </div>
        </div>
        <!-- vid-list start -->
        <div class="vid-list">
          <a href="">
            <img src="./images/thumbnail3.png" class="thumbnail" />
          </a>
          <div class="flex-div">
            <img src="./images/Jack.png" />
            <div class="vid-info">
              <a href="">Best channel to learn coding that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views &bull; 2days</p>
            </div>
          </div>
        </div>
        <!-- vid-list start -->
        <div class="vid-list">
          <a href="">
            <img src="./images/thumbnail4.png" class="thumbnail" />
          </a>
          <div class="flex-div">
            <img src="./images/Jack.png" />
            <div class="vid-info">
              <a href="">Best channel to learn coding that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views &bull; 2days</p>
            </div>
          </div>
        </div>
        <!-- vid-list start -->
        <div class="vid-list">
          <a href="">
            <img src="./images/thumbnail5.png" class="thumbnail" />
          </a>
          <div class="flex-div">
            <img src="./images/Jack.png" />
            <div class="vid-info">
              <a href="">Best channel to learn coding that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views &bull; 2days</p>
            </div>
          </div>
        </div>
        <!-- vid-list start -->
        <div class="vid-list">
          <a href="">
            <img src="./images/thumbnail6.png" class="thumbnail" />
          </a>
          <div class="flex-div">
            <img src="./images/Jack.png" />
            <div class="vid-info">
              <a href="">Best channel to learn coding that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views &bull; 2days</p>
            </div>
          </div>
        </div>
        <!-- vid-list start -->
        <div class="vid-list">
          <a href="">
            <img src="./images/thumbnail7.png" class="thumbnail" />
          </a>
          <div class="flex-div">
            <img src="./images/Jack.png" />
            <div class="vid-info">
              <a href="">Best channel to learn coding that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views &bull; 2days</p>
            </div>
          </div>
        </div>
        <!-- vid-list start -->
        <div class="vid-list">
          <a href="">
            <img src="./images/thumbnail8.png" class="thumbnail" />
          </a>
          <div class="flex-div">
            <img src="./images/Jack.png" />
            <div class="vid-info">
              <a href="">Best channel to learn coding that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views &bull; 2days</p>
            </div>
          </div>
        </div>
        <!-- vid-list[8] end -->
      </div>
    </div>
    <!-- main end -->
    <script src="./script.js"></script>
  </body>
</html>

play-video.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>Play Video - Easy Tutorials YouTube Channel</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <nav class="flex-div">
      <div class="nav-left flex-div">
        <img src="./images/menu.png" class="menu-icon" />
        <img src="./images/logo.png" class="logo" />
      </div>
      <div class="nav-middle flex-div">
        <div class="search-box flex-div">
          <input type="text" placeholder="Search" name="" id="" />
          <img src="./images/search.png" />
        </div>
        <img src="./images/voice-search.png" class="mic-icon" />
      </div>
      <div class="nav-right flex-div">
        <img src="./images/upload.png" />
        <img src="./images/more.png" />
        <img src="./images/notification.png" />
        <img src="./images/Jack.png" class="user-icon" />
      </div>
    </nav>
    <!-- flex-nav end -->
    <div class="container play-container">
      <div class="row">
        <div class="play-video">
          <video controls autoplay>
            <source src="./images/video.mp4" type="video/mp4" />
          </video>
          <div class="tags">
            <a href="">#Coding</a>
            <a href="">#HTML</a>
            <a href="">#CSS</a>
            <a href="">#JavaScript</a>
          </div>
          <h3>Best YouTube Channel To Learn Web Development</h3>
          <div class="play-video-info">
            <p>1225 Views &bull; 2 days ago</p>
            <div>
              <a href=""><img src="./images/like.png" />125</a>
              <a href=""><img src="./images/dislike.png" />2</a>
              <a href=""><img src="./images/share.png" />Share</a>
              <a href=""><img src="./images/save.png" />Save</a>
            </div>
          </div>
          <hr />
          <div class="publisher">
            <img src="./images/Jack.png" />
            <div>
              <p>Easy Tutorials</p>
              <span>500k Subscribers</span>
            </div>
            <button type="button">Subscribe</button>
          </div>
          <div class="vid-description">
            <p>Channel that makes learning easy</p>
            <p>Subscribe Easy Tutorials to watch more tutorials on web development</p>
            <hr />
            <h4>134 Comments</h4>
            <div class="add-comment">
              <img src="./images/Jack.png" />
              <input type="text" placeholder="Write comments..." />
            </div>
            <!-- old-comment start  -->
            <div class="old-comment">
              <img src="./images/Jack.png" />
              <div>
                <h3>Jack Nicholson <span>2 days ago</span></h3>
                <p>
                  A global computer network providing a variety of information and communication facilities, consisting of interconnected networks using
                  standardized communication protocols.
                </p>
                <div class="acomment-action">
                  <img src="./images/like.png" />
                  <span>244</span>
                  <img src="./images/dislike.png" />
                  <span>2</span>
                  <span>REPLY</span>
                  <a href="">All Replies</a>
                </div>
              </div>
            </div>
            <!-- old-comment start  -->
            <div class="old-comment">
              <img src="./images/Jack.png" />
              <div>
                <h3>Jack Nicholson <span>2 days ago</span></h3>
                <p>
                  A global computer network providing a variety of information and communication facilities, consisting of interconnected networks using
                  standardized communication protocols.
                </p>
                <div class="acomment-action">
                  <img src="./images/like.png" />
                  <span>244</span>
                  <img src="./images/dislike.png" />
                  <span>2</span>
                  <span>REPLY</span>
                  <a href="">All Replies</a>
                </div>
              </div>
            </div>
            <!-- f -->
          </div>
        </div>
        <div class="right-sidebar">
          <!-- side-video-list start -->
          <div class="side-video-list">
            <a href="" class="small-thumbnail">
              <img src="./images/thumbnail1.png" />
            </a>
            <div class="vid-info">
              <a href="">Best channel that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views</p>
            </div>
          </div>
          <!-- side-video-list start -->
          <div class="side-video-list">
            <a href="" class="small-thumbnail">
              <img src="./images/thumbnail2.png" />
            </a>
            <div class="vid-info">
              <a href="">Best channel that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views</p>
            </div>
          </div>
          <!-- side-video-list start -->
          <div class="side-video-list">
            <a href="" class="small-thumbnail">
              <img src="./images/thumbnail3.png" />
            </a>
            <div class="vid-info">
              <a href="">Best channel that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views</p>
            </div>
          </div>
          <!-- side-video-list start -->
          <div class="side-video-list">
            <a href="" class="small-thumbnail">
              <img src="./images/thumbnail4.png" />
            </a>
            <div class="vid-info">
              <a href="">Best channel that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views</p>
            </div>
          </div>
          <!-- side-video-list start -->
          <div class="side-video-list">
            <a href="" class="small-thumbnail">
              <img src="./images/thumbnail5.png" />
            </a>
            <div class="vid-info">
              <a href="">Best channel that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views</p>
            </div>
          </div>
          <!-- side-video-list start -->
          <div class="side-video-list">
            <a href="" class="small-thumbnail">
              <img src="./images/thumbnail6.png" />
            </a>
            <div class="vid-info">
              <a href="">Best channel that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views</p>
            </div>
          </div>
          <!-- side-video-list start -->
          <div class="side-video-list">
            <a href="" class="small-thumbnail">
              <img src="./images/thumbnail7.png" />
            </a>
            <div class="vid-info">
              <a href="">Best channel that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views</p>
            </div>
          </div>
          <!-- side-video-list start -->
          <div class="side-video-list">
            <a href="" class="small-thumbnail">
              <img src="./images/thumbnail8.png" />
            </a>
            <div class="vid-info">
              <a href="">Best channel that help you to be a web developer</a>
              <p>Easy Tutorials</p>
              <p>15k views</p>
            </div>
          </div>
          <!-- side-video-list end -->
        </div>
      </div>
    </div>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
  font-family: "poppins", sans-serif;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #5a5a5a;
}
img {
  cursor: pointer;
}
.flex-div {
  display: flex;
  align-items: center;
}
nav {
  padding: 10px 2%;
  justify-content: space-between;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10; /* 쌓임 맥락 */
}
.nav-right img {
  width: 25px;
  margin-right: 25px;
}
.nav-right .user-icon {
  width: 35px;
  border-radius: 50%;
  margin-right: 0;
}
.nav-left .menu-icon {
  width: 22px;
  margin-right: 25px;
}
.nav-left .logo {
  width: 130px;
}
.nav-middle .mic-icon {
  width: 16px;
}
.nav-middle .search-box {
  border: 1px solid #ccc;
  margin-right: 15px;
  padding: 8px 12px;
  border-radius: 25px;
}
.nav-middle .search-box input {
  width: 400px;
  border: 0;
  outline: 0;
  background: transparent;
}
.nav-middle .search-box img {
  width: 15px;
}
/* flex-div end */
.sidebar {
  background: #fff;
  width: 15%;
  height: 100vh;
  position: fixed;
  top: 0;
  padding-left: 2%;
  padding-top: 80px;
}
.shortcut-links a img {
  width: 20px;
  margin-right: 20px;
}
.shortcut-links a {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: fit-content; /* fit-content */
  flex-wrap: wrap;
}
.shortcut-links a:first-child {
  color: #ed3833;
}
.sidebar hr {
  border: 0;
  height: 1px;
  background-color: #ccc;
  width: 85%;
}
.subscribed-list h3 {
  font-size: 13px;
  margin: 20px 0;
  color: #5a5a5a;
}
.subscribed-list a {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  width: fit-content;
  flex-wrap: wrap;
}
.subscribed-list a img {
  width: 25px;
  border-radius: 50%;
  margin-right: 20px;
}
.small-sidebar {
  width: 5%;
}
.small-sidebar a p {
  display: none;
}
.small-sidebar h3 {
  display: none;
}
.small-sidebar hr {
  width: 50%;
  margin-bottom: 25px;
}
/* sidebar end */
.container {
  background: #f9f9f9;
  /* padding-left: 17%;
  padding-right: 2%;
  padding-top: 20px;
  padding-bottom: 20px; */
  padding: 20px 2% 20px 17%;
}
.large-container {
  padding-left: 7%;
}
.banner {
  width: 100%;
}
.banner img {
  width: 100%;
  border-radius: 8px;
}
.list-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-column-gap: 16px;
  grid-row-gap: 30px;
  margin-top: 15px;
}
.vid-list .thumbnail {
  width: 100%;
  border-radius: 5px;
}
.vid-list .flex-div {
  align-items: flex-start;
  margin-top: 7px;
}
.vid-list .flex-div img {
  width: 35px;
  margin-right: 10px;
  border-radius: 50%;
}
.vid-info {
  color: #5a5a5a;
  font-size: 13px;
}
.vid-info a {
  color: #000;
  font-weight: 600;
  display: block;
  margin-bottom: 5px;
}
/* media */
¡¡{
  .menu-icon {
    display: none;
  }
  .sidebar {
    display: none;
  }
  .container,
  .large-container {
    padding-left: 5%;
    padding-right: 5%;
  }
  .nav-right img {
    display: none;
  }
  .nav-right .user-icon {
    display: block;
    width: 30px;
  }
  .nav-middle .search-box input {
    width: 100px;
  }
  .nav-middle .mic-icon {
    display: none;
  }
  .logo {
    width: 90px;
  }
}
/* play video page */
.play-container {
  padding-left: 2%;
}
.row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.play-video {
  flex-basis: 69%;
}
.right-sidebar {
  flex-basis: 30%;
}
.play-video video {
  width: 100%;
}
.side-video-list {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.side-video-list img {
  width: 100%;
}
.side-video-list .small-thumbnail {
  flex-basis: 49%;
}
.side-video-list .vid-info {
  flex-basis: 49%;
}
.play-video .tags a {
  color: #0000ff;
  font-size: 13px;
}
.play-video h3 {
  font-weight: 600;
  font-size: 22px;
}
.play-video .play-video-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 14px;
  color: #5a5a5a;
}
.play-video .play-video-info a img {
  width: 20px;
  margin-right: 8px;
}
.play-video .play-video-info a {
  display: inline-flex;
  align-items: center;
  margin-left: 15px;
}
.play-video hr {
  border: 0;
  height: 1px;
  background: #ccc;
  margin: 10px 0;
}
.publisher {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.publisher div {
  flex: 1;
  line-height: 18px;
}
.publisher img {
  width: 40px;
  border-radius: 50%;
  margin-right: 15px;
}
.publisher div p {
  color: black;
  font-weight: 600;
  font-size: 18px;
}
.publisher div span {
  font-size: 13px;
  color: #5a5a5a;
}
.publisher button {
  background-color: red;
  color: #fff;
  padding: 8px 30px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  cursor: pointer;
}
.vid-description {
  padding-left: 55px;
  margin: 15px 0;
}
.vid-description p {
  font-size: 14px;
  margin-bottom: 5px;
  color: #5a5a5a;
}
.vid-description h4 {
  font-size: 14px;
  color: #5a5a5a;
  margin-top: 15px;
}
.add-comment {
  display: flex;
  align-items: center;
  margin: 30px 0;
}
.add-comment img {
  width: 30px;
  border-radius: 50%;
  margin-right: 15px;
}
.add-comment input {
  border: 0;
  outline: 0;
  border-bottom: 1px solid #ccc;
  width: 100%;
  padding-top: 10px;
  background: transparent;
}
.old-comment {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.old-comment img {
  width: 35px;
  border-radius: 50%;
  margin-right: 15px;
}
.old-comment h3 {
  font-size: 14px;
  margin-bottom: 2px;
}
.old-comment h3 span {
  font-size: 12px;
  color: #5a5a5a;
  font-weight: 500;
  margin-left: 8px;
}
.old-comment .acomment-action {
  display: flex;
  align-items: center;
  margin: 8px 0;
  font-size: 14px;
}
.old-comment .acomment-action img {
  border-radius: 0;
  width: 20px;
  margin-right: 5px;
}
.old-comment .acomment-action span {
  margin-right: 20px;
  color: #5a5a5a;
}
.old-comment .acomment-action a {
  color: #0000ff;
}
/* media */
@media (max-width: 900px) {
  .play-video {
    flex-basis: 100%;
  }
  .right-sidebar {
    flex-basis: 100%;
  }
  .play-container {
    padding-left: 5%;
  }
  .vid-description {
    padding-left: 0;
  }
  .play-video .play-video-info a {
    margin-left: 0;
    margin-right: 15px;
    margin-top: 15px;
  }
}

script.js

const menuIcon = document.querySelector(".menu-icon");
const sidebar = document.querySelector(".sidebar");
const container = document.querySelector(".container");

menuIcon.onclick = function () {
  sidebar.classList.toggle("small-sidebar");
  container.classList.toggle("large-container");
};

도메인 연결

https://domain-test-html-css.vercel.app/

Video Sharing Website - Easy Tutorials YouTube Channel

domain-test-html-css.vercel.app

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

류경혜 — Fri, 23 Sep 2022 18:35:10 +0900

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>The Best Colors</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>The Best Colors</h1>
    <div class="wrapper">
      <div class="container">
        <div class="tomato color">
          <div class="color_bg"></div>
          <div class="color_info">
            <h3>Tomato</h3>
            <h5>#FF6347</h5>
          </div>
        </div>
        <!-- tomato-->
        <div class="teal color">
          <div class="color_bg"></div>
          <div class="color_info">
            <h3>Teal</h3>
            <h5>##008080</h5>
          </div>
        </div>
      </div>
      <!-- Teal-->
      <div class="container">
        <div class="burlywood color">
          <div class="color_bg"></div>
          <div class="color_info">
            <h3>Burlywood</h3>
            <h5>#DE8887</h5>
          </div>
        </div>
        <!-- Burlywood-->
        <div class="thistle color">
          <div class="color_bg"></div>
          <div class="color_info">
            <h3>Thistle</h3>
            <h5>#D78FD7</h5>
          </div>
        </div>
      </div>
      <!-- Thistle-->
    </div>
  </body>
</html>

style.css

body {
  margin: 0;
  height: calc(100vh - 20px);
  background-color: lightgray;
}
h1 {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 20px;
}
.wrapper {
  width: 450px;
  margin: 0 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 {
  height: 300px;
  border: 5px solid white;
}
.color_info {
  position: absolute;
  width: 100%;
  background-color: white;
  top: 20px;
  padding: 0px 10px;
  box-sizing: border-box;
}

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>LOGIN</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="login_form">
      <div class="login_form_headfer">
        <span class="menu">SIGN IN</span>
        <span class="menu">SIGN UP</span>
      </div>
      <form action="#" method="get">
        <input type="text" name="user_name" placeholder="UserName" />
        <input type="email" name="user_email" placeholder="Email ID" />
        <input type="password" name="user_password" placeholder="Password" />
        <div class="checkbox">
          <input type="checkbox" name="checkbox" />
          <label for="checkbox">I agree to terms and conditions</label>
        </div>
        <input type="submit" value="REGISTER" />
      </form>
    </div>
  </body>
</html>

style.css

@import url("<https://fonts.googleapis.com/css2?family=DynaPuff&display=swap>");
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background: url("./minions.jpg") no-repeat center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgb(249, 223, 72);
  font-family: "DynaPuff", cursive;
  font-weight: 400;
}
.login_form {
  width: 500px;
  height: 400px;
  padding: 20px 30px;
  background: url("./minions.jpg") no-repeat center/cover;
  background-size: 1800px;
  box-shadow: rgba(0, 0, 0, 0.6) 0px 19px 38px, rgba(0, 0, 0, 0.52) 0px 15px 12px;
}
.login_form_header {
  margin: 10px 0 40px;
  font-size: 20px;
  font-weight: 600;
}
.login_form span:hover {
  padding-bottom: 5px;
  border-bottom: 4px solid rgb(255, 204, 0);
  cursor: pointer;
}
.login_form_header:first-child {
  margin-right: 30px;
}
form {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
input {
  color: rgb(249, 223, 72);
  margin-top: 10px;
}
input::placeholder {
  color: rgb(255, 204, 0);
}
input:focus {
  outline: none;
}
form > input:not(input[type="submit"]) {
  width: 100%;
  height: 30px;
  border: none;
  border-bottom: 4px solid rgb(255, 204, 0);
  background-color: transparent;
  font-size: 20px;
}
.checkbox {
  width: 100%;
}
input[type="checkbox"],
label {
  cursor: pointer;
}
input[type="submit"] {
  width: 150px;
  height: 30px;
  padding-top: 2px;
  border: none;
  background-color: rgb(255, 204, 0);
  border-radius: 20px;
  color: white;
  cursor: pointer;
  font-family: "DynaPuff", cursive;
  font-weight: 400;
}

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

류경혜 — Fri, 23 Sep 2022 18:33:16 +0900

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>HALLOWEEN</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="wrapper">
      <!-- header start -->
      <header>
        <img src="./images/halloween-profile.png" alt="" class="profile" />
        <h1>Jack-O'-Lantern</h1>
        <p>
          A jack-o-lantern is a carved pumpkin, turnip,or other root vegetable lantern associated with Halloween. Its name comes from the phenomenon of a
          strange light flickering over peat bogs, call will-o'-the-wisp or jack-o'-lantern.
        </p>
      </header>
      <!-- header end -->
      <div class="contents">
        <div class="section">
          <h2>Information</h2>
          <ul>
            <li>1234@gmail.com</li>
            <li>000-3234-2344</li>
            <li>Seoul, Korea</li>
          </ul>
        </div>
        <!-- section end -->
        <div class="section skills">
          <h2>Skills</h2>
          <ul>
            <li>Photoshop</li>
            <li>Web Front-End</li>
            <li>Education</li>
          </ul>
        </div>
        <!-- section, skills end -->
      </div>
      <!-- contents end -->
      <footer>
        <h4>HAPPY HALLOWEEN</h4>
      </footer>
    </div>
  </body>
</html>

style.css

* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
/* 스크롤바 넓이 */
::-webkit-scrollbar {
  width: 10px;
}
/* 배경 색 */
::-webkit-scrollbar-track {
  background-color: #2b302f;
}
/* 바 색상, 둥근 정도 */
::-webkit-scrollbar-thumb {
  background-color: #6a121d;
  border-radius: 5px;
}
/* hover */
::-webkit-scrollbar-thumb:hover {
  background-color: #a14743;
}
.wrapper {
  /* height: 100vh; */
  height: 1300px;
  width: 100vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: url(./images/halloween-background.gif) no-repeat;
  background-size: cover;
}
header {
  height: 400px;
  width: 100vw;
  background: url(./images/halloween-header-bg.png) no-repeat center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
img {
  width: 200px;
}
h1 {
  color: rgb(248, 112, 255);
}
p {
  background-color: black;
  color: gray;
  width: 400px;
  border-radius: 10px;
  text-align: center;
}
li {
  list-style-type: none;
}
.contents {
  background-color: gray;
}
.section {
  background: url(./images/icon-information.png) no-repeat;
  background-position: 90% center;
  width: 720px;
  height: 180px;
  background-color: white;
  margin: 20px;
  padding: 20px;
}
.section li {
  background: url(./images/icon-jack2.png) no-repeat;
  padding: 10px 50px 10px;
}
.section li:hover {
  background: url(./images/icon-jack.png) no-repeat;
  color: rgb(255, 123, 0);
}
.skills {
  background-image: url(./images/icon-skills.png);
  background-repeat: no-repeat;
}
h2 {
  color: rgb(255, 123, 0);
  margin-bottom: 10px;
}
footer {
  width: 800px;
  height: 40px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
h4 {
  color: rgb(248, 112, 255);
}

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

류경혜 — Fri, 23 Sep 2022 18:32:06 +0900

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;
}

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

류경혜 — Fri, 23 Sep 2022 18:29:32 +0900

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>transform</title>
    <style>
      body {
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      img {
        width: 400px;
        border: 10px solid rgb(67, 93, 95);
        border-radius: 50%;
        transition: transform 3s ease-in-out;
        background-color: rgb(190, 234, 239);
      }
      img:hover {
        transform: rotateZ(360deg) scale(0.5);
      }
    </style>
  </head>
  <body>
    <img src="./img/olaf1.png" alt="" />
  </body>
</html>

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>third seminar</title>
    <link rel="stylesheet" href="./style.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  </head>
  <body>
    <article>
      <!-- first -->
      <div class="first card">
        <div class="front">
          <div class="text">
            <h2>Financial</h2>
            <h2>App</h2>
          </div>
          <p>25 Apr 2030</p>
          <div class="circles">
            <img src="./img/hamon.jpeg" alt="" />
            <div class="number">3+</div>
          </div>
        </div>
        <div class="back">
          <h3>
            click
            <span class="material-symbols-outlined"> star </span>
          </h3>
        </div>
      </div>
      <!-- second -->
      <div class="second card">
        <div class="front">
          <div class="text">
            <h2>Graphic</h2>
            <h2>Design</h2>
          </div>
          <p>18 May 2030</p>
          <div class="circles">
            <img src="./img/akoh1.jpeg" alt="" />
            <div class="number">2+</div>
          </div>
        </div>
        <div class="back">
          <h3>
            click
            <span class="material-symbols-outlined"> grade </span>
          </h3>
        </div>
      </div>
      <!-- third -->
      <div class="third card">
        <div class="front">
          <div class="text">
            <h2>Artifact</h2>
            <h2>Model</h2>
          </div>
          <p>17 Now 2030</p>
          <div class="circles">
            <img src="./img/akoh2.jpeg" alt="" />
            <div class="number">3+</div>
          </div>
        </div>
        <div class="back">
          <h3>
            click
            <span class="material-symbols-outlined"> star_half </span>
          </h3>
        </div>
      </div>
      <!-- fourth -->
      <div class="fourth card">
        <div class="front">
          <div class="text">
            <h2>Operating</h2>
            <h2>System</h2>
          </div>
          <p>20 Apr 2030</p>
          <div class="circles">
            <img src="./img/akoh3.jpeg" alt="" />
            <div class="number">2+</div>
          </div>
        </div>
        <div class="back">
          <h3>
            click
            <span class="material-symbols-outlined"> star </span>
          </h3>
        </div>
      </div>
      <!-- fifth -->
      <div class="fifth card">
        <div class="front">
          <div class="text">
            <h2>Business</h2>
            <h2>card</h2>
          </div>
          <p>15 Oct 2030</p>
          <div class="circles">
            <img src="./img/akoh4.jpeg" alt="" />
            <div class="number">3+</div>
          </div>
        </div>
        <div class="back">
          <h3>
            click
            <span class="material-symbols-outlined"> grade </span>
          </h3>
        </div>
      </div>
      <!-- sixth -->
      <div class="sixth card">
        <div class="front">
          <div class="text">
            <h2>Centered</h2>
            <h2>Design</h2>
          </div>
          <p>20 Apr 2030</p>
          <div class="circles">
            <img src="./img/gaori.jpeg" alt="" />
            <div class="number">2+</div>
          </div>
        </div>
        <div class="back">
          <h3>
            click
            <span class="material-symbols-outlined"> star_half </span>
          </h3>
        </div>
      </div>
    </article>
    <script src="./main.js"></script>
  </body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
article {
  width: 80vw;
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-around;
}
/* command card */
.card,
.back {
  width: 170px;
  height: 170px;
  border-radius: 20px;
}
.card {
  transform-style: preserve-3d;
  transition: 1s;
}
.card:hover {
  transform: rotateY(180deg);
}
.front {
  width: 100%;
  height: 100%;
  display: flex;
  align-content: space-between;
  flex-direction: column;
}
.back {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg);
  cursor: pointer;
}
.front,
.back {
  backface-visibility: hidden;
  position: absolute;
}
.text,
p {
  margin: 10px;
}
h2 {
  font-size: 25px;
  margin: 0;
}
.circles {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 10px;
}
img,
.number {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.number {
  background-color: black;
  color: white;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
}
/* color */
.first.card {
  background-color: rgb(239, 193, 100);
}
.second.card {
  background-color: rgb(210, 234, 117);
}
.third.card {
  background-color: rgb(124, 232, 209);
}
.fourth.card {
  background-color: rgb(117, 162, 234);
}
.fifth.card {
  background-color: rgb(154, 117, 234);
}
.sixth.card {
  background-color: rgb(234, 117, 117);
}

main.js

const clickedHandler = (e) => {
  const cardTitle = [];
  const titles = e.target.parentNode.parentNode.querySelectorAll("h2");
  titles.forEach((title) => cardTitle.push(title.innerText));
  alert(cardTitle.join(" "));
};

const clickList = document.querySelectorAll(".back h3");

clickList.forEach((el) => {
  el.addEventListener("click", clickedHandler);
});

iOS 프로그래밍 1주차

류경혜 — Mon, 5 Sep 2022 17:20:56 +0900

swift로 자신의 이름 10번 출력하기

var name: String = "류경혜"
for i in 0...10{
    print("\(i) : \(name)")
}

var name: String = "류경혜"
var j: Int = 1 
while j <= 10 {
    if j == 11{
        break
    }
    print("\(j) : \(name)")
    j += 1 
}

Ep08. Flask-RESTful로 Animal CRUD API 구축하기

류경혜 — Wed, 31 Aug 2022 23:00:52 +0900

Pluggable View

→ 플라스크는 기본적으로 데코레이터와 함수 기반으로 API를 작성하며 이를 함수 기반 뷰라고 한다

→ 플러거블 뷰(pluggable View)는 장고의 generic view에서 영향을 받아 만들어졌다

#  함수 기반 뷰
@app.route('/users')
def userList():
	users = User.query.all()
	return render_template('uers.html', users=users)

# 플러거블 뷰
class UserAPI(View):
	methods = ['GET', 'POST']
	def dispatch_request(self):
		users = User.query.all()
		return render_template('users.html', objects=users)

✏️ next(iterable, default)

→ iterable(반복 가능 객체), default(선택, 반복 가능 객체의 마지막 요소 이후 반환할 기본값)

→ iterable의 다음 item을 반환한다

✏️ filter(function, iterable)

→ 항목이 허용되는지 여부를 테스트하기 위해 함수를 통해 항목이 필더링된 경우 반복자를 반환한다

✏️ 상태코드: 200, 201, 400, 404

100번대: 요청이 수신되어 처리 중
200번대: 요청이 정상적으로 처리 중
300번대: 추가적인 작업이 필요
400번대: 클라이언트 오류
500번대:서버 오류

200_OK: 요청이 성공적으로 되었다, 정보는 요청에 따른 응답으로 반환된다
201_Created: 요청이 성공적이었으며 그 결과로 새로운 리소스가 생성되었다[POST, PUT 요청 이후에 따라온다]
400_Bad Request: 잘못된 문법으로 인하여 서버가 요청하여 이해할 수 없다
404_Not Found: 서버는 요청받은 리소스를 찾을 수 없고 브라우저에서는 알려지지 않은 URL을 의미한다

pip install

requirements.txt

aniso8601==9.0.1
click==8.1.3
Flask==2.2.0
Flask-RESTful==0.3.9
itsdangerous==2.1.2
Jinja2==3.1.2
MarkupSafe==2.1.1
pytz==2022.1
six==1.16.0
Werkzeug==2.2.1

GET /animal/string:name

→ 이름으로 고유하게 식별되는 특정 동물 “한 마리"의 상세정보를 반환, 동물들은 같은 이름을 가질 수 없음

from flask import Flask, request
from flask_restful import Resource, Api

app = Flask(__name__)
api = Api(app)

animals = []

class Animal(Resource):
    def get(self, name):
        for animal in animals:
            if animal['name'] == name:
                return animal, 200
            else:
                return {'message': f'Animal <{name}> is not found'}, 404

api.add_resource(Animal, '/animal/<string:name>')

if __name__ == "__main__":
    app.run(debug=True)

POST /animal/<name>

→ <name>이라는 이름을 가지는 동물 한 마리를 생성, 같은 이름을 가지고 있는 동물이 있다면 생성은 실패해야 함

from flask import Flask, request
from flask_restful import Resource, Api

app = Flask(__name__)
api = Api(app)

animals = []

class Animal(Resource):
    def post(self, name):
        animal = next(filter(lambda x: x['name'] == name, animals), None)
        if animal is None:
            data = request.get_json()
            animal = {'name': name, 'age': data['age']}
            animals.append(animal)
            return animal, 201
        else:
            return {'message': f'Animal <{name}> is already in the list'}, 400

api.add_resource(Animal, '/animal/<string:name>')
if __name__ == "__main__":
    app.run(debug=True)

GET animals

→ 모든 동물에 대한 목록 조회

from flask import Flask, request
from flask_restful import Resource, Api

app = Flask(__name__)
api = Api(app)

animals = []

class Animal(Resource):
    def put(self, name):
        data = request.get_json()
        animal = next(filter(lambda x: x['name'] == name, animals), None)
        if animal is None:
            animal = {'name': name, 'age': data['age']}
            animals.append(animal)
            return animal, 201
        else:
            animal.update(data)
            return animal, 200

api.add_resource(Animal, '/animal/<string:name>')
if __name__ == "__main__":
    app.run(debug=True)

PUT /animal/<name>

→ <name> 이라는 이름을 가지고 있는 동물 한 마리를 생성하거나 이미 그 이름을 가지고 있는 동물이 존재한다면 정보를 수정

from flask import Flask, request
from flask_restful import Resource, Api

app = Flask(__name__)
api = Api(app)

animals = []

class Animal(Resource):
    def delete(self, name):
        animal = next(filter(lambda x: x['name'] == name, animals), None)
        if animal is None:
            return {'message': f'Animal <{name}> not found.'}, 404
        else:
            del (animals['name' == name])
            return {'message': f'Animal <{name}> deleted successfully!'}, 200

api.add_resource(Animal, '/animal/<string:name>')
if __name__ == "__main__":
    app.run(debug=True)

DELETE /animal/<name>

→ <name>이라는 이름을 가지고 있는 동물 한 마리를 제거

from flask import Flask, request
from flask_restful import Resource, Api

app = Flask(__name__)
api = Api(app)

animals = []
class Animal(Resource):
    def delete(self, name):
        animal = next(filter(lambda x: x['name'] == name, animals), None)
        if animal is None:
            return {'message': f'Animal <{name}> not found.'}, 404
        else:
            del (animals['name' == name])
            return {'message': f'Animal <{name}> deleted successfully!'}, 200

api.add_resource(Animal, '/animal/<string:name>')

if __name__ == "__main__":
    app.run(debug=True)

[1517] 버블 소트

류경혜 — Mon, 22 Aug 2022 04:00:29 +0900

def mergeSort(start, end):
    global swapCount, A
    if start < end:
        mid = (start + end) // 2
        mergeSort(start, mid)
        mergeSort(mid + 1, end)
        startPoint, midPoint = start, mid + 1
        temp = []
        
        while startPoint <= mid and midPoint <= end:
            if A[startPoint] <= A[midPoint]:
                temp.append(A[startPoint])
                startPoint += 1
            else:
                temp.append(A[midPoint])
                midPoint += 1
                swapCount += (mid - startPoint + 1)
                
        if startPoint <= mid:
            temp = temp + A[startPoint:mid + 1]
        if midPoint <= end:
            temp = temp + A[midPoint:end + 1]
        for i in range(len(temp)):
            A[start + i] = temp[i]

swapCount = 0
n = int(input())
A = list(map(int, input().split()))
mergeSort(0, n - 1)
print(swapCount)