분류 전체보기(122)
-
[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 -
20220302_ HTML/CSS : position, 컨텐츠가 overflow일 때 처리
Position 위치를 지정하는 CSS 속성인 position은 static(기본값), relative, absolute, fixed 네 가지 값이 있다. 1) 포지션은 top, right, bottom, left 속성과 함께 박스의 위치를 결정하고 2) 박스가 지닌 위치값 체계(?)를 변경한다. (ex. absolute로 절대 위치를 지정하면 해당 개체가 기존 개체에 위치가 밀리는 등의 영향을 받지 않는다.) static은 position의 기본값이다. 기본적으로 모든 요소는 겹쳐질 수 없으며, 기본적인 위치가 시작하는 좌표값은 브라우저 화면 최상단 최좌측의 점이다. relative는 원래 있어야하는 자리에서 변경을 시켜주는 것이다. absolute 위치 값의 축이 되기도 한다. absolute로는 절..
2022.03.02