https://www.kisa.or.kr/2060204/form?postSeq=9&page=1#fndoDocumentPreview

전체 선택자 (Universal Selector) * 라는 선택자는 모든 요소를 선택하는 선택자입니다. 모든 요소를 선택하기 * { box-sizing: border-box; } .gallery의 모든 자식 요소 선택하기 .gallery > * { width: 120px; height: 90px; } n번째 자식 선택자(n-th child Selector) :nth-child()를 사용합니다. 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있는데요. 혹시 다른 프로그래밍 언어를 쓰신 경험이 있다면 0부터 시작할 거라고 생각하실 수도 있지만, 여기서는 1부터 시작합니다. (첫 번째 자식은 1이고, 세 번째 자식은 3임) .gallery의 세 번째 자식 .gallery :nth-child..

CSS 선택자(CSS Selector) CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부릅니다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있습니다. 선택자 { 선언; 선언; 선언; } 선택자 목록 콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있습니다. 선택자1, 선택자2 { ... } 선택자 붙여 쓰기 여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있습니다. 예를 들어서 아래 HTML 코드에 있는 태그를 선택해 볼게요. 몽골 대자연으로 떠나는 여행 예시 1. 아이디 + 클래스 #mongolia.title 예시 2. 클래스 + 클래스 .large.title 예시 3. 태그 + 아이디 + 클래스 h2#mongolia.larg..

npm install @next/font 로 설치 후 ​ import { Noto_Sans_KR } from "@next/font/google"; import Head from "next/head"; ​ const notoSansKR = Noto_Sans_KR({ weight: ["400", "700"], subsets: [], }); ​ ​ {` html { font-family: ${notoSansKR.style.fontFamily}, sans-serif; } `}

npm install --save-dev http-proxy-middleware 백엔드와 프론트 앤드를 같은 도메인으로 운영하기 위해 사용 setupProxy.js const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "http://localhost:3001", changeOrigin: true, }) ); };

npm install react-helmet --> 설치가 필요 javascript 아래와 같이 표현 document.title = 'header title'; react 문법 예시 import { Helmet } from 'react-helmet'; header title react-helmet - npm

VS Code 실행 후 파일 > 기본설정 > 확장 메뉴를 클릭한다. 색창에서 live server를 검색 후 설치버튼을 클릭한다. 새파일 아이콘을 클릭 후 파일명에 test.html을 입력하여 html 파일을 생성한다. 좌측 코드 탭에서 html:5를 입력하면 자동완성이 되는데 엔터를 쳐서 기본 코드를 생성한다. 좌측 코드 탭을 우클릭한 후 Open with Live Server 메뉴를 클릭한다. show preview를 볼수 있다.

http://jqueryui.com/demos/

1. vue 정의 자바스크립트로 개발된 컴포넌트 구조 기반 프론트엔드 프레임워크 ​ 2. vue router ​ Vue 기반 애플리케이션은 흔히 SPA(Single Page Application, 한 화면으로 구성된 애플리케이션을 말한다)로 구성되는데, 이때 한 페이지 내에서도 다른 페이지로 이동할 필요 없이 마치 여러 개의 페이지가 있는 듯한 방식으로 작동하게 해 주는 것이 바로 Vue Router이다 ​ ​ #vue

코드펜은 이름에서 알 수 있듯이, 간단히 코드를 작성해서 실행해보고 공유할 수 있는 서비스입니다. codepen.io로 접속 ​ https://codepen.io/

window 에서 cmd 창을 열어준다. ​ 초기세팅 ​ 기본적으로 node.js, npm은 설치가 되어 있어야 합니다. ​ npm init react-app [폴더이름] npm init react-app . -->폴더 안에서 프로젝트 생성하기 npm run start --> 프로젝트 개발 모드 실행하기 ​ ​ ctrl + c--> 프로젝트 개발 모드 실행 종료하기 ​ 2. 크롬에 react 개발자 도구 세팅하기 ​ react developer tools -> 구글 검색 크롬 확장 프로그램 설치하기 구글 개발자 도구에서 components 탭 클릭 ​ 3. 빌드하기 , 빌드 후 확인 실행 ​ npm run build --> 빌드 하기 ​ npx serve build --> 빌드 한 부분 서버 실행 ctr..

파이썬 인터렉티브 모드 파이썬 파일이 없이도 파이썬 실행하기 cmd 창에서 python 명령어를 치면 인터렉티브 모드로 변경됨 quit() 명령어로 인터렉티브 모드 종료

파이썬 파일이 있는 폴더에서 python .[파이썬 파일명].py

CAST(type) : 데이터 타입 변환 signed는 양수와 음수를 포함한 모든 정수를 나타낼 수 있는 데이터 타입입니다. order by CAST(data AS signed) ASC ; -- 형식으로 써야 숫자 정렬이 된다 만약 문자열 타입으로 저장된 숫자값에 소수점이 포함되어 있다면 signed 대신 decimal(소수점이 있는 수를 나타내는 타입)을 적어주고 사용하면 됨

날짜 간의 차이 구하기 날짜 간의 차이를 구하는 함수도 있습니다. DATEDIFF()라는 함수인데요. 여기서 DATE는 날짜, DIFF는 Difference의 줄임말로 '차이'라는 뜻입니다. DATEDIFF(날짜 a, 날짜 b)를 사용하면 '날짜 a - 날짜 b'를 해서 그 차이 일수를 알려줍니다. 예를 들어, DATEDIFF(’2018-01-05’, ’2018-01-03’)의 값은 2입니다. 오늘 날짜를 구하는 함수는 CURDATE() 날짜 더하기 빼기 날짜에서 며칠을 더하고 빼는 것도 가능한데요. 더하는 함수는 DATE_ADD(), 빼는 함수는 DATE_SUB()입니다. DATE_ADD(sign_up_day, INTERVAL 300 DAY)라고 적힌 부분은 sign_up_day 컬럼의 값에 300일을..

# w 는 덮어쓰기 a 기존 데이터에 추가로 작성하기 with open("data/new_file.txt", 'w') as f: f.write("new test file\n")

기본 옵션 open("data/chicken.txt", 'r') 한글이 있는 경우 with open("data/chicken.txt", 'r', encoding='utf-8') as f: for line in f: print(line.strip())

strip : 문자열의 중간 공백은 나두고 앞 뒤의 공백, \t, \n 을 모두 지워줌 str.strip() 선행과 후행 문자가 제거된 문자열의 복사본을 돌려줍니다. chars 인자는 제거할 문자 집합을 지정하는 문자열입니다. 생략되거나 None 이라면, chars 인자의 기본값은 공백을 제거하도록 합니다. chars 인자는 접두사가 아닙니다. 모든 값 조합이 제거 됩니다. str.strip([chars]) >>> ex_str = " hello " >>> ex_str.strip() # 'hello' >>> 'http://www.example.com'.strip('m') # 'http://www.example.co' >>> 'http://www.example.com'.strip('w') # '.exampl..

문자열은 조회 방식은 리스트와 같은 방식으로 쓸수 있지만 리스트와 같은 방식으로 수정은 불가능 인덱싱 가능 # 알파벳 리스트의 인덱싱 alphabets_list = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'] print(alphabets_list[0]) print(alphabets_list[1]) print(alphabets_list[4]) print(alphabets_list[-1]) # 알파벳 문자열의 인덱싱 alphabets_string = 'ABCDEFGHIJ' print(alphabets_string[0]) print(alphabets_string[1]) print(alphabets_string[4]) print(alphabets_string[-1]..

alias는 '가명'이라는 뜻을 가지고 있는데 이는 쉽게 말해 파이썬에서 변수 = 객체 일때, 객체에 변수라는 가명을 정해준다고 생각하시면 됩니다. 이렇게 객체와 변수의 연관짓는 것을 참조(reference) 하나 이상의 참조를 가진 객체는 한 개 이상의 이름을 갖게 되어서 객체가 에일리어스(aliased)되었다고 합니다. 만약 에일리어스된 객체가 변경 가능하면, 변화의 여파는 다른 객체에도 영향을 끼치기 때문입니다. x = [2, 3, 4, 1, 10, 2] y = x y[2] = 15 print(x) print(y) [2, 3, 15, 1, 10, 2] [2, 3, 15, 1, 10, 2] x의 리스트 값은 우리의 예상과 다르게 y와 동일하게 나옵니다. 이는 x가 객체를 참조하고 y 가 x를 참조하면..