HTML/CSS, Javascript : 2월 7일

HTML/CSS

 

flex:1의 역할

[예시 1] .event { display: flex; background: #ff5722; padding: 20px; }

 

c_template_layout_01.html

 

[예시 2] .event { display: flex; flex: 1; background: #ff5722; padding: 20px; }  

딱 1대 1로 상자 크기를 잡아줌!

 

[예시 3]  .event { display: flex; flex: 1; background: #ff5722; padding: 20px; }

.event2 { flex: 2;}  /* 원랜 필요없는 속성임 */

 

 

- div, section 등을 세세하게 구분하는 건 큰 의미없다. 유명한 포털도 기능 구현에 목적을 둠. 

- 실습과제 홈페이지(티르티르) 따라 만들기

 

-> 똑같이 만들기 골치 아프기도 하고 해서 그냥 내 스타일 디자인대로 바꿔보았다. 기본적인 뼈대는 비슷하게 맞춤 

 

---

Javascript

 

역사

인터넷 익스플로러 기본적으로 깔려있었음 (마이크로소프트)

예전에 툴바, 확장프로그램설치 가능했는데 마소가 그 툴바를 이용할 수 없도록 막는 장치 만듦

→ 구글을 막기 위한 장치 (구글툴바)

→ 구글, 익스플로러 독점을 막기 위해 웹브라우저를 직접 만들어 배포하기로 결심

→ 속도가 중요함 → 자바스크립트 새롭게 작성

→ 오픈소스 공개함 

→ 서버 계열 node.js 탄생, ntm 등 탄생

→ 자바스크립트 생태계 확장

→ 웹사이트에서 더 많은 것들을 할 수 있게 됨

→ 웹브라우저에서 gpu도 사용할 수 있게됨 → 웹에서 게임 가능, AI도 가능

 

 

실습

주소 불러오기 

1) 내 호스팅 서버 보안 설정이 되어 있는 경우 

- 보안 설정되어있는 서버만 불러오기 가능 

- 이 경우 그냥 http를 지우고 //로 불러오는 방법이 있음

2) 내 호스팅 서버 보안 설정이 안 되어 있는 경우 -> 보안 설정 여부 관련 X

 

 

What is Hoisting?

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.

age = 20;

console.log(age);

var age;

console.log(age);

콘솔창에 20 보임

age = 20;

console.log(age);

let age;

console.log(age);

콘솔 창에 오류 뜸

* 자바스크립트의 특징이 호이스팅이라서 면접에 자주 나오는 소재임