키다리 개발자

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..

padding과 margin은 간격 사이의 영역을 정의하는데 기준점이 다릅니다. 예를 들어, 우리가 레스토랑에 가서 음식 2개를 시켜서 테이블에 놓았다고 합니다. padding은 접시의 테두리(border)에서 음식(content)까지의 사이의 영역이며, margin은 접시(element)와 접시(element) 사이의 영역으로 이해하시면 됩니다. padding padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다. padding 속성 padding-top padding-rig..

: HTML Link 요소는 현재 문서와 외부 리소스와의 연결 관계를 명시합니다. 이 요소는 스타일 시트에 링크하는 데에 가장 많이 사용됩니다. rel="속성 값" : 요소에 반드시 명시되어야 하는 필수 속성입니다. 이 속성의 가장 일반적인 쓰임새는 스타일시트의 링크를 나타내는것입니다. "stylesheet" : 스타일 시트(stylesheet)로 사용할 외부 리소스를 불러옵니다. type : 태그의 type 속성은 링크된 외부 리소스의 미디어 타입을 명시합니다. 이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다. href="URL" : 링크된 외부 리소스(external resource)의 URL를 명시합니다.

HTML의 기본 구조는 아래와 같다. (본문에서는 HTML 기본 구조의 요소들만 기록하겠습니다.) 문서의 첫 줄에 선언을 하면, 작성하는 문서가 HTML5 임을 명시하는 것이다. ... HTML 문서의 처음과 끝을 나타낸다. 사람의 뇌의 해당하는 부분이다. (보이지 않는 부분을 담당) 문서의 문자셋(character set)을 지정하는 정보와 문서의 제목(title)을 나타낸다. ... 사람의 몸통(본문)에 해당한다. (보이는 부분을 담당) body 안에 필요한 요소들을 담아 html문서로 나타낼 수 있다. 한 줄 결론 HTML의 기본 문서구조에 대해 와 의 차이점은 사용자가 이용할 수 있는 View의 유/무로 역할이 다르다. : 사람의 뇌 기능 (보이지 않는 기능적 역할) : 사람의 몸통 역할 (보여지..