codinghatso

DOM( Document Object Model) EventTarget ↑ Node ↑ ↖ ↖ Document Element Text ↑ HTMLElement ↑ ↖ HTMLInputElement HTMLDivElement 브라우저가 HTML 파일을 읽어 어플리케이션이 이해할 수 있는 오브젝트 형식으로 변환한다. 또 그 모델은 트리형태를 띈다. CSSOM( CSS Object Model) DOM + CSS = CSSOM DOM으로 HTML 파일을 오브젝트로 만든 후 CSS 파일을 오브젝트에 매핑시켜 파일을 적용 시킨다. 이때 사용자 지정 스타일 또는 inline 즉 브라우저가 기본값으로 정의하고 있는 스타일이 적용된다. cascading rules 에 따라 위 작업이 완료가 되면 compute style..

클래스의 상속은 만들어 놓은 클래스의 기능들을 그대로 가져다 쓸 수 있으면서도, 상속받은 클래스의 고유한 기능을 추가할 수 있기 때문에 체계적으로 구조화 된 서비스를 개발하는데 아주 중요한 역할을 합니다. 키워드 // 1. extends - 상속받을 클래스를 지정하는 지시자입니다. class ChildClass extends ParentClass {} //이런 방식으로 부모 클래스(Parent Class)를 상속받게 됩니다. 호출하지 않으면 부모 클래스의 생성자에서 초기화한 변수나 //메서드를 사용할 수 없게 됩니다. //2. super - 부모 클래스의 생성자(constructor()) 를 호출합니다. 자식 클래스의 생성자에서 호출하며, //부모 클래스의 생성자를 호출합니다. class ChildCla..

Flexbox의 구성 container item container display flex : container에 display의 속성, flex 값을 주어야 flexbox 기능이 적용된다. flex-direction row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. column: 요소들을 위에서 아래로 정렬합니다. column-reverse: 요소들을 아래에서 위로 정렬합니다. flex-wrap nowrap (default) wrap wrap-reverse flex-flow 다음의 속성들을 간략히 한 속성입니다. flex-direction and flex-wrap. justify-content flex-start (default) ..

Cascading Style Sheet *cascade : 작은 폭포, 폭포처럼 흐르다, 연속화, 연속적인, 종속, 직렬 Cascading Author style : 우리가 만든 .css 파일 | 우선순위 1 User style : 유저가 다크모드 같은 브라우저의 설정 값을 바꾸는 것 | 우선순위 2 Browser : 브라우저에서 기본으로 기정된 스타일 | 우선순위 3 * ! important : 모든 우선순위를 무시하고 가장 중요한 것을 지정해 버리는 것. 이것은 좋지 않은 구조를 만들 위험이 있어 조심히.. 아니 사용하지 않은 것을 추천한다. selectors (지정자, 선택자) Universal * type Tag ID #id Class .class State : Attribute [] 기본 문법 ..

/** * Objects * one of the JavaScript's data types. * a collection of related data and/or functionality. * Nearly all objects in JavaScript are instances of Object * object = {key : value}; */ // 1. Literals and properties const obj1 = {}; // 'object literal' syntax const obj2 = new Object(); //'object constructor' syntax function print(person) { console.log(person.name); console.log(person.age)..

AI를 구현하는 데에는 여러가지 방법이있다. programming 환경을 고를 때에는 클라우드(Cloud) 와 스탠드얼론(Standalone)중 선택하게되며 장단점이 존재하기 때문에 잘 선택하는게 좋다. 클라우드 서비스중에는 Google Colab서비스를 추천한다. http://colab.research.google.com Google Colaboratory colab.research.google.com 위 서비스는 구글이 가상 컴퓨터를 제공하는 서비스이다. github와 연동해서 사용할 수 있어 유용하다. 다음은 스탠드얼론으로 작업하려면 Anaconda-Navigator를 사용하여 통합개발도구인 Spyder를 설치해야 한다. http://anaconda.com Anaconda | The World's ..

python 에서 제공하는 turtle 라이브러리를 사용하여 랜덤으로 목적지를 지정하여 그곳을 찾아가는 AI를 만들어 보았습니다. 탐색한 횟수를 기록하여 성능을 체크하였습니다. from turtle import * import random #%% target 난수 생성 targetX = (random.randint(-10, 10)) * 10 targetY = (random.randint(-10, 10)) * 10 mypen=Turtle() #%% 울타리 그리기 mypen.penup() mypen.pencolor("black") mypen.setposition(-100,-100) mypen.pendown() for x in range(4): mypen.forward(200) mypen.left(90) #%..

var의 변수 선언 방식은 단점을 가지고 있음 var topic = 'nodejs' console.log(topic) // nodejs var topic = 'mysql' console.log(topci) // mysql 변수를 다시 선언해도 에러가 나오지 않고 각기 다른 값이 출력됩니다. 이러한 상황이 반복된다면 코드의 복잡성이 증가함에 따라 곤란한 경우가 생길 수 있다. 때문에 많은 javascript 개발자들은 이러한 문제를 방지 하기 위해 let 과 const를 사용하여 변수를 선언하기로 하였다. let은 변수에 재할당이 가능하다. let topic = 'nodejs' console.log(topic) // nodejs let topic = 'mysql' console.log(topci) // U..