[CSS] 반응형 (@media)

위 결과는 가로의 길이가 줄어들면 자동으로 아래로 내려 간다. 이거에 핵심 코드는 // 최대길이를 기준으로 하고 싶으면 max-width // 최소길이를 기준으로 하고 싶다면 min-width 으로 하면 된다. @media (max-width: 800px) { } 아래는 해당 결과값의 풀 코드이다. WEB HTML CSS JavaScript CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages a..

2021.12.05

[JS] 화살표 함수

화살표 함수 (arrow function)는 EC6 문법에서 함수를 표현하는 새로운 방식이다. 그렇다고 해서 기존 function을 이용한 함수 선언 방식을 아예 대체 하지는 않는다. (사용 용도가 조금 다르다) 이 문법은 주로 함수를 파라미터로 전달 할 때 유용하다. 아래 첨부한 사진들에 코드로 확인 해 보자. 둘의 결과가 다른 것을 알 수 있다. function()을 사용 했을 때는 검둥이가 나타났고, ()=>을 사용 했을 때는 흰둥이가 나타났다. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속 된 인스턴스를 가리킨다.

2021.12.03

[jQuery] Ajax

Ajax(Asynchronous Javascript And XML)는 서버와 데이터를 교환하는 기술의 하나이다. 그냥 쉽게 말해, 새로고침을 하지 않고도 서버에서 데이터를 받아 오는 거다. Ajax는 XMLHttpRequest객체를 사용한다. Ajax에 의하여 우리는 전체 페이지의 업데이트 없이 특정 DOM객체를 새로 업데이트 할 수 있게 된다. Ajax애플리케이션의 단계 1) 클라이언트 컴퓨터에서 사용자가 문자를 입력하는 것과 같은 이벤트가 발생하면, 자바스크립트 함수가 호출된다. 함수에서 XMLHttpRequest 객체의 인스턴스가 생성된다. 2) XMLHttpRequest 객체는 현재 HTML 페이지의 상태를 가지고 있는 XML 메시지를 구성하여, 웹 서버로 보낸다 3) XMLHttpRequest ..

2021.11.30

[jQuery] jQuery를 이용한 DOM 변경

jQuery를 이용하여 DOM요소를 변경,삭제,추가 할 수 있다. 요소의 내용을 가져오거나 변경할 수 있다. text(), html() - text(): 선택된 요소의 텍스틀 반환한다. - html(): 선택된 요소의 HTML태그가 포함된 컨텐츠를 반환한다. 요소의 속성을 가져오거나 변경할 수 있다. attr() 요소의 스타일 속성을 가져오거나 변경할 수 있다. css() 요소를 추가하거나 삭제 할 수 있다. append(), remove() 입력 필드의 값을 반환한다. val() 요소의 위치를 반환한다. position() val()예제 입력: val()예제 val() 예제이다. DOM에 요소 추가하기 jQuery에서 새로운 컨텐츠를 추가할때 사용되는 4개의 메서드가 있다. append() 선택된 요소..

2021.11.29

[jQuery] fadeIn()/fadeOut()

fadeIn() fadeOut()

2021.11.29

[jQuery] animate()