본문 바로가기

전체 글192

02. 변수(let), 상수(const) 1. 변수 (let)데이터를 저장할 수 있는 메모리 공간값이 변경될 수 있음자바스크립트의 변수는 타입이 없음let 키워드 사용하여 변수를 선언 언어별 변수 선언파이썬   name = '김시과'   자바스크립트    let name = '김사과' ;  ​아주 엣날 엣적 변수 선언   var name = '감사과' ;     var                    console.log(num); //undefined            var num=10;                    { console.log(num); //전역변수 num=10            var num=20;             console.log(num); //지역변수 num=20,            }        .. 2024. 4. 16.
01. 자바스크립트(JavaScript) 1. 자바스크립트 (JavaScript) 객체기반의 스크립트 프로그래밍 언어 객체 지향 프로그램(X) 자바스크립트 역사 1993년 일리노이 대학교에서 최초의 대중적인 그래픽 웹 브라우저인 NCSA 모자이크 출시 오리지널 NCSA 모자이크 개발자를 고용해 '모자이크 커뮤니케이션스'라는 이름의 회사를 설립 1995년 NCSA의 상표 소유권 문제를 회피하고자 '넷스케이프 커뮤니케이션즈'로 회사 이름 변경 네비게이터 브라우저(90% 이상의 점유율) HTML로만 개발함으로 정적인 작업만 가능했었음 1996년 - '브렌던 아이크' 영입 동적인 프로그램을 개발-> 자바를 포함시키기 위해 마이크로시트템스와 협업-> MS 마이크로소프트와 경쟁 10일만에 자바스크립트(모카)라는 언어를 탄생시킴! - 네비게이터2에 탑재(이.. 2024. 4. 12.
09. CSS Transform, Transition, Animation 1. CSS Transform - 2차원 좌표에서 요소를 변형시키는 속성 translate: 이동 rotate: 회전 scale: 확대, 축소 skew: 경사, 비틀기 Transform _ 적용예시 p { margin: 0 auto; width: 600px; padding: 20px; border: 3px solid rgba(0, 0, 0, 0.5); } #translate { transform: translate(30px, 50px); background-color: deeppink; } #rotate { transform: rotate(60deg); background-color: gold; } #scale { transform: scale(1.5, 1.2); background-color: oran.. 2024. 4. 12.
(1)자료구조 ④ 슬라이딩 윈도우 *️⃣ 슬라이딩 윈도우 2개의 포인터로 범위를 지정한 다음, 범위(window)를 유지한 채로 이동(sliding)하며 문제를 해결합니다. 투포인터 알고리즘과 매우 비슷하고 원리도 간단한 편입니다. 1. DNA 비밀번호 문제 Q. 평소 문자열을 이용해 노는 것을 좋아하는 민호는 DNA 문자열을 알게 되었다. DNA문자열은 모든 문자열에 등장하는 문자가 {'A','C','G''T'}인 문자열을 말한다. 예를 들어 "ACKA" 는 DNA 문자열이 아니지만, "ACCA"는 DNA 문자열이다. 이런 신비한 문자열에 완전히 매료된 민호는 임의의 DNA문자열을 만들고 만들어진 DNA 문자열의 부분 문자열을 비밀번호로 사용하기로 마음 먹었다. 하지만 민호는 이 방법에는 큰 문제가 있다는 것을 발견했다. 임의의 DNA.. 2024. 4. 11.
08. CSS 우선순위, Custom Properties 1. css 우선순위 계산 동일한 속성을 적용할 경우 나중에 적용한 것이 우선 외부 스타일 시트와 내부 스타일 시트의 적용은 순서에 따라 나중에 적용한 것이 우선 내부, 외부, 인라인 스타일 시트 중 인라인을 우선시 적용 우선순위 계산식 inline: 1,000점 id 속성: 100점 class, 속성 선택자: 10점 element: 1점 !important를 적용하면 0순위 #id-style { background-color: deeppink; } #id-style2 { background-color: deepskyblue; } div { display: block; padding: 30px; margin: 30px; background-color: gold; } .class-style3 { backg.. 2024. 4. 11.
07. 미디어쿼리 1. 미디어 쿼리(media query) 반응형 웹 하나의 웹사이트에서 pc, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 body {background-color: deeppink;} @media screen and (min-width: 800px) { body {background-color: deeppink;} } 800px 이하일 때 800px 이상일 때 매체 유형 - all: 모든 유형 - screen: 컴퓨터, 태블릿, 스마트폰 ... - print: 프린터 적용예시(1) * {margin:0; padding:0; box-sizing: border-box;} header { width: 100%; background-color:.. 2024. 4. 11.
(1)자료구조 ③ 투 포인터 *️⃣ 투포인터 - 투 포인터는 2개의 포인터로 알고리즘의 시간복잡도를 최적화 한다. - 시간 인덱스와 종료 인덱스를 투포인터로 지정하여 문제에 접근하는 방식 1. 연속된 자연수의 합 구하기 문제 Q. 어떠한 자연수 N은 몇 개의 연속된 자연수의 합으로 나타낼 수 있다. 당신은 어떤 자연수 N(1≤N≤10,000,000)을 몇 개의 연속된 자연수는 N이어야 한다. 예를 들어 15을 나타내는 방법은 15, 7+8, 4+5+6, 1+2+3+4+5이다. 반면, 10을 나타내는 방법은 10, 1+2+3+4이다. N을 입력받아 연속된 자연수의 합으로 나타내는 가짓수를 출력하는 프로그램을 작성하시오. [입력] [출력] 1번째 줄에 정수 N (1≤N ≤10,000,000)이 주어진다. 입력된 자연수 N을 연속된 자연.. 2024. 4. 10.
(1)자료구조 ② 구간합 1. 구간 합 구하기1 문제 Q. 수 N개가 주어졌을 때 i번째 수에서 j번째 수까지의 합을 구하는 프로그램을 작성하시오. [입력] [출력] 1번째 줄에 숫자의 개수 N (1≤N ≤100,000) 합을 구해야 하는 횟수 (1≤M ≤100,000) 총 M개의 줄에 입력으로 주어진 i번째 수에서 j번째 수까지의 합을 출력한다. 2번째 줄에 N개 수가 주어진다. (각 수는 1,000보다 작거나 같은 자연수다.) 3번째 줄부터는 M개의 줄에 합을 구해야 하는 구간 i와 j가 주어진다. 풀이방법 1. N개의 수를 입력받은 동시에 합배열 생성 * 합배열 >>>> S[i] = S[i-1] + A[i] 2. i~j 가 주어지면 구간합을 구하는 공식으로 정답 출력 * 구간합 >>> S[j] - S[i-1] 코드 순서 1.. 2024. 4. 9.
06. flex Flex 레이아웃 수평 정렬을 하기 위한 속성 display: flex 1. flex-wrap 라인에 여유가 없을 때 위치를 결정하는 속성 flex-wrap: 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 - nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 - wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 - wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래가 아닌 위쪽으로 넘김) #container { width: 1000px; height: 500px; margin: 0 auto; border: 3px solid red; display: flex; /*기본값: nowrap;*/ /*fle.. 2024. 4. 9.

티스토리툴바