HTML attribute vs property attribute- HTML 텍스트 문서에 있는 것- html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소- 변하지 않고 초기 (default)값을 전달⇒ html 문서 안에서의 정적인(바뀌지 않는) 속성 그 자체 property- HTML DOM 트리에 있는 것- properties는 변할 수 있음⇒ html DOM 안에서 동적인(바뀌는) 속성(또는 그 값) 차이점 예시 EX css position static- position 프로퍼티의 기본값 - 기본적으로 이 값을 지정할 일은 없지만 이미 설정된 position을 무력화하기 위해 사용 - 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치 relative- 기본 위치(static으로 지정되었을 때의 위치)를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동- 별도의 프로퍼티를 지정하지 않으면 static과 동일하게 동작 absolute- static 속성을 가지고 있지 않은 가장 가까운 부모를 기준으로 이동 - 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준 - absolute 선언 시, block 레벨 .. cookie / session-storage / local-storage session-storage - key-value 형태 - 브라우저 탭을 닫을 때 사라짐 - 모바일은 2.5mb, 데스크탑은 5mb~10mb의 용량 - window.sessionStorage local-storage - key-value 형태 - 수동으로 지우지 않는 이상 영구적 보관 - 모바일은 2.5mb, 데스크탑은 5mb~10mb의 용량 - window.localStorage cookie - key-value 형태 - HTTP요청시 사용자의 쿠키 정보가 서버로 전달 - 4kb의 용량 - 사용자의 로컬에도 저장되고, 매 HTTP요청마다 별도의 암호화 없이 전달 - 같은 도메인간에는 쿠키값 공유 컴퓨터공학 1주차 알고리즘, 자료구조 공부하는 이유 - 바이너리를 효율적으로 컨트롤하기 위해 Virtualbox - 오라클에서 만든 가상머신 솔루션 - 오픈소스 - 무료 가상머신 - 하드웨어를 소프트웨어적으로 구현해서 그 위에서 운영체제가 작동하도록하는 기술 가상머신을 사용하는 이유 - 다른 운영체제를 사용해야 하는 경우(맥OS에서 윈도우, 윈도우에서 리눅스) - 독립된 작업공간이 필요한 경우 (바이러스 회피, 백업) - 하나의 머신에서 여러명에게 운영체제 환경을 제공 HxD - 바이너리 에디터 플로피디스크 - 컴퓨터 보조 기억 장치 - 껍데기 안에 자성체로 덮여 있는, 회전할 수 있는 원판이 들어 있음 어셈블러 - https://meerkat9.tistory.com/16 참고 어셈블러(assembler)/ 컴파일러(compiler)/ 인터프리터(interpreter)/ JIT 용어- 소스(원시) 코드/프로그램 : 처음 작성된 코드/프로그램- 목적 코드/프로그램 : 변환된 코드/프로그램- 고급 언어 : 사람이 알아보기 쉬운 문법을 가진 언어- 기계어 : 0,1로 이루어진 컴퓨터가 알아 볼 수 있는 언어- 컴파일 : 원시코드에서 목적 코드로 옮기는 과정 컴파일러(compiler)- 빌드타임에 프로그래머가 작성한 모든 소스코드에 대한 기계어를 생성(번역)- 런타임에 빌드타임에서 생성한 모든 기계어를 기계로 보냄- 번역과 실행이 따로 이루어짐- 빌드 타임에 모든 구문 분석과 기계어 변환이 이루어지기 때문에 빌드가 느림- 런타임의 경우 특별한 과정이 없어 속도가 빠름- 운영체제에 종속적이므로 운영체제에 맞는 컴파일러가 필요- 대표적인 언어: C, C++⇒ 목적프로그램을 만들고 이 목적.. 가변단위 em / rem em- 부모 태그의 영향을 받는 상대적인 크기- 실제 사용된 요소의 폰트 크기에 비례⇒ 모든 요소가 자동으로 상위 요소로부터 폰트 크기를 상속받기 때문에 em 단위로 작업할 시 상속 관련 문제가 발생할 수 있음 EX 1⇒ wrapper클래스는 상위 요소인 html의 font-size를 상속 받아 16*1.5=24px가 되고 width는 이 요소의 font-size를 기준으로 24*3=72px이 된다.⇒ box클래스는 상위 요소인 div의 font-size를 상속 받아 24*1.5=36px가 되고 width는 이 요소의 font-size를 기준으로 36*2=72px이 된다. rem- 최상위(root) 엘리먼트 즉, html 요소의 폰트 크기를 기준으로 적용함 EX 2 generator generator- 함수이지만 일반 함수와는 다름- function* 키워드로 시작함- new 연산자를 사용할 수 없음- return 구문은 한번만 실행되지만 yield 구문은 여러번 실행됨- 호출해도 바로 실행되지 않고 멈춰진 제너레이터 객체를 리턴함- generator 객체의 .next() 메소드를 호출할 때마다 다음번 yield구문에 닿을 때 까지 실행- 첫번째 next()메소드에 인자를 넣으면 이 값은 무시됨- yield* 키워드를 사용하면 해당 yield가 실행될때 iterable Object를 순회함 EX 1⇒ sports 함수를 호출해도 함수 내부 블록이 실행되지 않으며 제네레이터 객체를 리턴한다 EX 2⇒ next() 메소드를 호출할 때 실행된다 EX 3⇒ next() 메소드의 첫번째 인자.. for of for of- 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야만 함 (직접 명시 가능)- for in 루프 구문은 객체들의 속성을 순회하고 for of 루프 구문은 data를 순회함- break, continue, return 사용 가능- String, Array, TypedArray, Map, Set, DOM node, 등 컬렉션을 반복할 수 있는 객체(iterable Object)를 반복 처리함 EX 1 이전 1 2 3 4 5 다음