모-코드

1. App.vue 의 존재이유 What (정의) : 구조와 레이아웃을 정의하고, 다른 컴포넌트를 렌더링 하기 위해서 Why (존재이유) : 루트컴포넌트로 사용 됨, 전체 어플의 구조와 레이아웃을 정의함 그리고 다른 컴포넌트들을 포함하여 렌더링 함 How (방법) : App.vue안에 를 써서 URL에 따라 컴포넌트를 동적으로 렌더링 하게끔한다. 2. 라우팅이란 What (정의) : 웹 어플에서 URL 에 따라서 전환을 관리하는 기능이다. Why (존재이유) : SPA 에서 초기 한페이지 로드 후, 서버에서 페이지 가져오지않고, 동적으로 컨텐츠 갱신한다. How (방법) : view Router를 이용한다. 3. Vue Router 와 router-view 는 무슨차이 - 공통점 Vuw.js 에서 라우팅..

1. 콘텐츠 목록 스타일 (49) 이제 남은걸 해보자 (1) 메뉴 목록 스타일 1) 목록이 눈에 보이는 보이는 전부가 아니다. nav 태그와 ul태그를 구분해서 보자 이런형태로 태그가 갖추어져있는지 확인하자 이미지를 클릭해서 이동하는게 아니라, 링크를 클릭해서 이동하게 해야한다 이 구조를 반영하는 모양을 만들자 인기메뉴 딸기청 아메리카노 버터쿠키 여기다가 ul로서 아래에있는거를 중첩되는 모양이 구조로 달라진경우에 염두해두면 top-menu-list 로 이름을 부여하고 아니라면 필요가 없다 3) d-none 는 무엇일까? 스타일링을 할때 그런것이 있다. style.css 는 표준안을 마련한것이 마음에 들지않을 경우 하는것이다 이건 reset으로 하자 실제로 스타일하다보면 방의 제목들이 나타나는게 많을까 가..

I. 꾸미기 : TEXT(4-3) [38 ~ 42] 이제까지는 방을 만들었고 방에대한 크기, 몰딩, 벽지바르기 했다 1. 폰트 스타일링 (38) 이거를 만들 때 폰트속성을 검토해본다. 따지고 보면 배우기 녹록치 않다 (1) 폰트속성 - Font 패밀리 속성 color 은 font-color 이 아니다. font-weigt 는 문제가 된다. bold 해도 안되는 경우가 있다. family 가 와닫지 않는다. (2) font-family 설치된 폰트를 확인히라 가면 폰트 가문(family) 에서 굵게 등을 설정이 가능하다. 단독으로 있는거는 가문이라고 할만한게 없다. value로 다양한 설정(두께)이 가능하다 숫자는 1 ~ 1000까지 가질수있다. 일반적인 기본적인 두께로 가능하다 1) Font 적용하기 :..

I. 꾸미기 : 스타일(4-1) [13~26] 1. CSS 구조화 (13) 태그 안에 스타일 들어가는 것을 인라인 스타일 스타일 줄수있는 영역을 stylesheet라고 한다 내부면 internal stylesheet / 외부면 external stylesheet 외부로 하는 이유는 공통스타일 이거나 협업 또는 개별(HTML 과 CSS분리위한)유지 보수를 위한 모델 -> 집중하자 h1,h2{ color: red; } h1.cafe{ color: green; } h1[lang="ko"]{ color: brown; } 2. CSS를 링크하는 방법 2가지 (14) 추가로 다른것도 만들어 주자 이 경우 순서는 지켜주어야한다 cascading이기 때문에 공통되는것이 먼저 위에 와야한다. 이렇게 두가지 방법이 있다 ..

I. 문서 스타일 변경하기 (01) 학습목표 HTML이 가지고 있는 기본 스타일은 우리가 원하는 모습이 아닐 수 있다. CSS를 이용하면 그 스타일을 우리가 원하는 모양으로 변경할 수 있다. 그 방법에 대해서 알아보자. CSS란 무엇인가. CSS로 스타일 변경하는 방법 1. CSS 학습안내 (1) 2. Cascadind이란(2) 3. 스타일 입히기(3) 4. 우리가 다루게 될 스타일 속성들(4) 5. 선택자 Selectors(5) 6. 공통 스타일 집중화(6) II. 선택자 (02) 1. 기본 선택자 (7) CSS에서는 선택자로 클래스명을 쓰자 2. id와 class의 차이점(8) ID는 HTML에서... / class 는 CSS 에서 3. 속성 선택자(9) h1태그가 있는데 그중에 class라는 속성을..

I. 표 태그 (12) 학습목표 격자형 콘텐츠를 표현하는 태그로 오랫동안 많이 사용해 오던 태그이다. 최근에는 사용률이 조금 적어지기는 했지만 반드시 알고 있어야 할 태그이다. 격자형 태그 사용하기 가로/세로 방향으로 셀 병합하기 1. 표(테이블) 태그 (46) 이전에 우리는 컨텐트 감싸는 내용 중 5가지를 잡아라 제목,문장,목록,표,폼 이냐 이다. 우리는 폼까지 이야기했는데 표는 아직 설명안했다. 가장많이 사용하는것이다 테이블은 격자형이다. 1) 테이블은 격자형의 컨텐트를 가지는 컬럼이 여러개인 목록을 만들 때 이다. (emmet snippets) table>tr*3>td*4 table 태그안에 tr태그 3개, td태그 4개를 하는 방법이다 2) 그런데 안보인다. CSS로 해야하는데 나중에 해보자 일단..

I. 선택상자 (10) 학습목표 사용자의 입력에서 radio 버튼과 checkbox 버튼의 차이점과 각 버튼들의 사용방법에 대해서 알아보자. Radio 버튼을 배타적으로 선택할 수 있도록 만들기 Checkbox 버튼을 통해서 다중 선택된 값을 입력 받기 1. Radio 버튼의 입력 값 다루기(38) 전달되는 데이터 취미 중에서 하나가 전달되어야하는데 그냥 선택되었다 on여부만 전달된다 무엇을 선택했는지를 알아야함 그래서 name에다가 value를 넣어준다. 그러면 주소에다가 그 value가 간다 독서 등산 으로 간다 가장 좋아하는 취미 독서 걷기 등산 그러나 실제로 전달은 식별자로 간다 가장 좋아하는 취미 독서 걷기 등산 2. 다중 선택을 위한 태그와 값의 전달방식(39) (1) 다중선택 이번에는 가장이..

I. 작성취지 목적 : 이번에 만든 게임프로젝트에서 이벤트리스너 및 핸들러 방식으로 만들지 않은 것이 무엇인지 찾고, 리팩토링 해보기 II. 비동기적 자바스크립트 1. 비동기적 프로그래밍 What (정의) : 기존의 작업이 끝나지않고 실행되는 동안에도, 다른 이벤트에 응답할 수있게 하는 기술 Why (존재이유) : 동기적 프로그래밍에서는 작업량이 큰 작업(장기실행 동기함수)이 있는 경우 다른 작업을 하기위해서는 이전 작업이 끝나고 난 뒤에 가능하다. How (방법) : 이벤트리스너와 이벤트 핸들러를 이용한다. 그리고 콜백함수 e.g. (예) : 2. 이벤트 처리기 (이벤트핸들러 / 함수) What (정의) : 이벤트가 발생한 경우 이벤트리스너가 호출하는 함수를 의미한다. 즉 비동기호출함수이다. Why (..

I. 들어가며 : java의 함수와 다른 JavaScript 특유의 함수관련 개념 및 용어정리 위한 것이다. I. 함수표현식 1. 익명함수 함수는 일급객체여서 일반변수처럼 변수명을 할당 할 수있다. 이 경우 함수가 복사된것이 아니라 함수의 참조값을 변수에 대입하게 되는 것이다. 결국 함수 호출은 변수명으로 해야한다. var foo = function(a,b){ }; var bar = foo; 참고로 함수명과 변수를 가진 익명함수는 유사한것으로 볼수있다 결국 함수명으로 호출한다는 것은 변수명으로 호출한 것처럼 볼 수있기 때문이다. II. 함수 호이스팅 변수 호이스팅은 변수를 선언 후 대입하기 이전에 변수출력을 하면 undefined 가 나온다 이유는 DIA 단계에서 A이전 이기 때문이다. (변수 호이스팅은..

I. 인라인 태그 학습하기 (8) 1. u,i,b 태그 (30) (1) u태그 말 그대로 underLine 으로 하는 것이다. 이렇게 스타일을 꾸며주는 태그가 없어질거같지만 안없어지고있음, 왜냐하면 경고로 있음 CSS로 충분히 스타일을 줄수가 있다. 사실 태그로 스타일주는것이 바람직하지는 않다. (2) i 태그 이탤릭체인데, 이것도 CSS로 줄수도있다. 나중에 다른태그와 비교할때 화면에 보여주기위한 스타일로 하지말고, 의미로 표현하기 위해서 쓰는것을 권하는 편이다 최초 CSS없던 시절의 취지와 달라졌다 (3) u태그 언더라인이다. 이것도 마찬가지이다. (4) b태그 얘는 bold이다. 그런데 html의 의미를 html5에서는 다르다 즉 CSS에 있는것을 두고 이후 얘는 의미로서 보자라고한다. (5) br..