배열과 반복문의 활용 - 생활코딩 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 1. 배열과 반복문 정통적으로 배열과 반복문은 같이 사용되는 경우가 많다. 가. 실습 : 리스트 작성 Loop & Array count one two three four 같은 효과를 내는 더 효율적인 방법이 있다. ... one two three four ... 해당 코드를 배열과 반복문을 이용해서 대체하면 유지보수 측면, 중복 최소화, 가족성 측면에서 유리하다. ... ... 배열의 크기만큼 배열의 값을 리스트로 작성한다. Loop & Array count 2. 콘솔 개발자 도구를 잘 다루면 편하다. 우클릭 → ‘검사’ 클릭 → ‘console’ 콘솔창을 ..

배열 - 생활코딩 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 배열 배열 선언 ... ... 배열에 값을 추가하는 법 ... ... Array - JavaScript | MDN JavaScript Array 클래스는 리스트 형태의 고수준 객체인 배열을 생성할 때 사용하는 전역 객체입니다. developer.mozilla.org push() 외에도 pop() , shift() , unshifth() 등의 기능도 제공한다. pop() : 가장 뒤에 값을 반환하고 삭제 그리고 전체 길이는 줄어듬. shift() : 가장 앞에 값을 반환하고 삭제 그리고 순서를 한 칸씩 앞으로 당김. unshift() : 가장 앞에 값을 추가하고 그리고 순서를..

변수와 대입 연산자 - 생활코딩 변수와 대입 연산자 2017-12-01 03:26:24 opentutorials.org 이 글은 이고잉님의 오픈튜토리 강의를 듣고 정리한 내용입니다. JS 학습의 방향성 이미 파이썬, C, Java를 배웠다. 이 짬(?)을 바탕으로 빠르게 JavaScript를 배워보겠다? 배경지식을 바탕으로 부족하거나 새로운 지식만 짚고 넘어갈 것이다. 제어할 태그 선택하기 버튼 2개를 생성했다. night 버튼을 누르면 배경은 어둡게, 글자는 밝게 만들고 싶다. 또 day는 그 반대로 기능하도록 만들고 싶다. WEB Html 코드다. input 태그에 onclick 속성을 추가한다. 클릭 이벤트가 발생한 경우 실행할 JavaScript 코드를 추가한다. 설명은 아래에. document...

데이터타입 - 문자열과 숫자 - 생활코딩 데이터타입 - 문자열과 숫자 2017-12-01 03:25:05 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. JS data type JavaScript의 타입과 자료구조 - JavaScript | MDN 모든 프로그래밍 언어에는 내장된 자료구조가 존재하지만 보통 그 내용은 언어마다 다릅니다. 이 글에서는 JavaScript에서 사용할 수 있는 내장 자료구조와 그 속성에 대해 알아보겠습니다. 그러 developer.mozilla.org 해당 페이지의 설명에 따르면 … JavaScript의 타입 JavaScript 언어의 타입은 원시 값과 객체로 나뉩니다. 원시 값 (언어의 최고 로우레벨에서 직접 표현되는 불변 데이..

수업의 목적 - 생활코딩 수업의 목적 2017-12-01 03:17:47 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. JavaScript CSS로 아름다운 웹 페이지에 대한 욕구가 충족되기 시작했다. 그러자 사용자들이 동적으로 상호작용할 수 있는 웹 페이지를 원하기 시작했다. 그래서 자바스크립트라는 기술이 태어났다. 기존의 웹 페이지는 화면에 출력되면 자기 자신을 변화시킬 수 없었다. 하지만 자바스크립트는 HTML을 제어하여 사용자와 상호작용할 수 있다. 그런 면에서 자바스크립트는 웹 페이지의 동적인 요소를 담당한다고 할 수 있다. HTml 과 JS HTML에 JavaScript를 추가하는 2가지 방법에 대하여 알아보자. script 태그 는 자바스크립..

반응형 디자인 - 생활코딩 반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 반응형 웹 PC든 스마트폰이든 태블릿이든 웹에 접속할 수 있는 하드웨어가 다양해졌다. 그렇기에 웹은 다양한 사이즈와 비율을 가진 하드웨어에 대응하는 웹 페이지를 만들어야 했다. 그런 맥락에서 탄생한 것이 바로 반응형 웹 디자인이다. 반응형 웹 디자인(responsive web)이란 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것을 뜻한다. 미디어 쿼리 미디어 쿼리는 반응형 디자인을 CSS로 구현하는 역할을 맡는다. 미디어 쿼리..

박스모델 - 생활코딩 CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 박스 모델 적용 위의 이미지와 같이 칸으로 나눠진 웹 페이지를 만들어 보자. 가로줄을 긋기 가로줄을 긋는다. 덤으로 h1 태그의 글자 크기와 정렬 위치를 변경한다. ... ... 개발자 도구를 이용해서 h1 태그의 디테일을 수정한다. (우클릭→ ‘검사' 클릭) margin을 없애고 padding 20px을 추가한다. ... h1{ font-size: 45px; text-align: center; border-bottom: 1px solid gray; margin: 0; padding: 20px..

박스모델 - 생활코딩 CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항 opentutorials.org 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 1. 박스 모델이란? 박스 모델이란 개념이 있다. 직관적으로 이해하기 위해서 구글에 검색해 이미지를 살펴보자. 구글에 박스 모델이라고 검색하면 아래와 같은 결과를 얻을 수 있다. 박스 모델에 대한 사전적 정의를 찾아보면 아래와 같은 대답을 얻을 수 있다. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around eve..