quantumcode

사용방법 : display : flex​ ​- 박스를 블록 수준의 플레서블 박스로 작동하게 합니다. 표기 )​ display: flex; flex 속성 : flex-direction row ​: 박스를 왼쪽에서 오른쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고 , 교차축은 세로가 됩니다. 표기 )​ flex-direction : row; row-reverse ​: 박스를 가로로 배치하되 역방향으로 배치합니다. 즉, 오른쪽에서 왼쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고,교차축은 세로가 됩니다. 표기 )​ flex-direction : row-reverse; column ​: 박스를 위에서 아래로 배치합니다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가..

beforeRouteEnter 는 이전 router에서 정보를 가져와 현재 router와 유기적인 코드를 작성할때 사용하고 반면 beforeRouteLeave는 이전 router로 돌아갈때 사용합니다. 여기서 주의 사항은 beforeRouteEnter콜백 전달을 지원하는 유일한 가드 입니다 next. For beforeRouteUpdate및 beforeRouteLeave는 this이미 사용 가능하므로 콜백을 전달할 필요가 없으므로 지원되지 않습니다 . 사용 예 ) 일반적으로 사용자가 저장하지 않은 편집으로 경로를 실수로 떠나는 것을 방지하는 데 사용됩니다 . next(false) 을(를) 호출하여 탐색을 취소할 수 있습니다. beforeRouteLeave (to, from, next) { const an..

1. component 랜더링 완료 후 라우터 이동 시 params 값을 체크하여 데이터를 가져오는 방식으로 아래와 같이 watch를 사용하여 component가 랜더링 완료 후 가져오는 방식이 있습니다. 데이터 로드가 느리거나 로딩 이미지가 필요할 때 사용 created() { // 컴포넌트 생성시 데이터를 패치한다 this.fetchData() }, watch: { '$route': 'fetchData' }, methods: { fetchData () { this.loading = true db.collection('user').where('ep_id', '==', this.$route.params.employee_id).get() .then(querySnapshop => { querySnapshop..

pointer-events : 해당 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는 지정합니다. 키워드 값 중 auto, none을 제외한다면 대부분 SVG에 적용되는 속성입니다. /* 키워드 값 */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only */ pointer-events: painted; /* SVG only */ pointer-eve..

html 속성 중 dir이라는 속성이있다. direction을 의미하며 속성 값은 dir="ltr" 또는 dir="rtl"입니다. ltr 은 left to right 이고 rtl 은 right to left입니다. 즉, 요소의 정렬이 왼쪽에서 오른쪽으로 정렬하거나 오른쪽에서 왼쪽으로 정렬할때 사용된다. 왼브라우저는 기본 왼쪽 상단에서 오르쪽으로 정렬이 되며 기본 default left to right 입니다. html : ltr 적용시 : rtl 적용시 :

viewport ( 뷰포트 ) 뷰포트 meta 태그 ( meta tag : 브라우저의 화면 설정과 관련된 정보를 제공합니다. ) 모바일 웹페이지의 특정한 정보를 제공합니다. 예 ) width : 화면의 너비 예시 - ​​width = 240 , width = device-width height : 화면 높이 예시 - ​​height = 240 , width = device-height initial-scale : 초기 확대 비율 예시 - ​​initial-scale = 2.0 user-scalable : 확대 및 축소의 가능 여부 예시 - ​​user-scalable = no minimum-scale : 최소 축소 비율 예시 - ​​minimum-scale = 1.0 maximum-scale : 최소 축..

html 특수문자표 출력 html 문서에 마크업 작업 시 띄어쓰기를 사용할 때 스페이스바를 사용하는 경우가 있는데 아래 와 같이 한번 띄어쓰기의 경우 정상 작동하지만 두번 이상 띄어쓰기를 할 경우 나머지 공백은 삭제 됩니다. html 띄어쓰기 확인하기 출력 : html 띄어쓰기 확인하기 html 띄어쓰기 확인하기 출력 : html 띄어쓰기 확인하기 두번 이상 띄어쓰기를 할 경우 html 특수문자 사용해야합니다. html 띄어쓰기 확인하기 출력 : html 띄어쓰기 확인하기 이 외에 다양한 html 특수문자에 대하여 알아 봅시다. &(ampersand) & !(exclamation) ! #(number sign) # ⓒ(copyright sign) © 아래 주소에서 특수 문자 테스트를 테스..

브라우저 공급업체는 실험적이거나 비표준적인 CSS 속성 및 JavaScript API에 접두사를 추가하여 사용할 수 있습니다. 이를 벤더프리픽스( 접두어 )라고 하며 브라우저 공급업체에서 접두어가 필요없는 속성을 제공하기전까지는 접두어를 사용하여 속성을 정의할 수 있습니다. 최근에는 대부분의 브라우저 공급업체가 많이 향상되어서 기존에 접두어로 사용하였다 속성을 접두어 없이 사용할 수 있도록 제공하고 있기때문에 벤더 프리픽스는 기존 노후된 브라우저에 대응하기 위해 사용하는 경우가 많습니다. 아래 브라우저 별 제공하는 접두어 입니다. ● IE ○ Engine: ​Trident ○ CSS- prefix: ​-ms ● edge ○ Engine: ​EdgeHTML​ → ​Blink ​3 ○ CSS- prefix:..

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