분류 전체보기(130)
-
jQuery: 장점, 사용법, 선택자(직접 선택자, 인접선택자, 탐색선택자, 속성선택자, form필터 선택자)
jQuery 자바스크립트의 라이브러리 중 하나 라이브러리 : 함수를 여러개 모아둬서 필요 시 불러서 사용할 수 있도록 장점 - 적은 코드로 많은 작업 실행 가능 - 크로스 브라우징 가능 - 자유로운 css 구현 사용법 1. 다운로드 - compressed : 디자이너 버젼, 연결만 하면 사용 가능 - uncompressed : 개발자 버젼, 소스 수정 용이 2.CDN(CDN Content Delibery Network) : 콘텐츠를 효율적으로 사용하기 위해 : 로딩속도 향상 - 구글 https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js - 네이버 - 마이크로 소트프사 https://docs.microsoft.com/en-us/aspnet/aj..
2021.01.11 -
javascript: 정규표현식
정규표현식 Regular Expression Regex, Regexp 등으로 불림. 문자열을 검색하고 대체하는 형식 패턴. 역할 search replace extract 생성하기 1. 리터럴 방식 var 패턴이름 = /표현식/플래그/; 2. 객체 생성 방식 var 패턴이름 = new RegExp("표현식","플래그"); Method 주로 exec와 test를 많이 사용. exec 문자열 찾기, 정보를 가진 배열 반환 test 문자열 검사, true or false 반환 //1. 리터럴 방식 var pattern1=/a/; //2. 객체 생성 방식 var pattern2=new RegExp("a"); var pattern3=/k/i; //i: 플래그, 대소문자 구분 없음 //3. 문자열 변수 var str..
2021.01.11 -
SCSS: if 조건문, 반복문
조건문 if 함수 삼항연산자와 유사 if(조건, 참표현식1, 거짓표현식2) // @if @if (조건) { /* 조건이 참일 때 구문 : 조건의 ()는 생략가능하다. */ } // @if @else @if (조건) { /* 조건이 참일 때 구문 */ } @else { /* 조건이 거짓일 때 구문 */ } // @if @else if @if (조건1) { /* 조건1이 참일 때 구문 */ } @else if (조건2) { /* 조건2가 참일 때 구문 */ } @else { /* 모두 거짓일 때 구문 */ } 반복문 @for 스타일을 반복적으로 출력할 때 // through : 시작에서 종료까지 반복 // 종료 만큼 반복 @for $변수 from 시작 through 종료 { // 반복 내용 } // to: ..
2021.01.11 -
javascript: event
event 이벤트 입력 방법 3가지 1. html 태그 object에 입력 2. 태그 object에 이름을 준 후 스크립트에서 입력 3. 이벤트리스너 변수명.addEventListener("이벤트종류",function(e){}) -리스너 함수 이벤트의 종류 e.type 좌표값 x=e.clientX y=e.clientY 이벤트 대상 e.target 마우스 이벤트 - onclick - ondblclick - onmouseover - onmouseout - onmousedown - onmouseup - onmousemove click dblclick mouse over mouse out mouse down mouse up mouse move 키보드 이벤트 - onkeydown - onkeyup - onkeyp..
2021.01.07 -
SCSS: 함수, extend, import
함수 mixin과 유사하지만 반환되는 내용이 다름. mixin은 지정된 style 반환, 함수는 연산된computed 값을 반환 별도의 지시어 없이 사용하기 때문에 내장함수와 충돌하지 않도록 함수명 설정할 것 @function 함수이름($매개변수) { @return 값 } 내장함수 // 내가 정의한 함수 @function extract-red($color) { // 내장 함수 @return rgb(red($color), 0, 0); } div { color: extract-red(#D55A93); } https://sass-lang.com/documentation/modules Sass: Built-In Modules Compatibility: Dart Sass since 1.23.0 LibSass ✗ ..
2021.01.06 -
SASS/SCSS: 연산자, mixin
산술연산 나누기 조건 3가지 값 또는 그 일부가 변수인 경우 값이 ()로 묶여있는 경우 다른 연산자와 함께 사용되는 경우 mixin SCSS SASS 선언 @mixin 믹스인이름{ 스타일; } =믹스인이름 스타일 사용 @include 믹스인이름; +믹스인이름 선택자 이용하기 인수 argument 기본 인수 사용 인수 default value @mixin 믹스인이름($매개변수: 기본값) { 스타일; } 인수 응용 키워드 인수 keyword argument 입력순서 불필요, 미작성 인수 적용을 위해 기본값(null) 설정 추천 @mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) { 스타일; } @include 믹스인이름($매개변수B: 인수); 가변인수 variable arguments @m..
2021.01.05