Skeleton의 세상

Angular CLI 소개 CLI(Command Line Interface)는 개발자가 Angular 개발에만 집중할 수 있도록 개발에 필요한 Angular 프로젝트의 설정이나 프로젝트의 전반적인 관리를 명령어 기반으로 수행할 수 있게 지원합니다 Angular CLI 설치 $ npm install -g angular-cli -g를 통하여 전역으로 설치를 진행하고나면 ng명령어를 이용하여 Angular CLI에 제공하는 기능을 실행할 수 있습니다 $ ng -help 위의 명령어로 어떤 명령어들을 사용할 수 있는지 볼 수 있습니다 Angular CLI 프로젝트 생성 $ ng new hello-ng2 위의 명령어로 프로젝트를 생성할 수 있습니다 $ cd hello-ng2 $ ng serve serve 명령어를..

Angular 웹 애플리케이션을 구성하는 구성요소는 크게 4가지로 구분됩니다. 컴포넌트(component) Angular2의 구성요소중 가장 핵심이 되는 구성요소입니다. 이 컴포넌트 중심으로 개발이 이루어지며 컴포넌트는 크게 지시자, 템플릿, 클래스로 나뉩니다 import { Component } from '@angular/core'; @Component({ selector: 'my-component', template: '{{msg}}' }) export class MyComponent { msg: string = "hello"; } 위의 코드를 보면서 한번 살펴봅시다 먼저 컴포넌트를 정의할때는 @Component 장식자를 이용해 정의합니다 selector 속성에는 컴포넌트의 지시자가 있고 templa..

탕윤 레시피 입니다

Angular2는 AngularJS의 확장판이 아닌 새로운 프레임 워크입니다. 즉 개발환경, 개발방식 모두 Angular와는 완전히 달라졌습니다... (새로공부하는 거라니..) 기존에 Angular를 쓰시던 분들은 이런 내용들으면 정말 멘붕 당했을거 같은데요. 이번에 저도 공부하면서 글을 쓰고 있습니다 물론 저는 Angular2 부터 공부하고 있지만요 글의 주제와 맞게 이번에 Angular2의 특징에 대하여 알아보려 합니다. 3종류 정도의 특징을 적을까 합니다. 1. 컴포넌트 기반 개발 Angular2는 컴포넌트 기반으로 개발하여 생산성을 높이고 대규모 애플리케이션에 걸맞는 구조를 가지고 있습니다. 2. 타입스크립트를 주력 언어로 채택 TypeScript는 마이크로소프트에서 만든 자바스크립트의 상위 집합..

표를 만드는 태그들을 한번 알아봅시다! 테이블 태그 - 기본적인 테이블 See the Pen YzqzvXJ by 정천일 (@skySkeleton) on CodePen. rowspan 은 자신을 포함한 아래의 n칸을 합쳐줍니다 colspan은 자신을 포함한 오른쪽 n칸을 합쳐줍니다 - 표에 제목 See the Pen zYqYaBE by 정천일 (@skySkeleton) on CodePen. - 표 구조 정의 See the Pen gOrOKwN by 정천일 (@skySkeleton) on CodePen. - 여러 열 묶어 스타일 지정 See the Pen YzqzvNd by 정천일 (@skySkeleton) on CodePen.

목록을 만드는 태그 - 순서 없는 목록 순서가 필요하지 않은 목록을 만들때 태그를 사용합니다 태그 안에는 태그를 이용하여 각 항목을 표시합니다 아래의 코드를 보시죠! See the Pen MWyWQpm by 정천일 (@skySkeleton) on CodePen. - 순서 목록 항목을 나열하되 순서가 필요한 목록을 만들때 태그를 이용합니다. 코드를 통해 알아보죠! See the Pen abNbqLG by 정천일 (@skySkeleton) on CodePen. type이라는 형태가 존재합니다 1 : (숫자) 기본값입니다 a : 영문 소문자 A : 영문 대문자 i : 로마 소문자 I(대문자 i) : 로마 대문자 - 설명 목록 태그는 사전 구성처럼 '제목'과 '설명'이 한쌍인 설명 목록을 만듭니다. 아래의 코드..

이번글에서는 텍스트 관련 태그들을 설명하겠습니다 여러가지의 태그가 존재하는데요. 하나씩 알아보도록하죠! 텍스트 블록 전체 처리하는 태그 - 제목 텍스트 제목 텍스트는 일반 텍스트보다 크고 진하게 표시됩니다. 아래의 코드를 살펴보세요! See the Pen GRZRygy by 정천일 (@ttaogvmy) on CodePen. - 단락 텍스트를 표현할때 많이 표현하는 태그가 태그 입니다. 텍스트의 단락을 만드는데 이때 단락은 한줄 한줄을 의미합니다 아래의 코드를 통해 좀더 자세히 알아보실까요 See the Pen XWdWVNm by 정천일 (@skySkeleton) on CodePen. - 줄 바꾸기 단락에서 줄을 바꾸기 위해서 사용됩니다. 아래 코드를 보면서 이해해 봅시다!! See the Pen BaKa..

예제 출처: https://webclub.tistory.com/550?category=501047 스크롤시 백그라운드 이미지 페이드 처리 New York Stories Scroll ▼ In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. "Whenever you feel like criticizing anyone," he told me, "just remember that all the people in this world haven't had the advantages that you've had." He didn't say any more ..

checkbox를 하나씩 클릭하기도 하지만 '모두동의' 와 같은 체크박스 하나만 선택해도 모든 체크박스가 선택되어야 하는 경우도 있습니다. 그럴때 사용하면 좋은 코드를 가져왔습니다. 먼저 예시로 사용할 HTML 코드부터 살펴봅시다. 전체 선택: 체크박스 1번 체크박스 2번 체크박스 3번 체크박스 4번 이러한 HTML코드가 있다고 생각해봅시다! 그럼 위와같은 그림이 나올텐데요! 그 다음은 스크립트를 작성해야겠죠? var $checkAll = $('#checkAll'); $checkAll.change(function () { var $this = $(this); var checked = $this.prop('checked'); // checked 문자열 참조(true, false) // console.log..

이걸 어찌 숨길까요? 이건 계속 나타나있답니다 이러한 HTML이 있다면 JQuery에서 hideDiv를 숨기려면 어떻게 해야할까요? 그 숨긴걸 다시 나타내려면 어떻게 해야할까요? 그 해결책을 아래에서 제시하겠습니다. 메서드를 한번 알아볼까요? HTML요소 숨기기, 나타내기 show 선택한 요소를 나타냅니다. 이는 CSS의 display: block과 같은 역할을 합니다 $(".hideDiv").show(); hide 선택한 요소를 숨깁니다. 이는 CSS의 display: none 과 같은 역할을 합니다 $(".hideDiv").hide(); toggle 선택한 요소가 display: none이라면 block으로 바꾸고 display: block이라면 none으로 만듭니다. $(".hideDiv").tog..