Front-end 개발

1. NVM(Node Version Manager) 이란? 각 상황에 맞게 node버전 변경하고 사용할 수 있게 해주는 Node.js의 버전 관리자입니다. 2. 사용방법 https://github.com/nvm-sh/nvm GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant ba..

"a" 태그는 하이퍼링크를 생성하는 데 사용되며 여러 속성을 포함할 수 있습니다. 1. href: 링크의 대상 URL을 지정합니다. 이 속성은 필수입니다. (＊href 옵션) Visit Example.com 2. target: 링크를 어떻게 열지를 지정합니다. 주로 사용되는 값은 "_blank"로, 새 창이나 탭에서 링크를 엽니다. Visit Example.com 3. title: 링크에 대한 추가 정보를 제공합니다. 이 정보는 사용자가 마우스를 링크 위에 올릴 때 툴팁으로 표시됩니다. Visit Example.com 4. download: 링크를 클릭했을 때 리소스를 다운로드하도록 지정합니다. 이 속성은 태그가 다운로드 링크로 사용될 때 유용합니다. Download PDF 5. rel: 링크의 관계를 ..

1. Lottie란? 웹 및 모바일 애플리케이션에서 벡터 애니메이션을 쉽게 사용할 수 있게 해주는 라이브러리입니다. Lottie는 Adobe After Effects에서 만든 JSON 파일을 로드하여 애니메이션을 렌더링합니다. 2. lottie 사용방법? -라이브러리 설치 Vue 3 + Typescript Support npm install lottie-web-vue OR yarn add lottie-web-vue Vue 2 (v2 사용시 1.2.1로 설치하세요.) npm install lottie-web-vue@1.2.1 - Vue 2.x import Vue from 'vue' import LottieAnimation from 'lottie-web-vue' Vue.use(LottieAnimation);..

1. 뷰포트(viewport) 란? 사용자가 웹 페이지를 볼 때 화면에 표시되는 영역을 의미합니다. 모바일 기기에서는 특히 중요하며, 반응형 디자인 및 모바일 친화적인 경험을 구현하는 데 사용됩니다. 위의 코드는 반응형 페이지 제작시 설정하는 예제입니다. width=device-width : 이 설정은 기기의 화면 너비를 웹 페이지의 너비로 사용하도록 지정합니다. initial-scale=1.0 : 이 설정은 페이지가 처음 로드될 때 초기 배율을 1.0으로 설정합니다. 이는 사용자가 페이지를 처음 열었을 때 기본 배율로 표시되도록 합니다. maximum-scale : 사용자가 확대할 수 있는 최대 배율을 제어합니다. minimum-scale : 사용자가 축소할 수 있는 최소 배율을 제어합니다. user-..

@import 타입: (장점) 1. 스타일시트를 다른 스타일시트에 포함시키기 쉽습니다. 2. HTML 문서가 로드된 후에 실행되므로 일부 스타일을 지연하여 로드할 수 있습니다. (단점) 1. 순차적으로 로드되므로, 한 파일이 로딩되기 전까지 다음 파일의 로딩이 시작되지 않습니다. 이로 인해 페이지 로딩 시간이 더 걸릴 수 있습니다.(병렬 로딩 제한) 2. 브라우저가 캐싱하기 어렵습니다. 브라우저는 각각의 @import 문을 별개로 처리하기 때문에 전체 스타일시트를 캐시하기 어려울 수 있습니다. /* @import 사용법 */ @import url('reset.css'); @import url('layout.css'); @import url('typography.css'); /* 나머지 스타일 규칙들 */..

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