Front-end 개발

1. International Telephone Input 이란? International Telephone Input은 전화번호 입력 필드를 국제 전화번호 형식에 맞게 처리하는 JavaScript 플러그인입니다. 이를 사용하려면 몇 가지 단계를 따르면 됩니다. 2. 사용방법 1. International Telephone Input 라이브러리를 다운로드하거나 CDN을 통해 가져와야 합니다. CDN을 사용하는 것이 편리하며, 다음과 같이 HTML 섹션에 추가할 수 있습니다. 2. 전화번호를 입력할 수 있는 HTML 입력 필드를 만듭니다. 3. 라이브러리를 초기화하고 입력 필드에 International Telephone Input을 적용하기 위해 JavaScript 코드를 작성합니다. 4. 필요에 따라 ..

1. 사용방 변수의 이름을 지정할 때에는 변수 맨앞에 -- 을 붙여주워야 합니다. --primary-color, --secondary-color, --font-size와 같은 CSS 변수를 정의하고, 해당 변수들을 사용하여 태그 요소에 스타일을 적용할수 있습니다. 2. 장점 변수를 사용하면 전역적으로 일관된 디자인을 유지하면서 유지보수가 용이해집니다. /*:root를 사용한 간단한 코드 예제 */ :root { --primary-color: #3498db; --secondary-color: #2ecc71; --font-size: 16px; } body { font-size: var(--font-size); } h1 { color: var(--primary-color); } p { color: var(--..

1. try + except 오류의 종류에 상관없이 except을 실행합니다. try: #실행 코드 x = 0 y = 5 / x except: print('Error') #예외가 발생할때 실행 코드 #결과 Error 2. try + except + else 오류가 없다면 else 절의 코드가 작동합니다. try: #실행 코드 x = 1 y = 5 / x except: print('Error') #예외가 발생할때 실행 코드 else: print('정상 실행') #예외가 발생하지 않을때 실행 코드 print(y) #결과 정상 실행 5 3. try + except + finally 오류의 상관없이 finally 절의 코드가 작동합니다. try: #실행 코드 x = 1 y = 5 / x except: print..

1. f-string 이란? python version 3.6 부터 사용 할수 있습니다. 문자열 가장 앞에 f를 넣고, 중괄호 {} 안에 변수 또는 출력하고 싶은 것을 바로 넣습니다. 포맷 문자열 리터럴(간단히 f-문자열이라고도 합니다) 1. 기존에 사용하던 여러 방식 # 더하기(+) 방식 sport1 = '축구' sport2 = '농구' print(sport1+"와"+ sport2+"는 구기 종목이다.") # 퍼센트(%) 서식 방식 sport1 = '축구' sport2 = '농구' print("%s와 %s는 구기 종목이다."%(sport1, sport2)) # str.format 함수 방식 sport1 = '축구' sport2 = '농구' print("{}와 {}는 구기 종목이다.".format(spo..

1. if 문 python 에서는 구문을 지정할 때 들여쓰기 합니다 들여쓰기 하지 않으면 if문이 끝난걸로 간주합니다. 조건이 true(1)일때 실행합니다. color = red if color == red: #조건: print(f"컬러는{color}입니다.") #true 일때 #결과: 컬러는red입니다. 2. If else 문 true(1)와 false(0) 구분하고 싶을때 사용합니다. color = red if color == red: #조건: print(f"컬러는 {color} 입니다.") #true 일때 else: print(f"컬러가 {color}가 아닙니다.") #false 일때 #true 일때: 컬러는 red 입니다. #false 일때: 컬러가 red가 아닙니다. 3. If elif else..

1. accept 속성 서버로 업로드하는 파일의 type을 명시 합니다.( ex: .jpg) 하나 이상의 확장자를 사용할 경우 콤마로 구분 합니다. ( ex: .jpg,.png,.svg) accept을 사용하지하지 않으면 모든 파일을 입력 받습니다. 확장자을 지정 하여도 사용자가 모든파일(*.*) 선택하여 올릴수 있습니다. (주의) 특정 확장자만 입력 받고 싶다면 별도 작업 필요합니다. 2. capture 속성 모바일에서 이미지 업로드 할때 사용합니다. capture 속성 값으로 전/후면 카메라를 우선 작동시킬수 있습니다. //전면카메라 //후면카메라 3. required 속성 파일이 선택 되어 있는지 확인 할 때 사용합니다. 파일 미선택 시 '파일을 선택하세요'라고 메시지가 보입니다. 4. multip..

1. HTML 2. Javascript /* 파일용량 제한*/ $("input[name=file_size").on("change", function(){ let maxSize = 5 * 1024 * 1024; //* 5MB 사이즈 제한 let fileSize = this.files[0].size; //업로드한 파일용량 if(fileSize > maxSize){ alert("파일첨부 사이즈는 5MB 이내로 가능합니다."); $(this).val(''); //업로드한 파일 제거 return; } }); ※ maxSize 설정시 참고 하세요. (데이터 크기는 1024의 제곱으로 표현합니다) 1024 = 1KB 1024 * 1024 = 1MB 1024 * 1024 * 1024 = 1GB 1024 * 1024 *..

1. 카운트업(CountUp.js)이란? 숫자모션을 만들어주는 프레임워크(frameworks)and 플러그인(plugins)입니다. Angular, React, Vue, WordPress, jquery 지원 합니다. Demo 사이트 https://inorganik.github.io/countUp.js/ 공식 Github 사이트 https://github.com/inorganik/CountUp.js 2. 사이트 제작하다고 보면 카운트 모션을 사용하고 싶을때가 있습니다. 간단한 플레임워크(frameworks)and 플러그인(plugins)을 이용하여 카운트 모션을 만들어 봅시다. 카운트모션 제작시 필요한 옵션값외 자세한 설명은 공식 Github사이트에서 확인할수 있습니다. Options (defaults i..

1.포토샵 드롭섀도 CSS 전환 해주는 사이트로 접속합니다. http://psd-to-css-shadows.com/ Convert Photoshop Drop Shadows to CSS3 Box and Text Shadows CSS3 Code box-shadow: offset-x offset-y blur-radius spread-radius rgba(0, 0, 0, opacity) inset; text-shadow: offset-x offset-y blur-radius rgba(0,0,0 opacity); box-shadow: offset-xpx offset-ypx blur-radiuspx spread-radiuspx rgba(0, 0, 0, opacity) inset; te psd-to-css-shado..

1.is unrecognized in this browser 에러가 날 경우 의미없는 대신 을 사용하면 콘솔오류가 없어집니다. 2.is using incorrect casing 에러가 날 경우 첫 문자를 대문자로 사용해야 합니다.(React 구성 요소에는 PascalCase를 사용하고 있습니다.) ※ PascalCase(파스칼 표기법)란? 모든 단어의 첫글자가 단어수와 상관없이 대문자로 시작합니다. 예) PascalCase 이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요. 큰 도움이 됩니다.