본문 바로가기

Front-End: Web

(163)
uncaught referenceerror $ is not defined jquery를 사용할 수 있도록 HTML body에 아래와 같은 코드를 추가한다. -> jquery를 사용할 것이기 때문이기 때문에 작성하지 않으면 document를 사용할 수 없다. 만일 추가되어 있음에도 에러가 발생한다면 jquery가 늦게 인식되어 에러가 발생되는 문제이다. 따라서 위에 작성된 코드의 위치를 위로 올리면 된다.
HTML에서 JavaScript 로드하기 1. inline - 태그에 직접 자바스크립트를 기술하는 방식. 정보와 제어가 섞여 있으므로 정보로서의 가치가 떨어진다. 2. script - 태그를 만들어 그 사이에 자바스크립트 코드를 작성하는 방식. html 태그와 js 코드를 분리할 수 있다는 장점이 있다. 3. 외부 파일로 분리 - js를 별도 파일로 분리하는 방식. 엄격하게 정보와 제어를 분리할 수 있다는 장점이 있다. 하나의 js파일을 여러 웹 페이지에서 로드할 수 있으므로 js의 재활용성을 높일 수 있다. 또한 캐쉬를 통해 속도의 향상, 전송량의 경량화를 도모할 수 있다. script2.js var hw = document.getElementById('hw'); hw.addEventListener('click', function(){ ale..
[CSS] position: absolute인 요소를 중앙 정렬하기 코드 element { position: absolute; left: 50%; transform: translateX(-50%); } 설명 1. left : 50% - 화면의 가로 수치에서 절반 만큼 위치를 이동한다 2. transform: translateX(-50%) - 요소의 가로 수치의 절반만큼 마이너스 이동한다
[생활코딩: JavaScript] 3. 데이터타입 - 문자열과 숫자 최신 ECMAScript 표준은 다음과 같은 7개의 자료형을 정의한다. 기본 자료형 (Primitive) 인 여섯가지 데이터 타입 Boolean Null Undefined Number String Symbol (ECMAScript 6 에 추가됨) 별도로 Object 도 있다 자바스크립트의 자료형 모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알� developer.mozilla.org Number +, -, /, * 등 연산자를 이용해 연산할 수 있다. String "큰따옴표" 혹은 '작은따옴표'로 감싼다. 메소드 .length() : 문자열의 길이를 출력 .touppe..
[생활코딩: JavaScript] 2. HTML과 JavaScript의 만남 script 태그 기본적으로 JavaScript는 HTML위에서 동작하는 언어이다. 따라서 HTML언어 위에 다른 언어인 JavaScript를 함께 사용하는지 알아보자. html hello world 1+1 이벤트 button : onClick 이벤트 Console을 이용하여 자바스크립트 파일을 만들지 않고도 자바스크립트를 실행할 수 있다. ex) 개발자 모드 > Elements 에서 esc한번 누르면 아래에 console이 뜬다. 이곳에 자바스크립트로 작성한 코드를 입력하게 되면 현재 웹페이지 정보를 불러와서 자바스크립트를 실행시킬 수 있다. 즉, 이미 만들어진 웹사이트에 필요에 따라 간단한 자바스크립트 코드를 작성하여 문제를 해결할 수 있다.
[생활코딩: JavaScript] 1. Intro html은 정적이다. 하지만 사람들은 동적으로 사용자와 상호작용할 수 있는 웹페이지를 만들고 싶었다. 이런 배경에서 탄생한 것이 JavaScript이다. 목적 웹페이지의 야간모드/주간모드 버튼을 통해 모드를 변경한다. - 사용자가 누르는 버튼으로 인해 웹페이지의 상태가 변화 (상호작용) - 개발자 모드 > Elements의 코드가 변화 ex)
[HTML] Jade 사용 방법 익히기 Jade란? express는 화면을 구성하기 위한 뷰 템플릿 엔진으로 Jade와 ejs 등을 지원한다. Jade는 *Haml의 영향을 받은 자바스크립트를 이용한 높은 성능의 노드용 뷰 템플릿 엔진으로, 처음 사용할 땐 불편할 수 있으나 익숙해지면 HTML보다 훨씬 편하다. Haml (=HTML Abstract Markup Language) HTML을 위한 경량화 마크업 언어로, 즉시 처리하는 기존의 인라인 코딩 방식을 따르지 않고, 콘텐츠를 동적으로 표현할 수 있는 언어. Jade 사용 방법 익히기 1. 태그 기술하기 태그 표현 방법 기존 HTML태그는 태그를 지칭하는 단어 하나만 입력하면 사용할 수 있다. Jade 문법으로 표현 html head body 결과 이처럼 코드가 아주 단순해지며, 태그의 깊..
라우트, 라우터, 라우팅 Route 경로. 길. Router 여러 라우트(길) 중에서 가장 빠른 길을 찾아내는 역할을 함 Routing 쉽게 말하자면 경로를 찾아가게 하는 과정. 라우팅 프로토콜로 인해 만들어지는 것이 라우트이다. uri(경로) 및 특정한 http 요청 메소드(get, post 등)인 특정 *엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것. 각 라우트는 하나 이상의 핸들러 함수를 가지며, 이 함수는 라우트가 일치할 때 실행된다. *엔드포인트: 어떤 소프트웨어나 제품의 최종 목적지인 사용자를 가리키는 말. (ex) PC, 노트북, 핸드폰 등 유저가 사용하는 devicies (참고) [네트워크] Routing(라우팅) 개념 * 라우트와 라우팅의 차이점(route와 routing의 차이점..

반응형