본문 바로가기

IT/Develop

 (52)
React 리액트란? create-react-app을 이용한 개발환경구축 / 생활코딩 React – A JavaScript library for building user interfaces A JavaScript library for building user interfaces reactjs.org React 리액트란? 페이스북에서 만든 자바스크립트 UI 라이브러리 Component 기능 가독성 재사용성 유지보수 CODING -> RUN -> DEPLOY 개발환경 npm 설치 node.js의 기술을 이용해 만든 앱을 명령어 환경에서 손쉽게 설치할 수 있도록 도와주는 도구(일종의 앱스토어) https://nodejs.org/en/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.or..
[JavaScript] 조건문 if/else문, switch 문 조건문(Conditional Statements) 주어진 조건식의 평가 결과에 따라 코드 블럭의 실행을 결정한다. 조건식은 Boolean 값으로 평가될 수 있는 표현식이다. 조건문에는 if문과 switch문이 대표적이다. if 문 지정한 조건이 참인 경우 명령문을 실행한다. if (condition) { // block of code to be executed if the condition is true } if (hour < 18) { greeting = "Good day"; } if else 문 if 조건이 참 일 경우 코드를 실행하고 거짓일 경우 else가 실행된다. if (condition) { // block of code to be executed if the condition is true ..
HTML 특수 문자 표현 엔티티(entity), &nbsp; &quot; &lt;란??? HTML 소스에서 < 등은 파일이 깨져서 나타나는 문자가 아닌 HTML 엔티티입니다. 예를 들어 HTML에 < 특수문자를 넣으면, 태그의 시작으로 여겨서 에러가 납니다. 이러한 특수문자를 표현하기 위한 것이 HTML 엔티티이고, 특수문자를 HTML으로 변환하는 행위는 이스케이프(escape)한다고 합니다. 자주 사용하는 엔티티 Entity Name Character (공백) < & &(앰퍼샌드) " " © ©
[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..
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..
Sublime Text sublime text plugin All Autocomplete AutoFileName BracketHighlighter Color Highlight Settings Color Highlighter Diffy DocBlockr Emmet FuzzyFilePath Goto-CSS-Declaration Package Control Side Bar SublimeLinter Tagify AutoBackups Autoprefixer ConvertToUTF8 HTML/CSS/JS Prettify SFTP SublimeCodeIntel SublimeREPL Terminal sublimetext Key Bindings [ { "keys":["ctrl+shift+q"], "command":"open_in_browser..

티스토리툴바