본문 바로가기

장원익 기술블로그

📺 Front End/- HTML,css,Javascript29

[Javascript] Fetch API로 구현하는 Ajax 비동기 통신 ajax XMLHttpRequest 객체를 이용해서 웹 서버와 비동기로 통신하고, DOM 을 이용해서 웹 페이지를 동적으로 바꿔주는 프로그래밍 기법 Asynchronouse JavaScript XML 현재 XML을 사용하는건 드물고 JSON을 사용 페이지 새로고침 없이 특정 데이터만 리로드 서버로부터 데이터를 받고 작업을 수행 ajax 구현하기 ajax를 구현하는 기술에는 여러 기술이 존재한다. 그 중에 대표적인 3가지에서 Fetch API에 대해서 알아보자. XMLHttpRequest Fetch API JQuery Fetch API Fetch API는 기본적으로 XMLHttpRequest 보다 더 강력하고 유연하다. 이벤트 기반인 XMLHttpRequest과는 달리 Fetch API는 Promise 기.. 2021. 2. 26.

[Javascript] 자바스크립트에서 HTML Element의 이벤트를 다루는 방법 이번 시간은 자바스크립트에서 HTML 요소의 이벤트를 다루는 방법과 Todolist를 만들어보며 학습하는 시간을 갖도록 하겠다. 학습 순서 이벤트 객체란? 이벤트 등록, 삭제하기 addEventListener() removeEventListner() 지금까지 배운 내용으로 Todo 리스트 만들어보기 이벤트 등록, 삭제하기 우리는 지난 시간 까지 HTML Element를 등록, 수정, 삭제하는 방법에 대해 학습하였다. 이번 시간에는 우리가 지난번에 만든 Element에 이벤트들 등록시켜보는 일을 할 것이다. 이벤트 등록하기 이벤트를 등록하기 위해서는 addEventListener() 메서드를 사용한다. target.addEventListener(type, listener, useCapture); targe.. 2021. 2. 20.

[Javascript] 자바스크립트에서 HTML DOM을 다루는 방법 오늘은 JS 에서 HTML DOM 객체를 가져와 조작하는 방법에 대해서 알아볼 것이다. 오늘 배울 내용들이 모든 상황에서 사용되는 것은 아니고 대충 JS 에서도 이렇게 할 수 있구나 하는 생각이 목적이다. 더 자세한 내용은 많이 있으니 이번 글을 보고 방향을 잡아가길 바란다. 학습 순서 엘리먼트 가져오기 getElementById() getElementByName() getElementByClassName() getElementByTagName() 엘리먼트에 원하는 텍스트 추가하기 innerHTML innerText 엘리먼트 생성, 삭제, 수정하기 createElement() appendChild() removeChild() 엘리먼트 가져오기 HTML 요소 (Elements)를 제어하려면 우선 HTML .. 2021. 2. 20.

[Javascript] 자바스크립트에서 JSON 을 다루는 방법 JSON Json 은 JavaScript Object Notation 이라는 의미의 축약어로 데이터를 전송하거나 저장할 때 사용되는 경량 데이터 형식이다. 보통 JSON을 REST API 통신할 때 주고받는 Request, Response Body 에 사용한다. 즉 서버와 클라이언트간의 교류에서 많이 사용된다. 클라이언트는 서버에게 처리해야할 내용을 JSON 데이터로 변환하고 전송한다. 그럼 서버는 클라이언트로부터 온 JSON 데이터를 서버의 스펙에 맞게 재변환한다. 여기서 말 하는 서버의 서펙이란 Java로 구성된 서버인지, Python으로 구성된 서버인지를 뜻한다. 원래 JSON이라는 것은 JavaScript에서 탄생한 형식이라 Js의 객체와 매우 비슷하다. Javascript Object VS JS.. 2021. 2. 20.

[CSS] 어떤 요소가 앞으로 나올지 z-index 로 수직 위치를 정해보자. 지난 시간 우리는 CSS의 position속성으로 요소를 우리가 원하는 곳에 배치하는 방법에 대해서 배웠다. 그래서 우리는 fixed, absolute, relative, sticky등등을 알아보았고, 그 결과 우리가 원하는대로 HTML Elements를 배치할 수 있게 되었다. 오늘은 지난 시간 배웠던 Position을 토대로 배치를 마쳤을 때 z-index로 어떤 요소가 앞으로 올지를 정해보는 시간을 갖겠다. z-index mdn에서는 z-index를 위와 같이 이야기 한다. z축의 순서를 지정한다. 이 말이 무슨 말일까? 우리는 일반적인 HTML 문서를 눈으로 볼 때는 2D로 보기 때문에 X축과 Y축만 인식할 수 있다. 하지만 이 z-index 를 설정하면 조금 더 입체적으로 배치할 수 있게되고 그.. 2020. 10. 16.

[CSS] 요소를 원하는 곳에 배치하기 position 속성 :: static, relative, absolute, fixed, sticky CSS에서 HTML Elements를 내가 원하는 곳에 배치하는 방법에는 여러가지 방법들이 존재한다. display 속성으로 영역을 나눠서 배치를 할 수도 있고, box-sizing과 같은 방법으로 배치를 할 수도 있다. 하지만 이러한 방법들에는 많은 제약사항들이 존재하며, 우리가 원하는 대로 동작시키기 위해서는 Css의 부모, 자식간의 관계를 파악해줘야 한다. 하지만 position속성을 이용한다면 조금 더 아름답고 간단하게 요소를 우리가 원하는 곳에 배치할 수 있다. 사전 준비 본격적인 이야기에 앞서 우리는 이번 시간에 스크롤이 있는 영역이 필요하므로 다음과 같은 화면을 먼저 구성해 놓고 실습을 진행할 것이다. index.html index.css body { background: #cfd8dc; d.. 2020. 10. 15.

이전 1 2 3 4 5 다음

티스토리툴바