본문 바로가기

분류 전체보기

 (225)
IELTS Speaking Part 1 - Work
IELTS Speaking Part 1 - Hometown
IELTS Speaking Part 1 - Home
[JavaScript] 변수(variable)란? 변수(variable)란? 변수는 데이터를 담기 위한 메모리 공간을 의미합니다. 쉽게 말해 작은 상자로 비유할 수 있습니다. 자바스크립트에서는 변수 타입이 없으므로 변수 선언자는 var 하나뿐입니다. 쉼표(,) 사용하면 변수 여러 개를 한 문장으로 선언할 수 있습니다. var x, y; 변수를 선언하기만 하면 undefined 값이 들어가고 대입(=) 연산자를 사용하면 변수에 값을 대입할 수 있습니다. x = 10; * 수학에서 = 연산자는 같다는 뜻이지만 프로그램에서 = 연산자는 오른쪽 값을 왼쪽 변수에 대입한다는 뜻입니다. Example var x = 10; var y = 20; var z=x+y; document.write(z); --> 결과 : 30 변수 이름 짓기 변수의 이름은 자유롭게 지정할 ..
[JavaScript]자바스크립트와 제이쿼리 차이점? 자바스크립트(JavaScript)란? 자바스크립트는 웹 개발 스크립트 언어 중 가장 많이 쓰이는 객체지향 언어입니다. 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있습니다. 현재 대부분의 웹 브라우저에서 자바스크립트가 내장되어 있습니다. 변수를 미리 선언하지 않아도 브라우저가 자동으로 파악하고 인터프리터 언어로 컴파일 과정을 거치지 않습니다. *** 자바(Java)와 관계는? 자바와 자바스크립트는 이름만 놓고 서로 관련이 있는 언어로 생각되기 쉽습니다. 하지만 두 언어는 서로 관련이 없으며 모두 C언어를 기반으로 만들어져 문법상 비슷합니다. 자바는 대표적인 객체지향언이어고 컴파일 과정을 거치며 자바스크립트는 클라이언트용 언어로 인터프리터 ..
메타(meta) 태그 정리 / 웹표준 SEO 메타(meta) 태그란? 웹 서버와 웹 브라우저간에 상호 교화노디는 정보를 정의하는데 사용합니다. HTML 문서의 사이에 입력하는 특수 태그로 문서가 어떤 내용을 담고 있고 키워드는 무엇인지, 누가 만들었는지 등의 특성을 담고 있습니다. 메타태그의 속성 http-equiv, name, content 3가지 속성이 있습니다. meta charset HTML5의 인코딩 지정 방법입니다. 보통 UTF-8를 값으로 주면 전세계 대부분의 문자를 표현할 수 있습니다. meta viewport 뷰포트는 화면에 보이는 영역으로 스크롤해야 보이는 영역을 제외한 보이는 그대로 크기의 영역입니다. 예제 코드는 흔히 쓰이는 코드로 기기의 넓이이며 그에 맞춰 초기 화면 배율을 1로 지정한다는 의미입니다. meta keyword..
[JavaScript] 데이터 타입(Data Type) String & Numbers 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 데이터(숫자, 문자열, 불리언 등)의 종류를 말합니다. 자바스크립트의 모든 값은 데이터 타입을 갖고 ECMAScript 표준(ES6)은 7개의 데이터 타입을 제공합니다. 원시 타입(primitive data type) : 변경 불가능한 값 Boolean Null Undefined Number String Symbol(ES6에서 추가) 객체 타입(object/reference type) object String 타입 (문자열) 자바스크립트의 String 타입은 텍스트 데이터를 나타내는데 사용합니다. 문자열은 0개 이상의 16비트 유니코드 문자(UTF-16)들의 집합으로 전 세계에서 사용하는 문자를 대부분 표현할 수 있습니다. 문자열은 작은 따옴표(') 또는..
[JavaScript] 이벤트란? 이벤트 핸들러 종류 자바스크립트에서 이벤트(Event)란? 사용자의 어떠한 동작에 따라 기능이 실행되는 것을 의미합니다. 버튼을 누르거나, 글자를 입력하거나, 새로운 문서를 읽어 들이거나 하는 것들이 이벤트입니다. 자바스크립트를 HTML에 사용할 수 있게 되면서 사용자의 행동에 따라 적절한 조치를 취할 수 있게 됨에 따라 단순히 보여주는 브라우저 환경에서 벗어나 동적인 페이지가 될 수 있었습니다. 이벤트 핸들러의 종류 Event Description onclick 마우스 클릭했을 때 ondblclick 마우스를 더블클릭했을 때 onchange input 요소의 값이 바뀌었을 때 onmouseover 마우스 포인터가 HTML 요소 위에 놓여 있을 때 onmouseout 마우스 포인터가 HTML 요소를 벗어났을 때 onkeyd..
웹디자이너를 위한 크롬 필수 확장 프로그램 Full Page Screen Capture https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl Full Page Screen Capture 추가 권한을 요청하지 않고 현재 페이지의 스크린샷을 전체적으로 캡처하고 신뢰할 수 있습니다! chrome.google.com ColorZilla https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp ColorZilla Advanced Eyedropper, Color Picker, Gradient Generator and other colorf..
CSS 초기화 / Reset CSS 브라우저 기본값의 초기화(reset) 모든 브라우저에서 통일된 화면을 볼 수 있도록 기본값을 처음부터 초기화 시킨다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.co..
IE CSS hacks - IE6, 7, 8, 9, 10, 11 IE6 Only ================== _selector {...} IE6 & IE7 ================== *html or { _property: } IE7 Only ================== *+html or { *property: } - Keep in mind that you have to put the IE7 property first within the same selector. IE8 ================== .selector/*\**/ { color:#f00; } **NOTE**: LESS v1.5.0 shoots out an error when compiling the CSS if you use this hack :/ IE8 and IE9 (TOTALL..
All CSS Toggle Switch Toggle input[type=checkbox]{height:0;width:0;visibility:hidden} label{cursor:pointer;text-indent:-9999px;width:100px;height:50px;background:grey;display:block;border-radius:100px;position:relative} label:after{content:'';position:absolute;top:5px;left:5px;width:40px;height:40px;background:#fff;border-radius:90px;transition:.2s} input:checked + label{background:#5661DC} input:checked + label:afte..

티스토리툴바