코딩 일기장

1. Web Browser와 Window 객체 window 객체 개요 window 객체는 웹 브라우저에서 작동하는 자바스크립트의 최상위 전역객체이다. window 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 있다. 자바스크립트에서 기본으로 제공하는 프로퍼티와 함수도 포함 BOM으로 불리기도 함 window 객체 사용 alert, confirm, prompt window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open alert() : 브라우저의 알림창 confirm() : 브라우저의 확인/취소 선택창 prompt() : 브라우저의 입력 창. navigator navigator 객체는 브라우저의 정보가 내장된 객체 navigator 정보로 서로 다른 브라우저를 구분할 수 있으며, 브라우..

1. javascript 특징 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍언어 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 각 브라우저별 javascript 엔진은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리속도가 느린 인터프리터의 단점을 해결 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀트 패러다임 언어 2. javascript 선언 HTML에서 javascript를 사용하려면 setTimeout(function () { console.log('3초후 실행됩니다.'); }, 3000);

1. semantic? semantic의 사전적 의미는 '의미론적인', '의미가 통하는' 이다. 검색 로봇 또는 스크린 리더등의 기계가 쉽게 해석하고 분석 할 수 있도록 만들어진 태그 HTML4에서 와 id 속성을 이용하여 화면을 구성 id의 이름을 정하는 규칙이 없기때문에 문서의 구조를 이애하는데 한계. 웨어러블 장치나 스마트 기기를 이용하여 웹문서를 읽는 데 부적합 구조 해결책으로 HTML5에서는 웹 문서 레이아웃을 표준화하는 semantic tag를 이용 사이트의 제목과 로고, 검색 창 등이 있는 헤더, 여러 내용이 있는 본문, 본문 외 내용을 나타내는 사이드바, 저작권 정보와 제작자 정보를 표시하는 푸터로 이루어져 있다. 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을..

1. 선택자의 이해 개요 HTML 문서에서 CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자가 존재 일반 선택자는 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자로 분류 복합 선택자는 자식 선택자, 하위선택자, 인접 형제 선택자, 일반 형제 선택자로 분류 그 외에도 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 존재 전체 선택자 : * {} 타입 선택자 : h1, h2, h3 {} 클래스 선택자 : .className {} ID 선택자 : #idName {} 하위 선택자 : E1 E2 {} 자식 선택자 : E1>E2 {} 인접 형제 선택자 : E1+E2 {} 일반 형제 선택자 : E1~E2 {} 가상 클래스 선택자 요소 가상 클래스 선택자는 User Agent가 제공하는 가..

CSS? HTML5 웹 문서를 구성하는 3가지 요소. HTML : 웹 페이지 문서 담당 CSS : 웹 페이지 디자인 담당 JS : 웹 페이지 이벤트 담당 Cascading Style Sheets의 약자 스타일 사용이유 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들수 있다. 웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서 웹 브라우저 별 CSS3 지원. site : http://css3test.com CSS 규칙은 선택자와 선은 두 부분으로 구성. 선택자는 규칙이 적용되는 엘리먼트. 선언 부분에서는 선택자에 적용될 스타일 작성. 선언은 중괄호로 감싸며, 속성과 값으로 이루어짐. 속성은ㅊ 선택자에서 바꾸고 싶은 요소. 값은 속성에 적용할 값...

1. 포맷팅 요소 포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있다. 예를 들면 와 은 모두 텍스트를 굵게 표현하지만, 요소는 텍스트를 강조 : 생략된 약어 표시, Title 속성을 함께 사용 : 연락처 정보 표시. : 긴 인용문구 표시, 좌우로 들여쓰기가 됨. : 짧은 인용문구 표시, 좌우 따옴표가 붙음. : 공백, 줄바꿈 등 입력된 그대로 화면에 표시 : 컴퓨터 인식을 위한 소스코드 : 특정 문자열을 강조, 화면에는 하이라이팅 됨. : 구분선 , : 굵은 글씨로 표시, 특정 문자열 강조 , : 이텔릭 표시, 특정 문자열을 강조 , : 큰 글자, 작은 글자로 표시 , : 위 첨자, 아래 첨자로 표시 , : 취소선, 밑줄 2. 목록형 요소 목록 tag는 하나 이상의 하의..

1. HTML 기본 tag와 속성 class tag에 적용할 스타일의 이름 지정 dir 내용의 텍스트 방향을 지정 왼쪽 >> 오른쪽(기본값, ltr) 오른쪽 >> 왼쪽(rtl) id tag에 유일한 ID를 지정함. 자바스크립트에서 주로 사용. style 인라인 스타일을 적용하기 위해 사용 title tag에 추가정보를 지정. tag에 마우스 포인터를 위치시킬 경우 title의 값 표시 Root 요소 tag는 HTML 문서 전체를 정의 Head와 Body로 구성 Head 요소 문서 머리글, 제목 tag는 브라우저에게 HTML문서의 머리 부분임을 인식. , , , , tag를 포함 가능. tag는 문서의 제목을 의미, 브라우저 제목 표시줄에 tag내용이 나타남 tag 이외의 다른 tag로 표현한 정보는 화면..

메모이제이션 컴퓨터 프로그램을 실행할 때 이전에 계산한 값을 메모리에 저장해서 매번 다시 계산하지 않도록 하여 전체적인 실행속도를 빠르게 하는 기술, 동적 계획법의 핵심 추가적인 메모리 공간이 필요. 재귀 함수 호출로 인한 시스템 호출 스택을 사용, 실행 속도 저하 또는 오버플로우 발생 1. 중복 부분문제 구조 DP는 큰 문제를 이루는 작은 문제들을 먼저 해결하고 작은 문제들의 최적 해를 이용하여 순환적으로 큰 문제를 해결한다. 순환적인 관계를 명시적으로 표현하기 위해서 동적 계획법에서는 일반적으로 수학적 도구인 점화식을 사용한다. DP는 문제의 순환적인 성질 때문에 이전에 계산되어졌던 작은 문제의 해가 다른 어딘가에 필요하게 되는데 이를 위해 DP에서는 이미 해결된 작은 문제들의 해들을 어떤 저장 공간..

개념 다익스트라 알고리즘은 그래프에서 한 정점에서 다른 정점까지의 최단 경로를 구하는 알고리즘. 이 과정에서 도착 정점 뿐만 아니라 모든 다른 정점까지 최단 경로로 방문하여 각 정점까지의 최단 경로로 모두 찾는다. 동작 인접 행렬로 구현하는 방법 출발 노드와 도착 노드를 설정한다. 최단 거리 테이블을 초기화 한다. 현재 위치한 노드의 인접 노드 중 방문하지 않은 노드를 구별하고, 방문하지 않은 노드 중 거리가 가장 짧은 노드를 선택한다. 그 노드를 방문 처리한다. 해당 노드를 거쳐 다른 노드로 넘어가는 간선 비용을 계산해 최단 거리 테이블을 갱신한다. 1 ~ 4 과정을 반복한다. // N: 정점 개수, V: 간선 개수, start: 출발 정점, end: 도착 정점, weight: 비용 // map: 인접..

그래프에서 최소 비용 문제 모든 정점을 연결하는 간선들의 가중치 합이 최소가 되는 트리 두 정점 사이의 최소 비용의 경로 찾기 신장 트리 n개의 정점으로 이루어진 무향 그래프에서 n개의 정점와 n-1개의 간선으로 이루어진 트리 최소 신장 트리 (Minimum Spanning Tree) 무향 가중치 그래프에서 신장 트리를 구성하는 간선들의 가중치의 합이 최소인 신장트리 1. KRUSKAL Algorithm 최초, 모든 간선을 가중치에 따라 오름차순으로 정렬 가중치가 가장 낮은 간선부터 선택하면서 트리를 증가시킴 → 사이클이 존재하면 다음으로 가중치가 낮은 간선 선택 n-1 개의 간선이 선택될 때까지 2번 반복 MST_KRUSKAL(G, w) for vertex v in G.V // G.V : 그래프의 정점..