quantumcode

다중 class 사용 사용 방법 : 태그의 class attribute에 다중 클래스 입력 시 공백으로 표기하여 입력 표기 )​ box 다중클래스 선택방법​ ​: css에서 다중클래스 사용 시 “ . “으로 연결하여 사용한다. 표기 )​ box ​주의 : ​#boxgroup .box{} 자식요선택 요소(element)선택 방법: 1. tag ​: 태그명을 사용하여 선택할 수 있다. 표기 ) css div{ /*속성기재*/ } ​html test 2. ID ​: id명을 사용하여 선택할 수 있다.​( “#“으로 표기 ) 표기 )​ css #box{ /*속성기재*/ } html test 3. class ​: class명을 사용하여 선택할 수 있다.​(“ .” 으로 표기 ) 표기 )​ css .box{ /*속..

javascript? 자바스크립트​(​영어​: ​JavaScript)는 ​객체 기반​의 ​스크립트 프로그래밍 언어​이다. 이 언어는 ​웹 브라우저​ 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 프로토타입 기반 프로그래밍​은 ​객체지향 프로그래밍​의 한 형태의 갈래로 클래스​가 없고, ​클래스 기반​ 언어에서 ​상속​을 사용하는 것과는 다르게, ​객체​를 원형(​프로토타입​)으로 하여 ​복제​의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다. 프로토타입기반 프로그래밍은 ​클래스리스​(​class-less​), 프로토타입 지향​(prototype-oriented) 혹은 ​인스턴스 기반​(instance-based) 프로그래밍이라고도 한다. ECMA..

@media 규칙 @media 규칙은 다양한 장치에서 html 문서가 적절한 형태를 갖추게 만들어 주는 규칙입니다. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp all print screen speech 등과 같은 출력장치에 대응할 수 있습니다. 화면 가로형 @media screen and (orientation: landscape ) { /*source code*/ } 화면 세로형 @media screen and (orientation: portrait ) { /*source code*/ } html 문서에 적용 방식 link 방식 - ex) @import- ex) @import url(“print.css”) print; ex)

vue.js 프레임워크를 사용시 SPA(single page application) 특성상 router를 사용하여 페이지 이동하게된다. 첫번째 방식 선언적 방식으로 태그형태로 기재하고 속성값에 해당 주소 및 router 이름을 입력하여 사용할 수 있다. 선언적 방식 두번째 방식 프로그래밍 방식으로 script 작성 시 각 라이프 사이클에서 특정 코드가 완료 된 후 페이지 이동이 필요하거나 params 와 같은 속성을 전달 받고 다시 특정 기능을 수행 후 다시 화면 전환이 필요 할 경우 사용할 수 있다. 이 밖에 다양한 경우가 있겠지만 추후 예시를 통해서 알 아보자. 프로그래밍 방식 $router.push router.push(location, onComplete?, onAbort?) 참고: Vue 인스턴..

created 해당 라이프 사이클에서 처리내용 : 테이터처리: data, 계산된속성: computed, 메서드: methods, 감시/이벤트watch 주의 : 마운트되지 않은 상태이기때문에 $el 을 지원하지 않는다. virtual dom 사용 할 수 없다. mounted 해당 라이프 사이클에서 처리내용 : $el이 vm.$el로 대체 인스턴스가 마운트 된 이후 호출 virtual dom, 컴포넌트, 템플릿, dom 접근가능

firebase config 파일을 별도 생성하여 적용 1. firebaseconfig.js 파일 생성 import firebase from 'firebase/app' import 'firebase/firestore' const firebaseConfig = { ... } const firebaseApp = firebase.initializeApp( firebaseConfig ) export default firebaseApp.firestore() 2. 사용을 원하는 component에 import import db from 'firebaseconfig.js'

아래와 같이 코드를 입력하면 v-for 추가하면 v-bind:key 입력 오류가 나타난다. {{i}}{{menu.name}} 아래 내용을 보면 문자열 이나 숫자 타입으로 추가하라는 경고가 나온다. 해결방벙 : 1. key 값에 for의 인덱스 값 입력 {{i}}{{menu.name}} 2. 메뉴별 이름을 특정하고 싶다면 key 값에 for의 인덱스 값 과 메뉴명의 조합으로 입력 {{i}}{{menu.name}}

시멘틱 태그 ( samactic tag )는 태그 자체의 이름으로도 특정기능을 설명할 수 있는 태그로 코드를 입려하는 작성자가 직관적으로 태그의 기능을 알 수 있는 장점도 있지만 브라우저 엔진 및 검색엔진이 해당 태그를 인지하여 브라우저의 기능을 향상 시키는 역할도 한다. 대표적인 시멘틱 태그 종류 header - ​헤더를 의미 nav - ​내비게이션을 의미 aside - ​사이드에 위치하는 공간을 의미 section - ​여러 중심 내용을 감싸는 공간을 의미 article - ​글자가 많이 들어가는 부분을 의미 footer - ​푸터를 의미 아래 링크에서 더 많은 시멘틱 태그를 확인 하실 수 있습니다. https://www.w3schools.com/tags/default.asp HTML Referenc..

select box를 사용하다 보면 아래 와 같이 해당 설렉터의 카테고리를 지정하고 해당옵션을 선택할때는 카테고리 명을 사라지게 하는 기능을 사용해야하는 경우가 있습니다. 즉, input 의 text type에서 placeholder 처럼 입력 전 표시하고 포커스가 되면 해당 입력값은 사라지는 것 처럼 말이죠. tag에 직접 아래와 같이 작성 할 수 있습니다. selected : 초기 선택 hidden : 안보이게 disabled : 비활성화 family naver daum kakao

css 파일 구성방식은 아래와 같이 한줄형 또는 들여쓰기를 사용하여 속성마다 한줄씩 표기하는 방식등이 있습니다. 한줄형 : 공백이 적기 때문에 파일 용량이 들여쓰기 보다 비교적 작지만 가독성이 떨어진다. div { background: red; color: white; font-size: 16px; } 들여쓰기 속성 마다 명확한 값을 확인 할 수 있기때문에 가독성은 좋지만 빈공백이 많아서 파일 용량이 한줄형 보다 크다. div { background: red; color: white; font-size: 16px; } 작업 파일로 사용할 경우 들여쓰기를 추천하며, 일반적으로 프로젝트를 진행할 경우 공동 작업으로 파일을 공유하여 사용하기 때문에 코드를 명확히 알 수 있는 들여쓰기가 작업이 용이해 보입니다...