quantumcode

@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; } 작업 파일로 사용할 경우 들여쓰기를 추천하며, 일반적으로 프로젝트를 진행할 경우 공동 작업으로 파일을 공유하여 사용하기 때문에 코드를 명확히 알 수 있는 들여쓰기가 작업이 용이해 보입니다...

웹개발 시 다양한 플러그인과 웹 프레임 워크를 사용할 경우가 많습니다. npm 과 같이 package management를 사용하는 경우도 있지만 특정 서버에 올려진 파일주소를 직접 링크를 통하여 적용시키는 CDN 방식으로 사용하는 경우도 있습니다. 오늘은 후자의 경우에 대하여 알아보겠습니다. 일반적으로 아래 예시와 같이 플러그인 혹은 프레임 워크를 제공해주는 사이트에서 CDN 주소를 제공합니다. ex ) jquery vue.js 프로젝트를 동시에 진행하거나 다양한 프레임워크와 플러그인이 필요한 경우 하나씩 들어가서 경로를 확인한다는 것은 번거로운 일이 겠죠. 아래 주소는 이런 프레임워크 및 플러그인과 같은 개발에 필요한 다양한 CDN 주소를 검색할 수 있는 사이트 입니다. https://cdnjs.co..

웹브라우저에서 user agent style 과 같은 기본 스타일이 적용되어 있습니다. 해당 스타일은 웹 제작 시 도움이 되는 경우도 있지만 잘 사용하지 않는 스타일도 있기 때문에 초기화가 필요한 경우가 있습니다. 직접 초기화 코드를 만들어서 사용하는 경우도 있지만 이미 만들어진 초기화 코드를 사용하는 경우도 있습니다. 오늘은 후자의 경우에 대해서 알아보겠습니다. normalize.css 1. 직접 다운로드 방식 적용 : https://necolas.github.io/normalize.css 해당 링크에 접속해서 파일 다운로드 css3 css 초기화 CDN 방식으로 적용 Google normalize 1. 직접 다운로드 방식 적용 : https://github.com/jonathantneal/normal..