공부/웹개발 종합(사전준비)

CSS기초(띵동코딩)3

뀨뿌뀨뿌 2023. 6. 3. 19:20

1. momentum 페이지 만들기 1

ⅰ.  기본 틀

  • momentum_first.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">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"> </script>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"                        crossorigin="anonymous">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">                 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
             integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
             crossorigin="anonymous"></script>
        <title>모멘텀앱 - 따라만들기</title>
        <style>
              @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
             * {
                 font-family: 'Poppins', sans-serif;
             }
             body, h1, h2, h3, p, div, a {
                 margin: 0px; padding: 0px; text-decoration: none; font-weight: normal;
1             }
        </style>
        <script>
             $(document).ready(function () {
                 renderGalleryItem()
             });
             //배경 사진 함수
             function renderGalleryItem() {

             }
        </script>
    </head>
    <body id='background'>
        <div class="main">
             <!-- 인사 -->
             <div class="greeting">
             </div>
             <!-- 이름 입력창 -->
             <div class="name">
             </div>
        </div>
    </body>
</html>

ⅱ.  배경화면 만들기

  • 새로고침할때마다 새로운 이미지를 받아오게 만들기
// CSS
body {
  background-size: cover;
}

// javascript
//배경 사진 함수
function renderGalleryItem() {
  let url = "https://api.thecatapi.com/v1/images/search";
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
       let imgurl = data[0]['url'];
       $("#background").css("background-image", `url("${imgurl}")`)
    });
 }

ⅲ. 인사말, 이름 입력칸, 아이콘 만들기

  • 아이콘은 bootstrap의 아이콘에서 Chevron double right 가져오기
// css
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 100vh - 화면 비율의 100% */
  color: white;
}
.greeting {
  font-size: 60px;
  font-weight: bold;
  margin-bottom: 20px;
}
.name {
  font-size: 30px;
}
.name > input {
  width: 800px;
  border: none;
  background-color: transparent; /* 뒤에 배경과 동일하게 */
  border-bottom: 3px solid white;
  text-align: center;
}
.name > input:focus {
  outline: none;
}
.name > i {
  cursor: pointer;
}

// HTML
<div class="main">
  <!-- 인사 -->
  <div class="greeting">Hello, what's your name?</div>
  <!-- 이름 입력창 -->
  <div class="name">
    <input type="text" />
    <i class="bi bi-chevron-double-right"></i>
  </div>

배경화면 및 인사말, 이름, 아이콘 만들기

2. momentum 페이지 만들기 2

ⅰ.  현재 날씨 데이터 나타내기

  • momentum_second.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" />
    <link
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
    />
    <script
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <title>모멘텀앱 - 따라만들기</title>
    <style>
      * {
        font-family: "Poppins", sans-serif;
      }
      body,
      h1,
      h2,
      h3,
      p,
      div,
      a {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-weight: normal;
      }
      body {
        background-image: url("");
        background-size: cover;
        color: white;
      }
      .main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        color: white;
      }
      .greeting {
        padding-top: 0px;
        font-size: 60px;
      }
      .focusTitle {
        padding-top: 0px;
        font-size: 60px;
      }
      .focusTodo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        margin-top: 20px;
      }
      .focusTodo > i {
        cursor: pointer;
      }
      .focusTodo > input {
        width: 800px;
        border: none;
        background-color: transparent;
        border-bottom: 3px solid white;
       color: white;
      }
      .focusTodo > input:focus {
        outline: none;
      }
    </style>
    <script>
      $(document).ready(function () {
        renderGalleryItem();
      });
      //배경 사진 함수
      function renderGalleryItem() {
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let imgurl = data[0]["url"];
            $("#background").css("background-image", `url('${imgurl}')`);
          });
      }
    </script>
  </head>
  <body id="background">
    <div class="main">
      <!-- 인사 -->
      <div class="greeting">Hello, Jessy.</div>
      <!-- 오늘 중요 일정 입력-->
      <div class="focusTitle">What is your main focus for today?</div>
      <!-- 이름 입력창 -->
      <div class="focusTodo">
        <input type="text" />
        <i class="bi bi-chevron-double-right"></i>
      </div>
    </div>
  </body>
</html>
  • 현재 날씨 API에서 값을 가져와서 화면에 반영하기
// CSS
.currentWeather {
  text-align: right;
  font-size: 28px;
  font-weight: bold;
  color: white;
  padding: 5px;
 }
 
 // javascript
$(document).ready(function () {
  renderGalleryItem();
  renderCurrentWeather();
});

//현재 날씨
function renderCurrentWeather() {
  let url = `https://goweather.herokuapp.com/weather/seoul`;
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      let temp = data["temperature"];
      $("#currentWeather").text(temp);
    });
}

// HTML
<div id="currentWeather" class="currentWeather">+30c</div>
<div class="main">

현재 온도 표시하기

ⅱ.  현재 시간 불러오기

  • 현재 시간을 fetch를 사용하여 불러오기
// CSS
.focusTitle {
  padding-top: 0px;
  font-size: 40px;
}
.currentTime {
  font-size: 120px;
  font-weight: bold;
}

// javascript
$(document).ready(function () {
  renderGalleryItem();
  renderCurrentWeather();
  renderCurrentTime();
});

// 현재 시간
function renderCurrentTime() {
  let url = `http://worldtimeapi.org/api/timezone/Asia/Seoul`;
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      let time = data["datetime"].substr(11, 5);
      $("#currentTime").text(time);
    });
}

// HTML
<div class="main">
  <div id="currentTime" class="currentTime">12:34</div>

현재 시간 보여주기

ⅲ.  조언 불러오기

// CSS
.advice {
  text-align: center;
  font-size: 20pxs;
  margin-top: 60px;
}

// javascript
$(document).ready(function () {
  renderGalleryItem();
  renderCurrentWeather();
  renderCurrentTime();
  renderAdvice();
});
      
//실시간 조언
function renderAdvice() {
  let url = `https://api.adviceslip.com/advice`;
  fetch(url)
    .then((res) => res.json())
    .then((data) => {
      let adv = data["slip"]["advice"];
      $("#advice").text(adv);
    });
}

// HTML
    <div id="advice" class="advice">Have a nice day!</div>
  </div>
</body>

조언 불러오기

3. momentum 페이지 만들기 3

ⅰ.  오늘 중요한 일 나타내기

  • momentum_third.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" />
    <link
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
    />
    <script
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <title>모멘텀앱 - 따라만들기</title>
    <style>
      * {
        font-family: "Poppins", sans-serif;
      }
      body,
      h1,
      h2,
      h3,
      p,
      div,
      a {
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        font-weight: normal;
        background-size: cover;
        color: white;
      }
      .currentWeather {
        margin-left: auto;
        font-size: 28px;
        width: 120px;
        height: 50px;
      }
      .main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 75vh;
      }
      .currentTime {
        font-size: 160px;
        font-weight: 600;
      }
      .greeting {
        font-size: 60px;
      }
      .footer {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 58px;
        width: auto;
      }
    </style>
    <script>
      $(document).ready(function () {
        renderGalleryItem();
        renderCurrentWeather();
        renderCurrentTime();
        renderAdvice();
      });
      //배경 사진 함수
      function renderGalleryItem() {
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let imgurl = data[0]["url"];
            $("#background").css("background-image", `url('${imgurl}')`);
          });
      }
      //배경 사진 함수
      function renderGalleryItem() {
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let imgurl = data[0]["url"];
            $("#background").css("background-image", `url('${imgurl}')`);
          });
      }
      //현재 날씨
      function renderCurrentWeather() {
        let url = `https://goweather.herokuapp.com/weather/{seoul}`;
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let temperature = data["temperature"];
            temp_html = `${temperature}`;
            $("#currentWeather").append(temp_html);
          });
      }
      //현재 시간
      function renderCurrentTime() {
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let time = data["datetime"].substr(11, 5);
            let temp_html = `${time}`;
            $("#currentTime").append(temp_html);
          });
      }
      //실시간 조언
      function renderAdvice() {
        let url = `https://api.adviceslip.com/advice`;
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
            let advice = data["slip"]["advice"];
            let temp_html = `${advice}`;
            $("#advice").append(temp_html);
          });
      }
    </script>
  </head>
  <body id="background">
    <!-- 날씨 -->
    <div id="currentWeather" class="currentWeather"></div>
    <div class="main" id="main">
      <!-- 시간 -->
      <div id="currentTime" class="currentTime"></div>
      <!-- 인사 -->
      <div class="greeting">Hello, Jessy.</div>
      <!-- 오늘 중요 일정 -->
    </div>
    <!-- 실시간 조언 -->
    <div id="advice" class="footer"></div>
  </body>
</html>

ⅱ.  오늘 할일 나타내기

// CSS
.todayFocus {
  margin-top: 30px;
  font-size: 20px;
  font-weight: bold;
}
.focusTitle {
  font-size: 30px;
  font-weight: bold;        
}

// HTML
<!-- 오늘 중요 일정 -->
<div class="todayFocus">Today</div>
<div class="focusTitle">Publish Blog Post</div>

오늘 할일 나타내기

ⅲ.  체크 박스, 삭제 아이콘 만들기

  • 삭제 아이콘은 bootstrap에서 Trash 모양 사용하기
// CSS
.focusTitle {
  font-size: 30px;
  font-weight: bold;
}
.focusTitle > li > input {
  width: 25px;
  height: 25px;
  display: none;
}
.focusTitle > li > i {
  display: none;
}
.focusTitle > li:hover > input {
  display: block;
}
.focusTitle > li:hover > i {
  display: block;
}
.focusTitle > li {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.focusTitle > li > span {
  margin: 0 10px;
}

// HTML
<div class="focusTitle">
  <li>
    <input type="checkbox" />
    <span>Publish Blog Post</span>
    <i class="bi bi-trash"></i>
  </li>
</div>

체크 박스, 삭제 아이콘 만들기

ⅳ. 모달창

  • 아이콘 만들기
    • 버튼 모양은 bootstrap에서 Plus circle 가져오기
// CSS
.todoIcon {
  font-size: 40px;
  position:absolute;
  right: 170px;
  bottom: 50px;
  cursor: pointer;
}

// HTML
  <div id="advice" class="footer"></div>
  <div class="todoIcon">
    <i class="bi bi-plus-circle"></i>
  </div>
</body>

모달창 아이콘 만들기

  • 모달창 클릭하면 보여주기
 // CSS
.modal-box {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  padding: 20px;
  position: absolute;
  right: 170px;
  bottom: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
}
.modal-box > input {
  width: 280px;
  height: 50px;
  border-radius: 10px;
  border: none;
  text-align: center;
  margin-bottom: 10px;
}
.modal-box > button {
  width: 280px;
  height: 50px;
  border-radius: 10px;
  border: none;
}

// HTML
  </div>
  <div id="modal-box" class="modal-box">
    <input type="text" />
    <button>Add to the list</button>
  </div>
</body>
// javascript 
$(document).ready(function () {
  renderGalleryItem();
  renderCurrentWeather();
  renderCurrentTime();
  renderAdvice();

  $("#todoIcon").click(function () {
    $("#modal-box").fadeIn().css("display", "flex");
    $("todoIcon").fadeOut();
  });
  $("#main").click(function () {
    $("#modal-box").fadeOut().css("display", "flex");
    $("#modal-box").show();
  }

모달창 열기
모달창 끄기

저작자표시

'공부 > 웹개발 종합(사전준비)' 카테고리의 다른 글

CSS기초(띵동코딩)2 - 3  (0) 2023.06.03
CSS기초(띵동코딩)2 - 2  (0) 2023.06.03
CSS기초(띵동코딩)2 - 1  (0) 2023.06.02
CSS기초(띵동코딩) 1 - 2  (0) 2023.06.02
CSS기초(띵동코딩) 1 - 1  (1) 2023.06.01

'공부/웹개발 종합(사전준비)'의 다른글

  • 현재글CSS기초(띵동코딩)3

관련글

티스토리툴바