본문 바로가기
학원수업/1월

01/19 국비학원 39회차 HTML, CSS, JS

by 코딩마스터^^ 2023. 1. 19.

https://www.w3schools.com/js/default.asp

 

JavaScript Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

자바스크립트 튜토리얼 참고 사이트

 

HTML: Hypertext Markup Language

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기능/동작 (JavaScript)을 설명하는 데 사용됩니다.

"Hypertext(하이퍼텍스트)"란 웹 페이지를 다른 페이지로 연결하는(a 태그)링크를 말합니다. 링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 링크함으로써 여러분도 월드 와이드 웹 세계의 능동적인 일원이 될 수 있습니다.

<a href="https://www.naver.com">네이버</a>

 

HTML은 웹 브라우저에 표시되는 글과 이미지 등의 다양한 콘텐츠를 표시하기 위해 "마크업"을 사용합니다. HTML 마크업은 다양한 "요소"를 사용하는데, 요소에는 <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video>, <ul>, <ol>, <li> 등 많은 종류가 존재합니다.

HTML 요소는 "태그"를 사용해서 문서의 다른 텍스트와 구분합니다. 태그는 "<", 태그 이름, ">"로 이루어집니다. 태그 안의 요소 이름은 대소문자를 구분하지 않습니다. 즉, 대문자, 소문자, 아니면 섞어서도 작성할 수 있습니다. 예를 들어 <title>요소는 <Title>, <TITLE>, 그 외 기타 가능한 모든 방법으로 작성할 수 있습니다.

출처 : https://developer.mozilla.org/ko/docs/Web/HTML

 

HTML: Hypertext Markup Language | MDN

HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기

developer.mozilla.org

 

./은 내가 있는 파일

../은 나보다 하나 상위의 파일

./은 상대경로이다.

절대경로는 처음부터 다 써주는것.

 

절대경로는 소스를 재 사용할때에 하나하나 다 고쳐야 한다.

절대경로 쓰지마세요.

상대경로를 써야 한다.

 

screen 모니터의 사이즈

*{}

*는 모든태그

 

모니터에 바짝 붙이고 싶다.

margin : 0;

마진값을 0으로 준다

디브태그 2개를 만들고 자손관계?로 해서 화면 왼쪽 위와 오른쪽 밑에 붙여라

position을 이용해서 위치 옮겨줬다.

position을 absolute로 주게되면 내가 지정한대로 좌표값에 따른 위치를 기대할 수 있다.

relative는 일반적인 요소 흐름에 따라 배치하기 때문이다.

 

부모에서 튀어나간 점심이를 안으로 데리고오기위해 고민중에 position : relative;를 설정해서 부모자식관계를 확고히 해준다.

 

[CSS] CSS Position (relative, absolute) 한 방에 정리! (tistory.com)

 

[CSS] CSS Position (relative, absolute) 한 방에 정리!

목차 1. Position 속성 1-1. Relative 1-2. Absolute 1-2-1. 부모 relative & 자식 absolute 1-2-2. 조상 relative & 자식 absolute 1-2-3. 조상 position 없음 & 자식 absolute 1-3. Fixed CSS Position CSS Position 요약 position 속성을 통해

creamilk88.tistory.com

 

 

block : 한 줄 모두 차지 (대표 element - <div>, <p> )

inline : 콘텐츠 크기 만큼만 차지 (대표 element - <span>)

 

 Position 속성

요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다.

값의미

static 기준 없음 (배치 불가능 / 기본값)
relative 요소 자기 자신을 기준으로 배치
absolute 부모(조상) 요소를 기준으로 배치
fixed 뷰포트 기준으로 배치
stickey 스크롤 영역 기준으로 배치

웹으로 만들어 보자.

 

EventTarget.addEventListener()

EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정합니다.==>콜백 함수이다.

일반적인 대상은 Element, Document, Window지만, XMLHttpRequest와 같이 이벤트를 지원하는 모든 객체가 대상이 될 수 있습니다.

 

 

overflow-y: auto;/* 운동 종류 많아지면 스크롤바 자동으로 생김 */

자바스크립트로 액션줄려고 했더니 문제가 생겼다.

타입이 다르다고 한다.

defer를 사용했다.

 

브라우저 

크롬, 사파리, 파이어폭스 등등.... 

이친구들이 지원해주는 내장객체객체가 있다.

브라우저안에는 내장 객체가 살고있다.

생성하지않고 메모리에 따로 로딩할 필요 없이 언제나 누구나 바로 사용이 가능하다.

JSP, Spring가면 또 나온다.

최상위 객체 window

오라클의 최상위 객체 sys

 

window의 아들이 document

this가 자바스크립트에서는 계속바뀐다.

골때린다. 함수형 프로그래밍을 권장한다.

상태를 관리하는 

변하니까 상태이다.

 

 

/* 액션을 주고싶을때 자바스크립트 쓴다. */
const user = document.querySelector(".user_input");
/* const 변수선언 입력했을때 엔터치면 액션들어가게 하고싶다.*/
/* 쿼리 셀렉터를 제공해주는 애가 도큐먼트이다. 내장된 객체이다. 이문서 전체를 가리킴. this같이 */
c
 

자바스크립트에서는 equals가 없다.

== 값만 비교한다.

===값에 추가로 타입도 비교한다.

 

DOM 이란?

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

외부에 자바 스크립트를 호출할때 반드시 DOM트리가 완성되어 있어야 한다.

자바스크립트 파일은 웹 서버로부터 다운로드 받고 브라우저가 실행을 하는데

이때 해당 HTML문서에 DOM구성이 완료되지 않으면 이벤트 소스의 정보가 undefined상태이므로 에러가 발생한다.

Type Error~~

실행이 안된다.

이때 defer를 붙여주면 DOM tree가 완성될때까지 기다렸다가 실행하므로

이때는 버튼의 객체를 인지한다. 에러가 발생 안한다.

 

<!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="./workoutlist.css" />
    <script
      src="https://kit.fontawesome.com/15ade8f86a.js"
      crossorigin="anonymous"
    ></script>
    <script defer src="./workout.js"></script>
    <!-- <script src="./workout.js"></script> defer없으면 DOM tree가 완성될때까지 기다리지 않으므로 defer붙여줘야한다.-->
  </head>
  <body>
    <section class="list">
      <!-- 헤더영역 -->
      <header class="header">Workout App</header>
      <ul class="items">
        <li class="item_row">
          <div class="item">
            <span class="item_name">스쿼트 </span>
            <button class="btn_del">
              <i class="fas fa-trash-alt"></i>
            </button>
          </div>
        </li>
        <li class="item_row">
          <div class="item">
            <span class="item_name">데드리프트 </span>
            <button class="btn_del">
              <i class="fas fa-trash-alt"></i>
            </button>
          </div>
        </li>
        <li class="item_row">
          <div class="item">
            <span class="item_name">레그프레스 </span>
            <button class="btn_del">
              <i class="fas 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=Comfortaa:wght@600&family=Do+Hyeon&display=swap");
* {
  box-sizing: 100%;
  /* border: 2px solid rgb(214, 178, 130); */
  font-family: "Comfortaa", cursive;
}

body {
  background-color: blanchedalmond;
  text-align: center;
}

ul {
  /* list-style : none; 구슬 없애려고 했더니 앞에 여백이 생겼다.*/
  padding: 0; /* 패딩이랑 같이쓴다 */
  list-style: none;
}

button {
  border: none;
  background: transparent; /* 버튼 뒤에 배경 투명하게 */
  cursor: pointer; /* 손모양으로 바꾸기 */
}

.header {
  height: 48px;
  padding: 8px;
  font-size: xx-large;
  border-radius: 20px 20px 0 0;
  background-color: coral;
}
.items {
  height: 500px;
  /* justify-content: space-between;  */
  overflow-y: auto; /* 운동 종류 많아지면 스크롤바 자동으로 생김 */
  border: 2px solid rgb(214, 178, 130);
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 8px 32px;
}
.item_name {
  font-family: "Do Hyeon", sans-serif;
}
.footer {
  background-color: coral;
  border-radius: 0 0 20px 20px;
}

.user_input {
  width: 100%;
  height: 32px;
  border: none;
  outline: none;
  font-size: 20px;
  padding: 0px 0px;
  font-family: "Do Hyeon", sans-serif;
}

.btn_add {
  background-color: chocolate;
  width: 48px;
  height: 48px;
  color: aliceblue;
  border-radius: 50%; /* 원이 된다 50프로 */
  transition: transform 300ms ease-in; /* 부드럽게 움직이게 */
}

.btn_add :hover {
  transform: scale(1.5); /* 커서갖다대면 커지도록 */
  color: brown;
}
.btn_del {
  font-size: 16px;
}
.btn_del :hover {
  color: crimson;
  transform: scale(1.1);
}

 

/* 액션을 주고싶을때 자바스크립트 쓴다. */
const user = document.querySelector(".user_input");
/* const 변수선언 입력했을때 엔터치면 액션들어가게 하고싶다.*/
/* 쿼리 셀렉터를 제공해주는 애가 도큐먼트이다. 내장된 객체이다. 이문서 전체를 가리킴. this같이 */
const btnAdd = document.querySelector(".btn_add");

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으로 가져온다.
    return; //addRow를 탈출한다.
  }
  //위 조건을 수렴하지 않으면 input text를 초기화 한다.
  user.value = ""; //빈 문자로 대입해주면 초기화된다.
  user.focus();
}

포스트맨 사용하기

디비 연동 없이 잘 보게 해준다?

서버에서 데이터 받아오기위해 포스트맨 사용

그런데 VAR대신에 const를 사용해주자. 변수선언할때에

 

AJAX 비동기 통신 기초(XMLHttpRequest)

비동기 웹 어플리케이션 제작을 위해 개발된 자바스크립트 기술입니다.

AJAX 는 Asynchronous Javascript and XML 의 약자입니다. 최초에는 XML/XLST 포맷 데이터를 서버와 비동기로 주고받기 위해 고안된 자바스크립트 기술이었으나, 서버와 주고받는 데이터가 JSON 포맷으로 사실상 표준화 되면서 현재는 JSON 데이터를 주로 주고받는 웹 비동기 기술로 정착했습니다.

AJAX는 HTML, XML, JSON 등의 다양한 데이터를 주고받을 수 있습니다.

 

AJAX 를 위해서는 XMLHttpRequest 객체를 사용합니다.

자바스크립트의 내장 객체로 비동기 통신 구현을 위한 객체이며, 대부분의 최신 브라우저에서 동일한 방식으로 지원합니다.

단, 인터넷 익스플로러는 지원 객체 구조가 달라 인터넷 익스플로러를 지원하려면 예외처리를 별도로 해야합니다.

 

XMLHttpRequest 객체는 서버로 요청을 보내고 요청을 받은 결과를 비동기로 처리합니다.

따라서 요청을 보낸 후 사용자든 UI 상호 작용이나 다른 AJAX 요청을 추가로 보낼 수 있습니다.

서버에서 응답이 오면 콜백 함수를 통해 결과 데이터 처리를 하게 됩니다.

출처:https://blogpack.tistory.com/658

 

AJAX 비동기 통신 기초(XMLHttpRequest)

비동기 웹 어플리케이션 제작을 위해 개발된 자바스크립트 기술입니다.AJAX 는 Asynchronous Javascript and XML 의 약자입니다. 최초에는 XML/XLST 포맷 데이터를 서버와 비동기로 주고받기 위해 고안된 자

blogpack.tistory.com

 

동기는 서로 딱딱 맞추는 느낌

비동기는 다른액션이 들어오는 경우이다.

서버와 다양한 데이터 포맷을 주고 받을 수 있다.

 

HTMLElement.innerText

HTMLElement 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.

 

https://jsbin.com/?html,js,output 

 

JS Bin

Sample of the bin:

jsbin.com

 

 

단편적으로 확인할때는 이 사이트에서 확인하자.

 

<!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로 class아니다. -->
  <div id="root"></div>
  
</body>
</html>
//포스트맨에서 복사해왔다. 해커API사이트 정보를 받아서 내가 가공하려고 만든 js파일이다.
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) => {
  //   document.getElementById("root").innerText = result;
  // }) //결과담아주는 리절트 변수
  .then((result) => {
    const ul = document.createElement("ul"); //DOM API  for문 밖에 있어야 한다.
    for (let i = 0; i < result.length; i++) {
      const li = document.createElement("li");
      li.innerHTML = result[i].title;
      ul.appendChild(li); //ul안에 넣어라. ul는 표이고 li는 로우다(느낌상)

      console.log(result[i].title);
    } //end of for
    document.getElementById("root").appendChild(ul); //아이디 루트를 가진 객체를 다 가져온다
  })
  .catch((error) => console.log("error", error)); //오류를 캐치가 잡아준다.

 

'학원수업 > 1월' 카테고리의 다른 글

01/25 국비학원 41회차 JavaScript수업 (nodemon사용하기, 스프레드 연산자)  (0) 2023.01.25
01/20 국비학원 40회차 수업 MyBatist, Tomcat, Gson  (0) 2023.01.22
01/18 국비학원 38회차 HTML수업  (0) 2023.01.18
01/17 국비학원 37회차 HTML수업  (0) 2023.01.17
01/16 국비학원 36회차 (Node.js, 자바오라클연동)  (0) 2023.01.16

관련글

댓글

티스토리툴바