qbj700

- manifest - manifest는 PWA에 대해 브라우저에게 알려주는 JSON 형식으로 된 파일이다. - 데스크톱 또는 모바일 장치에서 설치할 때 어떻게 작동해야하는지 알려준다. - 일반적으로 앱 이름, 앱에서 사용하는 아이콘, 앱이 시작될때 열어야하는 URL등이 포함된다. - manifest 파일만들기 - 파일 이름을 지정 가능하지만 일반적으로 manifest.json 으로 지정한다. - ROOT 폴더(웹 사이트의 최상위 dir)에서 제공된다. - 항목으로는 short_name, name, icons, start_url, background_color, dispaly 등이있다. - 페이지에 웹 앱 매니페스트 추가 - 태그 추가 - manifest를 만든 후 PWA 모든 페이지에 태그를 추가한다...

- VUE 문법 - 요즘은 JS에서 Var 가 아닌 let 으로 사용 - {{content}} src 속성에 바인드 - v-bind:style ="" => style 바인딩은 json 형태로 기입 - :style 로 축약하여 사용가능 - 혹은 :style ="{'color:red'}" 이런식으로 디렉티브에 직접 정용가능 - :class = "{active: mode}" => class 적용 여부를 mode: true / mode: false 를 통해 조절 - @click = "" > 이벤트 핸들러 - v-show = "" > visibility 를 true / false 로 표현 가능 - v-for = "item in item" - 리스트 랜더링 - v-for 의 경우 item in item 이라는 특수..

먼저 Vue를 사용하기 위하여 Script를 추가해 준다. 그리고 Vue로 바인딩 되는 data 는 {{}} 를 사용해 추가해준다. {{content}} console.clear(); 를 통해 콘솔창을 비워준후 new Vue를 통해 Vue를 사용하겠음을 선언 el: '#app' => app이라는 id를 가진 el(element)를 선택 content 를 data에 입력해둔다. console.clear(); let app = new Vue({ el: '#app', data:{ content: '바이' } }); app.content = "안녕"; 그후 app.content = 를 통해서 값이 잘 변경되어서 반영되는지 확인한다. See the Pen Vue 실습 (예제 - 1) - 바인딩 by qbj700 ..

- JS 와 jQuery - mouseenter - 마우스 올려놨을때 - mouseleave - 올려진 마우스가 떠낫을때 - addClass - 클래스 추가 - removeClass - 클래스 제거 - click - 클릭했을시 실행

> (부등호 꺽쇠) 왼쪽으로 열린 부등호. 수식에서 A > B 와 같은 형태로 사용. HTML 코드에서 모든 태그의 끝 기호. ' ' (공백, Space 한칸) 공백 문자 한칸을 의미. 연속하여 쓰면 여러 공백 문자를 삽입할 수 있음. & & (앰퍼샌드) 앰퍼샌드(Ampersand) 라 불리며 & 문자를 뜻함. AND 라는 의미를 포함하여 javascript나 java 등에서 AND 연산 기호로 사용되기도 함. & 문자를 화면에 출력하고 싶으면 & 를 사용. " " (큰따옴표 하나) 쌍따옴표는 HTML에서 특정 속성 값들을 묶기 위한 용도로 사용되기 때문에 쌍따옴표를 ..

- outline - border의 경우 주위 레이아웃에 영향을 끼치지만, - outline의 경우 레이아웃의 영향을 받지 않는다. - min-width 에다가 pading:0 20px; 정도 주면 줄어들어도 딱붙지 않는다.

See the Pen HTML/CSS/JS 실습 (예제 - 36) - 템플릿 작업(메뉴바 구현) by qbj700 (@qbj700) on CodePen.

See the Pen HTML/CSS/JS 실습 (예제 - 35) - 템플릿 작업(로고바 구현) by qbj700 (@qbj700) on CodePen.

See the Pen HTML/CSS/JS 실습 (예제 - 34) - side-bar 구현 by qbj700 (@qbj700) on CodePen.

See the Pen HTML/CSS/JS 실습 (예제 - 33) - header 도입 / 3차 메뉴 구현 by qbj700 (@qbj700) on CodePen.