Front-end (10) 썸네일형 리스트형 [모던 JavaScript 튜토리얼] 2.2 코드 구조 모던 JavaScript 튜토리얼을 읽고 정리하였습니다. 이 파트에서 배우는 것은 코드 블록을 만드는 방법이다. 문(statement) 문은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다. 서로 다른 문은 세미콜론으로 구분한다. alert('Hello'); alert('World'); 세미콜론 줄바꿈이 있다면 세미콜론을 생략할 수도 있다. alert('Hello') alert('World') 자바스크립트는 줄 바꿈이 있으면 이를 암시적 세미콜론으로 해석한다. 이런 동작 방식을 세미콜론 자동 삽입(automatic semicolon insertion)이라 부른다. 그런데 아래와 같이 줄바꿈이 세미콜론을 의미하지 않는 경우도 있는데, 이때에는 자동 삽입이.. [모던 JavaScript 튜토리얼] 2.1 Hello, world! 모던 JavaScript 튜토리얼을 읽고 정리하였습니다. Hello, world! 이 파트는 실행 환경에 독립적인 코어 자바스크립트(core JavaScript)를 다룬다. 코어 자바스크립트를 다루고 있으나, 학습을 위해서는 스크립트를 실행할 수 있는 환경이 필요하다. 이 튜토리얼은 실행환경으로 브라우저를 사용할 것이다. 웹 페이지에 스크립트를 삽입하는 방법에 대해 알아보자. Node.js와 같은 서버 사이드 환경에서 스크립트를 실행하고자 한다면 'node my.js'와 같은 명령어를 사용하면 된다. script 태그 스크립트 후 예전에는 위와 같이 혹은 다음과 같이 url을 속성값을 사용할 수도 있다. 복수의 스크립트를 삽입하고 싶다면 스크립트 태그를 여러개 사용하면 된다. 스크립트가 길어지면 별개의 .. 러닝 자바스크립트 4장 : 제어문 4.1. 제어문의 기초 순서도는 제어문을 시각적으로 나타내는 방법이다. 이 장에서 사용하는 예제는 19세기 당시 유행했던 주사위 게임 크라운 앤 앵커를 하는 과정에 대한 시뮬레이션을 만들 것이다. 게임은 평평한 면 위에 여섯개의 사각형이 있고, 각 사각형에는 크라운, 앵커, 하트, 클럽, 스페이드, 다이아몬드를 나태는 그림이 있다. 게임을 하는 선원은 그 사격형에 마음대로 돈을 걸 수가 있다. 돈을 건 다음에는 6면체 주사위 세개를 굴린다. 주사위가 사각형 번호에 일치하는 숫자에 멈추면, 선원은 거기 건만큼의 돈을 딴다. 다음은 선원이 돈을 거는 방법과 주사위를 굴렸을 때 따는 돈을 정리한 표이다. 거는 돈 주사위 결과 따는 돈 크라운에 5 펜스 크라운, 크라운, 크라운 15 펜스 크라운에 5 펜스 크라.. 러닝 자바스크립트 3장 : 리터럴 변수, 상수, 데이터 타입 3장은 데이터에 관한 장이며, 데이터를 자바 스크립트가 이해할 수 있는 형식으로 바꾸는 법을 배운다. 인간에게 익숙한 형태인 숫자와 텍스트, 날짜 등을 다루기 위해 자바 스크립트에서 제공하는 문법을 데이터 타입이라고 한다. 자바스크립트가 데이터를 보관하는 메커니즘이 되는 변수와 상수, 리터럴에 대해 알아본 후, 데이터 타입을 본격적으로 다루어보자. 3.1 변수와 상수 변수란 간단히 말해 이름이 붙은 값으로, 값은 언제든 바뀔 수 있다. 아래 두 문장은 변수 currentTempC를 선언하는 동시에 초깃값을 할당한다. ES6에서 let이라는 키워드가 새로 생겼고, 이것은 변수 선언에 사용된다. 변수 선언은 각 변수당 한번만 가능하다. currentTempC = 22; let currentTempC = 22.. Do it! HTML5 + CSS3 : 5장 CSS 기초 스타일과 스타일 시트 왜 스타일을 사용할까? 웹문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 배치 방법 등 문서의 겉모습을 결정 짓는 내용들을 가리킨다. 줄간격이나 표의 테두리 모양을 바꾸는 것도 스타일의 예가 된다. HTML뿐만 아니라 스타일도 사용하는 이유는 다음과 같다. 웹문서의 내용과 상관없이 디자인만 바꿀 수가 있다. HTML은 웹문서의 내용을 나열하고, CSS는 웹문성의 디자인을 구성하므로, 웹문서의 내용과 디자인이 구분되어있다. 따라서 내용만 수정해야 하거나, 디자인만 수정해야할 때, 서로의 영역에 영향을 미치지 않고, 원하는 부분만 수정할 수 있다는 편리함이 있다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수가 있다. CSS를 이용하면 HT.. Do it! HTML5 + CSS3 : 3장 이미지와 하이퍼링크 이미지 웹에서 사용하는 이미지 형식 웹 페이지에서 사용할 수 있는 이미지 파일은 파일 크기가 크지 않으면서도 화질이 좋아야하기 때문에 몇가지 파일 형식만 사용할 수 있다. 만약 다른 형식으로 된 이미지 파일에서 사용하려면 다음과 같은 파일 형식으로 변환해야 한다. 파일 형식 설명 GIF(Graphic Interchange Form) 표시할 수 있는 색상 수가 256가지 뿐이나, 다른 이미지 파일 형식에 비해 파일 크기가 작아 작은 이미지로 사용되며, 투명한 배경이나 움직이는 이미지를 만들 수 있다는 장점이 있다. JPG/JPEG(Joint Photographic Experts Group) 사진을 위해 개발된 형식으로 GIF보다 다양한 색상과 명암을 표현할 수 있다. 저장을 반복하다보면 화질이 떨어질 수 .. 러닝 자바스크립트 2장 : 자바스크립트 개발 도구 실무에서 반드시 사용하게 될 자바 스크립트 도구는 다음과 같다. Git Node : 브라우저 밖에서 자바스크립트를 실행할 수 있게 하는 도구이다. 노드와 함께 설치되는 npm은 이 리스트의 다른 도구를 설치할 때 필요하다. Gulp : 반복적인 개발 작업을 자동화하는 빌드 도구이다. Grunt도 널리 쓰인다. Babel : ES6 코드를 ES5로 변환하는 트랜스컴파일러이다. ES린트 : 자주하는 실수를 피하고, 더 나은 프로그래머가 되도록 돕는 린트 프로그램이다. 2.2.4 깃과 버전 컨트롤 먼저 프로젝트 루트에서 저장소를 초기화한다. 아래의 명령은 저장소를 만드는 명령이다. 이제 프로젝트 루트에 숨김 디렉토리 .git이 생긴다. 버전 컨트롤을 사용하다 보면 빌드 과정에서 생기는 파일, 임시 파일과 같이.. 러닝 자바스크립트 1장 : 첫번째 애플리케이션 1.1 시작은 브라우저에서 이 책은 전통적이고, 현실적이기도 한 이유로 브라우저 기반 프로그램부터 만들어 볼 것이다. 또한 브라우저 기반 프로그램부터 만드는 이유는 또 하나가 있는데, 그래픽 라이브러리를 사용하기 편리하다는 점 때문이다. 프로그래밍 개념과 시각적 요소를 결합하여 훨씬 이해하기 쉽도록 하기 위해서이다. 이 예제를 선택한 배경에는 이벤트 주도 프로그래밍 같은 중요한 개념으로 자연스럽게 연결된다는 이유도 있다. 1.2 사용할 프로그램 프로그램을 만들기 위해 필요한 것은 브라우저와 텍스트 에디터 뿐이다. 필자는 프로그래밍에 사용하는 브라우저로 파이어폭스를 선택했고, 앞으로 이 책에서 브라우저를 설명할 때에는 파이어폭스를 기준으로 할 것이다. 코드를 작성하려면 텍스트 에디터가 필요하다. 텍스트 에.. 이전 1 2 다음
