본문 바로가기
국비학원/수업기록

국비 지원 개발자 과정_Day39

by 루팽 2023. 1. 19. 
// var는 이제 사용하지 않는다
const x = 10; //변수 선언 -> 예약어 const(상수), let(변수) - 초기화, ECMAScript5,6,7(대중적),8
// clg쓰면 콘솔로그 자동완성됨
console.log(`${x}`); //출력요청 - 변수호출 - 백틱기호(`) 표현식($) 중괄호
// 브라우저(인터프리터의 역할)에서 실행해야함
// 라이언달 - NodeJS 발표 - node설치 - npm같이 설치됨
// nodejs에 추가적인 라이브러리 사용
// 브라우저 없이도 테스트할 수 있다
// NodeJs를 설치하고 터미널에 cd로 경로설정 후 node 파일명 쓰면 됨!(확장자 제외)
console.log("555");

 

<!DOCTYPE html>
<html lang="ko">
  <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>Document</title>
    <!-- style선언 가능 - 하지만 사용하지 않음(외부파일로 분리 -> xxx.css - 문서전체 스타일 만듦) -->
    <!-- script선언 가능 - 마임타입(mime type) text/javascript -> 이걸로 js인 것 구분함 -->
  </head>
  <body>
    <a href="https://www.naver.com">네이버</a>
  </body>
</html>
<!-- 
  html문서 안에서 자바스크립트를 사용할 수 있는 영역은
  head 안, body안에서 가능함
-->

 

<!DOCTYPE html>
<html lang="ko">
  <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>Document</title>
    <link rel="stylesheet" href="./element.css">
  </head>
  <body>
    <!-- Block level / div*3으로 자동완성 -->
    <div></div>
    <div></div>
    <div>3</div>
    <!-- Inline level / span{$}*3으로 자동완성 -->
    <span></span>
    <span></span>
    <span>3</span>
  </body>
</html>

 

div,
span {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin-bottom: 20px;
}

div {
  background-color: red;
  /* 디스플레이 속성이 인라인으로 지정된 엘리먼트는 인라인처럼 전후 줄바꿈없이 한 줄에 나란히 배치된다 */
  /* inline-block이면 인라인에서 불가능했던 width, height 지정과 margin, padding속성의 상하 간격 조절가능 */
  display: inline-block;
}

span {
  background-color: blue;
  display: block;
}

 

 

<!DOCTYPE html>
<html lang="ko">
  <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>Document</title>
    <link rel="stylesheet" href="ex1.css" />
  </head>
  <body>
    <!-- div.parent>div.child{$}*2 자동완성 -->
    <div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
    </div>
  </body>
</html>

 

* {
  margin: 0px;
  background-color: yellowgreen;
}

.parent {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  position: relative;
}

div .child1 {
  width: 100px;
  height: 100px;
  background-color: black;
  top: 0px;
  left: 0px;
}

div .child2 {
  width: 100px;
  height: 100px;
  background-color: black;
  right: 0px;
  bottom: 0px;
  position: absolute;
}

 

<!DOCTYPE html>
<html lang="ko">
  <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>Document</title>
    <link rel="stylesheet" href="./fixed.css" />
  </head>
  <body>
    <article class="container">
      <div></div>
      <div class="box">BOX</div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </article>
  </body>
</html>

 

.container {
  background-color: yellow;
}

div {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: red;
}

.box {
  background-color: aqua;
  position: fixed;
  left: 20px;
  top: 20px;
}

 

<!DOCTYPE html>
<html lang="ko">
  <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>Document</title>
    <link rel="stylesheet" href="./flexbox1.css" />
  </head>
  <body>
    <!-- div.container>div.item.item${$}*10 자동완성 -->
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
      <div class="item item10">10</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
      <div class="item item10">10</div>
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
      <div class="item item10">10</div>
    </div>
  </body>
</html>

 

html,
body {
  height: 100%;
}

.container {
  /* 보이는 높이의 100%를 모두 쓰겠다는 의미 */
  /* height: 100vh; */
  /* 컨테이너의 부모(body태그)의 100%를 채우겠다는 의미 */
  height: 100%;
  background-color: beige;
  /* flex하면 div여도 수평으로 전환(배치)가능 - 왼쪽에서 오른쪽으로 정렬이 디폴트 */
  display: flex;
  /* flex-direction을 사용하면 row, row-reverse, column, column-reverse 등 배치 바뀜 */
  flex-direction: row;
  /* 간격 동일하게 설정 */
  justify-content: space-around;
  /* wrap으로하면 아이템이 화면에 꽉 찼을 때 자동으로 다음 줄로 넘어감 */
  flex-wrap: wrap;
}

.item {
  background-color: aquamarine;
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

 

<!DOCTYPE html>
<html lang="ko">
  <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>Document</title>
    <link rel="stylesheet" href="./nav1.css" />
    <script
      src=""
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="navbar">
      <div class="navbar_logo">
        <i class="fab fab fa-diaspora"></i>
        <a href="#">KH정보교육원</a>
      </div>
      <div>
        <!-- ul.navbar_menu>li.navbar_menu_item*6 자동완성 -->
        <ul class="navbar_menu">
          <li class="navbar_menu_item">국비지원과정</li>
          <li class="navbar_menu_item">교육원소개</li>
          <li class="navbar_menu_item">취업지원센터</li>
          <li class="navbar_menu_item">채용정보</li>
          <li class="navbar_menu_item">프로젝트</li>
          <li class="navbar_menu_item">커뮤니티</li>
        </ul>
      </div>
    </nav>
  </body>
</html>

 

/* 
우리가 패딩을 줬을 때 높이와 너비가
그 패딩을 포할했을때도 동일한 높이와 너비가 되도록 하자
 */

* {
  box-sizing: border-box;
  background-color: black;
}

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  margin: 0px;
  color: white;
}

a {
  text-decoration: none;
  color: #fff;
}

ul {
  list-style: none;
  padding-left: 0px;
}

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  align-items: center;
  background-color: cornflowerblue;
}

.navbar_menu {
  display: flex;
}

.navbar_menu_item {
  padding: 8px 12px;
  margin: 0px 4px;
  cursor: pointer;
  /* 외곽선 둥글게 처리 */
  border-radius: 4px;
}

/* 마우스 올리면 색 변경됨 */
.navbar_menu_item:hover {
  background-color: white;
  color: steelblue;
}

 

 

<!DOCTYPE html>
<html lang="ko">
  <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>Document</title>
    <link rel="stylesheet" href="./workout.css" />
    <!-- 
      외부의 자바스크립트를 호출할 때 반드시 DOM tree가 완성되어 있어야한다
      자바스크립트 파일은 웹 서버로부터 다운로드받고 브라우저가 실행을 하는데
      이때 해당 html문서의 DOM 구성이 완료되지 않으면
      이벤트 소스의 정보가 undefined 상태이므로 에러가 발생한다(TypeError)
      이때 defer를 붙여주면 DOM tree가 완성될 때까지 기다렸다가 실행한다
      버튼의 객체를 인지하므로 에러가 발생 안함
    -->
    <script defer src="./workout.js"></script>
    <script
      src=""
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <section class="list">
      <!-- 헤더 영역 -->
      <header class="header">WorkoutApp</header>
      <ul class="items">
        <li class="item_row">
          <div class="item">
            <span class="item_name">스쿼트</span>
            <button class="btn_delete">
              <i class="far fa-trash-alt"></i>
            </button>
          </div>
        </li>
        <li class="item_row">
          <div class="item">
            <span class="item_name">데드리프트</span>
            <button class="btn_delete">
              <i class="far fa-trash-alt"></i>
            </button>
          </div>
        </li>
        <li class="item_row">
          <div class="item">
            <span class="item_name">레그프레스</span>
            <button class="btn_delete">
              <i class="far fa-trash-alt"></i>
            </button>
          </div>
        </li>
      </ul>
      <!-- 푸터 영역 -->
      <footer class="footer">
        <!-- 운동이름 입력화면 -->
        <input type="text" name="" class="user_input" />
        <button class="btn_add">
          <i class="fas fa-plus"></i>
        </button>
      </footer>
    </section>
  </body>
</html>

 

@import url("https://fonts.googleapis.com/css2?family=Fredericka+the+Great&family=Hahmlet&family=Noto+Serif+KR&family=Roboto+Mono&display=swap");

* {
  box-sizing: border-box;
  /* border: 1px solid red; */
}

body {
  background-color: #eceffa;
  text-align: center;
}

ul {
  /* list-style: none; 동그라미 자리만큼 남음 */
  padding: 0px;
}

button {
  border: none;
  /* 배경 투명처리 */
  background: transparent;
  cursor: pointer;
}

.header {
  height: 48px;
  padding: 4px;
  font: 26px "hahmlet";
  /* 0일땐 px 생략 가능 */
  border-radius: 20px 20px 0 0;
  background-color: steelblue;
  color: #ffffff;
}

.items {
  height: 500px;
  color: midnightblue;
  overflow-y: auto;
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 8px 32px;
  font: 20px "hahmlet";
}

.btn_delete {
  font-size: 18px;
  color: midnightblue;
  transition: all 150ms ease-in;
}

.btn_delete:hover {
  color: crimson;
  transform: scale(1.1);
}

.footer {
  border-radius: 0 0 20px 20px;
  background-color: steelblue;
  color: #ffffff;
}

.user_input {
  width: 100%;
  height: 30px;
  border: none;
  outline: none;
  font: 18px "hahmlet";
  padding: 0px 16px;
}

.btn_add {
  width: 40px;
  height: 40px;
  margin: 4px;
  font-size: 28px;
  color: #ffffff;
  background-color: powderblue;
  border-radius: 50%;
  transition: transform 150ms ease-in;
}

.btn_add:hover {
  color: powderblue;
  background-color: #ffffff;
  transform: scale(1.1);
}

 

const user = document.querySelector(".user_input");
const btnAdd = document.querySelector(".btn_add");

// callback함수 -> 시스템에서 이벤트가 감지되었을 때 호출
btnAdd.addEventListener("click", function (e) {
  console.log("plus버튼 호출");
  addRow();
});

user.addEventListener("keypress", (e) => {
  console.log("key => " + e.key);
  // ==는 값이 같은지 비교
  // ===는 타입도 같고 값도 같은지 비교
  if (e.key === "Enter") {
    console.log("Enter이벤트 호출 성공");
    addRow();
  }
});

function addRow() {
  // 사용자가 입력한 텍스트를 받아옴
  const workName = user.value;
  console.log(`사용자가 입력한 값 => ${workName}`);
  if (workName === "") {
    user.focus(); // 커서의 위치를 input type=text로 가져옴
    return; // addRow를 탈출함
  }
  // 위 조건을 수렴하지 않으면 input text를 초기화한다
  user.value = "";
  user.focus();
}

 

<!DOCTYPE html>
<html lang="ko">
  <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>Document</title>
  </head>
  <body>
    <div id="root">여기</div>
    <script>
      /* 
      document는 window객체의 자손 객체이다
      여기서 document는 domCreate.html문서 전체를 받는 객체
      write함수는 document 내장 객체가 제공하는 함수이다
      */
      document.write("<ul>");
      document.write("<li>제목1</li>");
      document.write("<li>제목2</li>");
      document.write("<li>제목3</li>");
      document.write("</ul>");
    </script>
  </body>
</html>

 

<!DOCTYPE html>
<html lang="ko">
  <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>해커뉴스API - [step1]</title>
    <script defer src="./news.js"></script>
  </head>
  <body>
    <!-- div#root 자동완성 - 자바스크립트에서 쓸 때는 id -->
    <div id="root"></div>
  </body>
</html>

 

const requestOptions = {
  method: "GET",
  redirect: "follow",
};

fetch("https://api.hnpwa.com/v0/news/1.json", requestOptions)
  .then((response) => response.json())
  // .then((result) => console.log(result))
  .then((result) => {
    const ul = document.createElement("ul"); // DOM API
    for (let i = 0; i < result.length; i++) {
      const li = document.createElement("li");
      li.innerHTML = result[i].title;
      ul.appendChild(li);
      console.log(result[i].title);
    } // end of for문
    document.getElementById("root").appendChild(ul);
  })
  .catch((error) => console.log("error", error));
저작자표시 비영리 변경금지 (새창열림)

'국비학원 > 수업기록' 카테고리의 다른 글

국비 지원 개발자 과정_Day41  (0) 2023.01.25
국비 지원 개발자 과정_Day40  (0) 2023.01.20
국비 지원 개발자 과정_Day38  (0) 2023.01.18
국비 지원 개발자 과정_Day37  (0) 2023.01.17
국비 지원 개발자 과정_Day36  (0) 2023.01.16

관련글

댓글

티스토리툴바