Front-end

Front End 는 사용자의 요청을 위한 화면 또는 결과를 보여주는 화면을 구성하는 역할을 한다.사용되는 언어는 HTML, CSS, Java Script, J-Query 가 있다.Server Side 는 요청에 대한 실제 처리를 담당한다.사용되는 언어는 Java, P

CSS CSS (Cascaing Style Sheets) 는 단계적으로 디자인 스타일을 쌓는다는 의미이다. CSS는 HTML을 보다 세련되게 표현을 해주는데, HTML로 만든 기본 문서의 모양을 우리가 일상에서 접할 수 있는 예쁜 웹페이지로 만들어주는 것이다. 웹 페이지를 이미지로 만들게 되면 속도가 굉장히 느려지기 때문에 CSS로 이미지가 없더라도...

selector css selector 는 css를 적용하기 위한 특정 태그(요소)를 가져오는데 도움을 준다. 간단하게 원하는 요소를 가져올 수 있어서 많이 사용되고, 성능이 좋다는 특징이 있다. selector은 head에 위치해야 하며 `` 태그로 감싸 사용해야 한다. selector 방법 3가지 #id : 아이디가 id인 요소 (하나만 인정되며...

Java Script 는 html 에 동적 기능을 구현한다.html로 뼈대를 구성한 이후 css를 통해 세련되게 꾸며주고, Java Script 를 통해서 웹 페이지가 동적으로 움직이게(=살아 움직일 수 있게) 만들어주는 것이다.Java Script 는 html에도 c

배열 Java Script 에서 여러개의 변수를 담을 수 있는 것은 배열과 Object 가 있다. Java Script 에서 변수는 크기를 지정하지 않고, 무한대로 늘어난다는 특징을 가지고 있고, 배열의 index는 0부터 시작해 1씩 증가한다. (크기를 지정하지 않기 때문에 당연히 효율은 떨어진다.) > 배열 선언 배열을 선언하는 방법은 2가지가 ...

Deep Copy 자바 스크립트에서 기본자료형은 깊은 복사가 된다. 만약 변수에 담긴 값을 =을 통해 다른 변수에 넣어줄 경우 해당 값은 완전히 복사되어 사용할 수 있다. 처음 선언된 original 에는 100이 들어있고, 그 값을 복사해서 넣어준 copy에도 1

Object(객체) Java script 에서 여러 데이터를 담을 수 있는 것은 array 와 Object 가 있다. Object 는 어떤 값이든 담을 수 있다. 그리고 Object 안에 담긴 값을 우리는 속성(attribute) 라고 부른다. 자바에서 Map 와 비슷하다. > Object 선언 ✅object 선언 방법 1 : 선언과 동시에 키와 ...

Event 이벤트는 어떤 사건을 의미한다. 우리가 버튼을 클릭하거나 마우스를 움직이는 등의 사건이 발생할 때 이벤트가 발생했다고 한다. 이벤트를 등록하는 방식은 속성 추가 방식(onclick)과 이벤트 리스너(Event Listener) 방식이 있다. ✔ 자주 사용하는 이벤트 onchange : html 문서가 변경이 있을 경우 작동 (ex. sel...

DOM (Document Object Model) Java Script 에서는 문서 내 요소(태그=Element)를 가져와 속성을 다루는 역할을 주로 한다. DOM (Document Object Model)은 웹 문서의 구조화된 표현이다. 이것은 프로그래밍 언어가 웹 페이지 내의 객체에 접근하고 조작할 수 있게 하는 인터페이스로 동작하며, 주로 자바스...

BOM(Browser Object Model) BOM 은 DOM 보다 한 단계 더 큰 개념이다. html 과 java script 는 브라우저 안에서만 실행된다. 최상위는 윈도우이기 때문에 DOM을 사용할 때에도 window를 작성해줘야 하지만 프로그래밍은 너무

경고창 경고창의 종류에는 alert(), confirm(), prompt()가 있다. 경고창이 실행되면 브라우저의 모든 움직임을 정지시켜 버린다. (=경고창이 꺼지기 전까지는 프로그램의 흐름을 정지한다.) 이러한 경고창들은 모두 브라우저에게 빌려서 사용하는 것들이

location 로케이션은 위치 정보를 얻을 때 사용한다. console.log(location.href); 현재 페이지가 존재하는 서버상의 전체 경로 console.log(location.protocol); 웹 프로토콜(http, https, ws, ...) 을 알려준다. console.log(location.hostname); 도메인 또는 ip...

timing 브라우저에서는 특정 시간 마다 어떤 일을 수행 하거나 특정 시간 후에 어떤 일을 수행할 수 있다. (시간 단위 1/1000초 (milliseconds)) setInterval(doIt, 1000) : 1초마다 doIt 함수를 실행해라 (멈출 수 없음) 1회만 사용할 때에는 익명함수를 사용해준다. clearInterval(myTime) : ...

JSON (Java Script Object Notation) 말 그대로 JavaScript Object 형태로 전송을 한다는 뜻이다. (자바 스크립트 오브젝트 형태로 통신하는 것!) XML과 함께 최근 데이터 전송 시 굉장히 많이 활용된다. ※ 다만 보안이 강조되

J-Query

부모와 자식 DOM 내에서도 부모 자식 관계가 존재하고, 이런 관계를 이용해 원하는 요소를 얻어오기도 한다. `는의 부모(parent)이고 반대로 는 `의 자식(child)이다. `는의 조상(ancestor)이고 반대로 는 `의 후손(descendant)이다. ``

이벤트(Event) ✨ 이벤트 등록 이벤트를 등록하는 방법은 직접 등록과 on을 통한 등록이 있다. $(selector).click(function); $(selector).on("click", functon); ※ on으로 생성한 이벤트는 off를통해 이벤트를

Attribute 오브젝트는 Attribute 를 갖는다. (member 라고도 한다.) 당연히 DOM 객체 에서도 객체를 갖는다. J-Query 에서는JS 와 마찬가지로 이 속성을 다룰 수 있다. `` 가 있을 때 text 타입은 → attr("type") 가 될

자바 스크립트에서 문자열 표현 시 '' (싱클쿼터)로 감싸져 있다면 내부 문자열은 ""(더블쿼터)로 표시해 준다. (반대 경우에도 동일) 예시) $('#test3').attr('onclick', 'alert("Hello")'); 만약 Uncaught SyntaxEr

css()는 비교적 단순한 스타일을 적용할 때 활용하고, 특정 스타일을 확인 / 변경할 경우 사용한다.$(셀렉터).css("속성") : 선택한 요소의 스타일 값을 받아온다.$(셀렉터).css("속성", "값") : 선택한 요소의 스타일 값을 변경한다..css() 의 (

➕ 요소 추가 (append) 제이쿼리를 사용하면 자바스트립트보다 쉽게 요소를 추가할 수 있다. $(셀렉터).append( “추가 내용”); : 선택한 요소 내 마지막 요소에 추가 $(셀렉터).prepend(“변경 내용”); : 선택한 요소 내 시작점에 추가 $(셀렉터).after(“변경 내용”); : 자식 요소가 아니라 동일 요소로 들어간다. (뒤에)...

요소 면적 width() : 요소 크기 innerWidth() : 요소크기 + padding outerWidth() : 요소크기 + padding + border outerWidth(true) : 요소크기 + padding + border + margin 만약 요소의 크기를 아래와 같이 설정해 둘 경우 각 결과는 아래와 같다.` width() : 40...