quantumcode

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..

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 속성..