공부(122)
-
[JavaScript] DOM (문서 객체 모델 : Document Object Model)
HTML 웹 페이지는 일종의 문서다. 여러가지 프로그래밍 언어가 접근할 수 있게 만든 문서 인터페이스를 DOM이라고 부르는데, DOM이란 문서 객체 모델(Document Object Model)의 준말이다. HTML,CSS,JavaScript를 통해 DOM 구조에 접근하여 문서 구조, 스타일, 내용을 변경한다. 선택자 원거리 선택자 getElementById getElementByTagName 근거리 선택자 parentNode childNode children firstChild previousibling nextSibling DOM이 없다면 스크립트 언어는 웹 페이지에 대한 정보를 갖지 못하게 된다. 자바스크립트에서는 를 작성하여 문서 자체를 조작하거나 window elements를 위한 API를 사용..
2022.03.08 -
[JavaScript] Hoisting
function catName(name) { console.log("제 고양이의 이름은" + name + "입니다.")' } catName("호랑이"); /* 결과 : "제 고양이의 이름은 호랑이입니다." */ catName("호랑이"); function catName(name) { console.log("제 고양이의 이름은" + name + "입니다."); } /* 결과: "제 고양이의 이름은 호랑이입니다." */ 자바스크립트에서는 함수의 호출이 함수 자체보다 앞서 존재하더라도 코드가 동작한다. JS에서는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당하기 때문이다. 이 현상을 JS의 Hoisting이라고 부른다. 호이스팅의 대상은 오직 "선언"이다. 선언 없이 호출 후 초기화를 진행한다..
2022.03.08 -
[CSS] Float으로 인한 레이아웃 깨짐 해결
1) 태그에 float 속성값을 부여하면 이전의 display 속성이 어떤 것이던 block이 된다. (block처럼 weight, height, border(top,bottom),padding(top,bottom), margin(top,bottom) 모든 block 속성 부여 가능) 2) 그러나 block이 지닌 특징인 margin auto값은 적용이 안되어 별도의 속성을 조정하지 않고 위치만 잡게된다면 한 줄로 흐르는 inline태그처럼 취급된다. 3) float이 적용된 개체는 부모 태그에 속한 자식 태그들과 레이어가 분리된다. - 그래서 개체가 겹칠수도.. 4) 또 이외의 개체들은 float으로 배치된 개체를 알아보는데, 부모 태그 안의 자식 태그들 (정사각형)에 float과 margin : 0 ..
2022.03.07 -
20220304_JavaScript : 기초 2
자바로 찍었던 별을 자바 스크립트로도 찍어보았다. 조건문, 반복문, break와 continue 구문, 연산, 클래스 만드는 법까지 자바랑 다 똑같은데..? 반복문을 이용하여 태그의 값을 자동화할 수도 있다. js에서의 클래스 목적도 자바와 마찬가지로 변수와 메서드를 같은 소속으로 담아 사용하기 위함이며 미리 만들어져 있는 내장 클래스를 쓸 수도 있다. 아래는 내장되어있는 Date 클래스를 선언하여 메소드를 이용해본 연습 코드이다. document.write("현재날짜/시간정보"); var today = new Date(); // 날짜 관련 객체 활용, 현 시각날짜정보를 얻기 위해 생성 var nowyear = today.getFullYear(); // 연도 var nowmonth = today.getM..
2022.03.04 -
[Network] OSI 7 Model, TCP/IP Model, IP
네트워크란 기기와 기기 간의 통신 방식, 즉 커뮤니케이션 방식이라고 이야기할 수 있다. 서로 다른 하드웨어와 운영체제를 가진 컴퓨터끼리도 통신하기 위해서는 공통의 규칙이 먼저 필요한데, 이런 규칙을 "프로토콜"이라고 한다. (보내는 쪽에서는 프로토콜로 포장하고, 받는 쪽에서는 받은 프로토콜을 해석할 수 있는 능력이 필요하다.) 프로토콜이란 곧 기술적 약속이다. 네트워크를 공부한다는 것은 프로토콜을 공부한다는 것이다. 프로토콜을 알아보기 전에, 네트워크는 OSI 모형을 통해 국제적으로 표준화되어 7의 계층으로 나뉜다는 것을 기억한다. 이렇게 프로토콜을 그룹으로 묶어 계층으로 표준화를 하게되면 통신이 일어나는 과정을 단계별로 파악할 수 있어, 문제가 발생하면 단계를 파악해서 해결하기가 용이해진다. 순서 (송..
2022.03.04 -
20220303_JavaScript : 기초 1
JS는 HTML 문서의 메인 메서드같은 역할을 한다. JS의 변수는 모든 자료형을 다 var라는 키워드로 통일시켜서 사용한다. 이렇게 변수에 자료형이 부여되지 않는 언어를 가르켜 동적 타입 언어라고 부른다. (cf. 자바는 정적 타입 언어) ES 6에서 let과 const가 등장하였으나, 기초 문법 학습 시에는 예제 코드를 var로 통일하여 작성하고자 한다. var num = 10; // int도 var var txt = "자바스크립트"; // string도 var var bool = true; // boolean도 var var blank = null; // var에 null로 작성되는 빈 데이터 삽입 JS에서 비교 연산자는 ===와 !==를 써준다. 자바에서 처럼 ==와 !=로 비교하면 자료형을 고려..
2022.03.03