전체 글

[C언어] C프로그래밍 개요

프로그래밍 언어 : 사람과 컴파일러가 이해할 수 있도록 약속된 형태의 언어 기계어 : 컴퓨터가 읽어내는 0과 1로 된 언어 사람 -> * 컴파일러 * -> 컴퓨터 컴파일러를 통해 컴퓨터를 다루는 것 . C언어를 사용하기 위해서는 컴파일러가 필요 컴파일러 ? 프로그래밍 언어로 작성된 프로그램을 컴퓨터가 이해할 수 있도록 기계어로 번역해주는 번역기 어셈블러(assaembler) 기호로 표현된 어셈블리 코드를 기계로 번역하는 번역기 인터프리터(interpreter) 소스프로그램을 한번에 기계어로 번환시키는 컴파일러와 달이 프로그램을 한 단계씩 기계어로 해석하여 실행하는 언어 처리 프로그램 C언어는 Denis Ritchie (1972년) 에 의해 제안 unix 운영체제 구현에 사용할 목적으로 개발 되었다. ->..

[데이터베이스] 데이터베이스 모델링

데이터베이스 모델링 데이터 모델? 데이터의 의미, 데이터의 타입, 연산 등 현실 세계의 정보들을 데이터베이스에 표현하기 위해서 단순화, 추상화하여 체계적으로 표현할 수 있는 모형을 데이터 모델이라고 한다. 1. 데이터베이스 모델링의 개념 데이터의 의미를 파악하고 데이터와 관여하는 업무 프로세스를 개념적으로 정의하고 분석하는 작업 2. 모델링의 단계 사용자 요구 사항 분석 ↓ 데이터 및 분석 업무 개념적 데이터 모델링 ↓ ER 모델 논리적 데이터 모델링 ↓ 관계형 모델 물리적 데이터 모델링 ↓ 물리적 세부사항 내부 스키마 1. 사용자 요구사항 분석 사용자가 원하는 애플리케이션 프로그램의 요구사항을 만족하는 데이터베이스를 모델링하기 위해 실제 업무에서 사용되는 데이터의 종류와 특징을 폭넓게 파악하는 과정 요..

[JS] Event / 버블링 / 캡쳐링

이벤트 마우스 이벤트(click, mouseover, mouseout, mousemove ...) 폼 요소 이벤트(submit, focus) 키보드 이벤트(keydown, keyup) 문서 이벤트 등의 DOM 이벤트 들이 있는데 이러한 이벤트가 발생했을 경우 실행되는 함수를 이벤트 핸들러라고 하며 핸들러를 할당하는 방법은 다양하다. 1. HTML 속성 HTML 안의 onevent 속성에 이벤트 핸들러 할당하는 방법 Ex. 등 간단한 코드는 그냥 작성하기도 하지만 코드가 길다면 별도의 함수를 만들고 이를 호출한다. 클릭해보세요 마우스를 올려보세요 2. DOM 프로퍼티 요소 객체가 가지고 있는 onevent 속성에 이벤트 핸들러를 연결 하는 방법 Ex. element.onclick = 이벤트핸들러(함수); ..

[JS] 문서 수정하기

문서 수정 노드 생성 document.createElement(tag) : 태그 이름을 사용해 새로운 요소를 만든다. document.createTextNode(value) : 텍스트 노드를 만든다. (잘 쓰이지 않음) element.cloneNode(deep) : 요소를 복제함. deep == true 일 경우 모든 자손 요소도 복제한다. 노드 삽입, 삭제 node.append(노드나 문자열) : node 끝에 노드나 문자열을 삽입 node.prepend(노드나 문자열) : node 맨 앞에 노드나 문자열을 삽입 node.before(노드나 문자열) : node 이전에 노드나 문자열을 삽입 node.after(노드나 문자열) : node 이후에 노드나 문자열을 삽입 node.replaceWith(노드나..

[JS] DOM / 요소검색 / 주요 노드 프로퍼티

DOM (Document Object Model) HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것 모든 노드 객체에 접근할 수 있는 요소와 메소드를 제공한다. HTML에 있는 태그를 구조화(트리) 했을 때 각각의 태그가 노드이다. 문서객체 - HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것 - 모든 노드객체에 접근할 수 있는 요소와 메소드를 제공 노드 - HTML에 있는 태그를 구조화(트리)하였을 때 각각의 태그가 노드 elements node와 textnode - 요소노드 : 태그 그 자체를 의미 - 텍스트노드 : 태그에 기록되어 있는 문자 -> 텍스트 노드를 가지는 태그(h?,p 등)와 가지지않는 태그(img등)가 있다. DOM 탐색하기 1. 자식 노드 ..

[JS] 객체

객체 선언/ 호출 객체는 키 값을 사용하여 속성(멤버 변수) 식별 객체 생성자 혹은 중괄호를 사용하여 객체 생성 ‘[ ](대괄호)’ 또는 ‘.’(점)으로 요소의 값에 접근 속성에 모든 자료형이 올 수 있다. 그 중 함수 자료형인 요소:메소드 객체 내에서 자신의 속성을 호출 할 때 반드시 this키워드를 사용 객체의 모든 속성을 출력하려면 for in문을 사용해야 한다. -> 단순 for문이나 while문으로 출력 불가 -> 식별자로 사용할 수 없는 문자(띄어쓰기, 특수문자)를 속성으로 사용할 경우 ‘ ‘로 묶어서 선언하고, 접근 시에는 [ ]만 가능 객체 선언하는 방법 let 변수명(객체명) = { 속성(키값) : 값, 속성(키값) : 값, 속성(키값) : 값 }; 속성값 접근 변수명(객체명)[‘요소명(..

[JS] JavaScript 개요

JavaScript 란? 자바스크립트(JavaScript)는 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어이다. HTML이 웹 문서의 뼈대 역할, CSS가 그 뼈대를 꾸며주는 역할이라면 자바스크립트는 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부르고, 스크립트는 웹 페이지의 HTML안에 작성 가능하며 웹페이지 로드 시 자동으로 실행 된다. 브라우저에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있다. JavaScript의 실행 방식 엔진이 스크립트를 읽고 (파싱) 읽어들인 스크립트를 기계어로 전환(컴파일)하면 기게어로 전환 된 코드가 실행된다. 전체를 해석해놓은 컴파일 언어와는 차이가 있다. Jav..

[CSS] CSS Diner 게임

오늘 CSS 수업중에 진행한 게임 CSS select 연습을 할 수 있는 게임 사이트 이다. 은근 재밌었으니 블로그에 남겨둔다 https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 사이트 내의 게임 화면은 이렇게 나오는데 leval 1 ~ 32 까지 플레이 가능하다. 화면에서 뽀잉뽀잉 하고 움직이는 그릇이나 과일(사과, 피클, 오렌지)을 왼쪽 CSS구문안에 작성해 날려보내는 게임이다. 매 게임의 목차와 오른쪽 화면을 보면 어떤 식으로 작성해야 하는지 힌트가 나온다. 예를 들면 22번 문제에서는 3번째, 5번째 그릇이 움직이는데, Nth-of-type 을 사..

[HTML] 태그 정리

1_글자태그 : 제목을 입력할 때 사용하는 태그 : 제목을 입력할 때 사용하는 태그 h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h6 태그입니다. : 줄 바꾸면서 수평선 넣는 태그 : 줄 바꿈 태그 : 단락을 구문하는 태그 문단을 나누는 태그 문단 영역을 나누는 태그로는 p태그와 pre태그가 있다. p태그는 문단 영역을 나누는 태그 이지만 한 개의 공백만 표시하며 줄 바꿈 입력을 별도의 태그로 지정해주어야 한다. pre 태그는 여러 칸 띄우기 혹은 줄 바꿈 등을 포함하여 입력한 내용 그대로 표현하는 태그이다. 그 밖의 텍스트를 다루는 태그들 : 글자를 굵게 표시하는 태그 : 글자를 굵게 표시하는 태그 *** 웹 접근성 *** b는 단순한 스타일만 변경..