키다리 개발자

HTML5 HTML : 을 사용하여 영역을 구분한다. CSS : 자바스크립트가 담당하던 처리의 일부를 HTML 태그 속성에서 처리한다. JavaScript : HTML5, CSS에서 처리할 수 없는 기능들을 담당하며, 캔버스(Canvas)에서 사용하면 게임 작성도 가능하다. HTML4 HTML : 특정 태그 를 사용하여 영역을 구분한다. CSS : HTML의 태그를 꾸며준다. JavaScript : 데이터를 처리하거나 서버에 요청하는 일을 한다. HTML5에서 추가 된 태그 구조적 태그 - 구역을 나누는 블록 요소 대신 대체 태그 header : 사이트의 소개나 네비게이션 등을 표시 nav : 사이트의 내비게이션 항목을 표시 article : 독립적인 콘텐츠를 표시, 뉴스기사, 블로그의 글 section..

저번에는 HTML과 Javascript로 계산기를 만들어보았으며(Javascript 메뉴에 글 기재함), 이번에는 React만을 이용하여 계산기를 만들어 보았습니다. 만든 방식과 원리는 저번과 비슷하며, 이번에는 React의 state를 이용한 것과 큰 차이가 없습니다. state는 자기 자신의 상태를 나타내 주는것으로, setState로 상태를 재설정해 줍니다. Html 구조 코드 vs React.js (state, props, map)코드 비교하기 바로 첫번째 소스코드는 React.js에서 state를 이용해 Html구조로 구성한 코드입니다. 보시다시피 위의 계산기 기능으로서는 전혀 문제없이 구현되었습니다. 하지만, component없이 한 번에 다 소스코드를 작성하였기에 코드가 길어지고, 엄청 많은..

문서 객체 모델(DOM) 문서 객체 모델(DOM, Document Object Model)은 HTML 문서를 객체화한 것입니다. (인터페이스) 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다. Javascript에서 HTML을 가져오기 위해 만든것이 DOM이다. 그러므로 Javascript는 DOM을 이용하여 새로운 HTML / 기존의 HTML의 요소를 생성, 변경, 삭제를 할 수 있다. API (Application Programming InterFace) API = 다른 사람이 자신의 소스를 쉽게 사용할 수 있도록 함수를 만들어 놓은 것 HTML 요소와 관련된 작업을 도와주는..

Web Frontend 개발자가 되기 위해 한 달 내내 코딩 공부에 매진하였다. 작은 프로젝트를 하면서 발전된 모습에 성취감을 얻었으며, HTML, CSS, Javascript를 하며 개발자가 되기 위해 한층 더 가까워진 것 같아 뿌듯하다. 10월에 달성한 목표 HTML, CSS, Javascript(기본) 공부한 내용 모두 블로그 작성 흥미와 적성 발견하기 퇴사 후 몇 달간 막연하게 Java를 공부 하였는데, Frontend 개발자 로드맵에 대해 우연히 알게 되어 분야에 좀 더 찾아보던 중 Javascript의 장점과 매력에 관심을 갖게 되어 주 언어를 Javascript로 바꾸어 공부를 하게 되었다. 아직 기본적인 것들이지만 HTML, CSS, Javascript 3개를 활용하여 작은 프로젝트를 만들..

Template string : ES6에 새롭게 추가된 기능이며 backtick : ` ` 을 사용하여, javascript 간단한 문자열 채워넣기 (string interpolation) 기능이 가능해졌습니다. 템플릿 문자열은 JavaScript 값(value)을 문자열에 넣어 보기 좋고 편리한 방법입니다. 그리고 ${대입받는 값} 템플릿 대입문(template substitution)이라고 부릅니다. 객체 배열, data model const recommenderCardDataModels = [ { recImg: 'https://img.sbs.co.kr/newsnet/etv/upload/2018/01/23/30000591747_1280.jpg', recName: 'Kim Yu Jung', recLoc..

Javacript + HTML + CSS로 계산기를 만들어 보았습니다. 계산기 제작 순서는 HTML로 틀을 만듦 Javascript로 계산 기능 구현 CSS로 디자인 적용 로 순차적으로 하였습니다. HTML 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 계산기 % C del / 9 8 7 * 6 5 4 + 3 2 1 - 0 . = button 태그에 onclick 이벤트 속성을 주어 javacript의 함수와 연결시켰습니다. onclick은 이벤트 속성으로 한번 클릭을 ..

if, else if, else 조건문은 위에서부터 순차적으로 제어를 하는 정말 중요한 실행문입니다. 1 2 3 4 5 6 7 8 if (score >= 90) alert('A'); else if (score >= 80) alert('B'); else if (score >= 70) alert('C'); else alert('F'); if(표현식) : if 문은 표현식의 결과가 참(true)이면 주어진 실행문을 실행하며, 거짓(false)이면 아무것도 실행하지 않습니다. else if(표현식) : else if는 중첩하여 여러번 조건문을 사용할 수 있습니다. else : else는 위의 모든 if, else if 문이 거짓(false)일 때, 참으로 실행됩니다. 그러므로 괄호안에 표현식은 없습니다. 하나의..

JavaScript는 웹 페이지를 동적으로 만들어주는 언어로, 객체 기반의 스크립트 프로그래밍 언어입니다. 단순히 규격을 나타내는 HTML과 CSS와 달리, 변수와 함수 등이 존재하는 프로그래밍 언어입니다. JavaScript를 줄여서 js라고 하며 파일 확장자는 .js를 사용합니다. JS파일 사용법 CSS와 같이 Javascript 파일을 만들어 따로 분리하여 HTML과 연결시켜주는 방법이 있는데, 1 2 3 이와 같이 에 로 js파일을 연결 시켜주는 방법이 있고 1 2 3 4 5 6 배가본드 안에 내용 가장 밑줄에 사용하는 방법이 있습니다. 주석 주석 사용법 : 한줄인 경우 // 주석내용 여러 줄 일 경우 /* 주석내용 */ 그리고 단축키는 ' Ctrl + / ' 를 사용하면 간편하다. 주석(comm..