quantumcode

border border-width​ : border의 width 값을 지정 border-style​ : border의 style 값을 지정 border-color​ : border의 color 값을 지정 inherit​ : 부모 요소로부터 값을 상속 받는다. border-top, border-right, border-bottom, border-left border-width​ : border의 width 값을 지정 border-style​ : border의 style 값을 지정 border-color​ : border의 color 값을 지정 inherit​ : 부모 요소로부터 값을 상속 받는다. border-top, border-right, border-bottom, border-left css 컬러 ..

css background 속성에 대하여 알아보자. html 문서에 이미지를 삽입하는 방법은 대표적으로 img tag를 사용하는 것과 style의 background 속성을 사용하는 방법이 있다. css3 style 속성 적용 방법은 개별 속성으로 적요하는 방법과 믹스형 속성 적용 방식있다. background의 속성은 background-color, background-image, background-repeat, background-attachment, background-clip, background-size, background-position 등이 있다. 개별 속성적용은 속성명을 그대로 기재하고 값을 입력하면 된다. background-size : 100% 믹스형 또는 다중속성 적용은 아래와 같..

문자열 속성 선택자 문자열 속성 선택자는 태그가 가지고 있는 속성의 특정한 문자열을 확인합니다. 1. 선택자 [ 속성 ~= 값] : 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택합니다. div[class ~= box] { color: red; } 2. 선택자 [속성|=값] : 속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택합니다. ※ '-' 으로 단어 구분 : 클래스 box-1 일때 다중클래스라면 첫번째 클래스 단어의 '-' 앞 단어로 선택 box1 div[class|=box] { color: red; } 3. 선택자 [속성^=값] : 속성 안의 값이 특정 값으로 시작하는 단어로 포함하는 문서 객체를 선택합니다. div[class^=box] { color: red; } 4. 선..

/*import firebase from "firebase";*/ import firebase from "firebase/app"; import "firebase/firestore"; Vue.config.productionTip = false // Import the functions you need from the SDKs you need // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration const firebaseConfig = { apiKey: "AIza..

단일 인스턴스에서는 객체형 data 를 사용하지만 콤포넌트 단위에서 사용 시 인스턴스를 공유하여 data의 침범이 일어날 수 있기 때문에 콤포넌트 단위에서는 함수형으로 사용한다. //ES5 문법 data () { return { 데이터를 넣어주세요 } } //ES6 문법 data:() => ({ 데이터를 넣어주세요 })

vue CLI 이제 Vue CLI를 설치해 보자. 기본적으로 Vue CLI를 설치하기 위해서는 8.9 버전 이상의 Node.js가 필요하다. Node.js를 설치하였다면 Vue-CLI를 설치하자. vue cli 3.0 install npm i -g @vue/cli ( npm install -g @vue/cli ) vue version check vue --version vue update npm update -g @vue/cli Vue CLI를 설치 후 버전을 확인해 보면 3.x이 설치된 것을 확인할 수 있다. 그리고 하나 더 설치하자. vue cli 2 template npm i -g @vue/cli-init @vue/cli-init은 2.x Template을 가져오기 위한 vue init기능을 제공한..

Inline :왼쪽부터 하나씩 정렬속성 - ​​width, height 속성을 사용 할 수 없다. 주의 - ​왼쪽 정렬 시 초기 margin-left, margin-right 5px만큼 생성된다.삭제 방법 :1. 부모요소에 font-size: 0; 속성을 적용한다.2. 해당 요소에 float: left; 속성을 적용한다. 단, float 속성 적용 시 부모 요소에서 자식 요소의 높이 값을 가져올 수 없기 때문에 요소 다음에 오는 요소에 clear: both;를 적용하여 부모 요소가 높이값을 가져갈 수 있게 한다.3. margin-left: -5px; 을 적용한다.block : 한줄씩 정렬블럭처럼 한줄씩 쌓여서 정렬됨.속성 - ​​width, height, margin-top,margin-bottom 속성..

static​( 정적위치 )​ : position을 지정하지 않으면 position의 default 값은 static 입니다. 배치형태 - ​​왼쪽에서 오른쪽으로 위에서 아래로 배치됩니다. relative​( 상대적 위치 )​ : 부모 요소 기준으로 위치를 조정 할 수 있다. 초기 위치 값의 영역이 다른요소에 영향을 준다. 배치형태 - ​top, bottom, left, right 속성을 사용하여 px,%,rem,em... 등 의 단위로 배치 할 수 있다. ( 음수 사용가능) absolute​( 절대적 위치 )​ : position이 static이 아닌 부모를 기준으로 위치를 조정 할 수 있다. 초기 위치 값의 영역이 다른요소에 영향을 주지 않는다. 배치형태 - ​top, bottom, left, rig..

CSS units CSS는 단위(길이)를 표현하기 위한 여러가지 단위가 있다. width, margin, padding, font-size, border-width 등과 같은 많은 CSS 속성에서 사용한다. 단위는 10px, 2em과 같이 숫자 뒤에 공백없이 붙여서 사용하며 0인 경우는 생략할 수 있다. 단위는 음의 수를 가질 수 있으며 상대/절대 단위로 구분할 수 있다. * w3schools의 ​CSS Units​에는 다음과 같이 CSS에서 사용하는 단위에 대해 안내되어 있다. Browser Support Oper a em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5 ch 27.0 9.0 1.0 7.0 20.0 rem 4.0 9.0 3.6 4.1 11.6 ..

css기술 중요 규칙? 1. 스타일 기술은 ‘ { ’ 시작하여 ‘ } ’ 끝난다. 2. 다중속성 적용시 ‘ ; ’ 구분한다. 연속되는 속성이 더 이상 없을 경우 마지막 속성은 ‘;’를 삭제해도 된다. ex) td{ width​:​ 10px​;​ } 3.마크업 태그와 속성을 일치시켜 스타일 적용 ex) ​td​{ width: 10px; } 4.class 와 id들은 대소문자를 구분하며 문자로 시작해야 하며 영숫자와 언더바(_),하이픈(-)을 포함 할 수 있다. ex) ​.select{}(o) .select_1{}(o) .select-1{}(o) .selectBar(o) .1select{}(x) 4. 부모 자식 관계는 공백으로 구분하여 표기 한다. ex) css style sheet 표기 : .wrap .i..