noopener, noopener 하이퍼링크 해당 앵커 태그에 target="_blank"을 자주 쓸 때가 있다. 하지만 이는 성능과 보안면에서 취약점이 발생한다. 새롭게 열린 페이지는 보조 브라우징 컨텍스트이기 때문에 , 자기 자신을 생성한 원본 브라우징 컨텍스트를 오프너 브라우징 컨텍스트라는 이름으로 참조하고 있기 때문에 원본 페이지와 동일한 프로세스에서 실행될 수 있다. - 보안상 취약하다. 링크된 페이지의 javascript에서 window.opener API를 통해 부모 윈도우를 참조하거나 window.opener.location의 값을 변경하여 부모 윈도우의 URL을 변경할 수 있다. 이렇게 부모 윈도우를 피싱 페이지로 변경하여 사용자의 개인 정보가 유출될 수 있기 때문에 보안상의 문제가 발생..

1. 객체 기본 객체는 사전적인 정의로 실제 존재하는 것을 의미함 1) 객체 생성: {}중괄호나 객체 생성자로 생성 const obj = {}; const obj = new Object(); 2) 객체 구조 사람 = { key: value} // 이 때 중괄호 안에 들어가는 key: value를 프로퍼티(property)라고 함 3) 객체 접근 점 표기범 : obj.key 대괄호 표기법 : obj[key] 사람. 성별 사람. 말하다() 2. 객체 응용 1) 객체 관련 함수 삭제 : delete obj.name; 프로퍼티 유무 : property1 in obj 반복 : for (변수 in obj) { // 변수를 이용한 코드 } 옵셔널 체이닝 : obj?.property?.subProperty 구조 분해 ..

함수 비슷한 코드가 반복해서 사용될 때 사용한다. 1) 함수 선언식 function 함수이름(매개변수 = 기본값) { // 코드 } 2) 함수 표현식 const 함수이름 = function(매개변수) { // 코드 } let a = 2; const makeNumber = function (value = 10000) { // 초기값 // 숫자가 아니거나 0보다 작으면 0으로 return, 넘겨진 value를 숫자형으로 만들어서 return if (value < 0) return 0; // early return let a = 1; // console.log(a); // 지역변수가 전역변수를 가림 const newValue = Number(value); return isNaN(newValue) ? 0 : n..

1. 미디어 쿼리 화면(screen), 티비(tv), 프린터(printer)와 같은 미디어 타입과 적어도 하나 이상의 표현식으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다. 미디어 쿼리는 1) link요소에 media 속성으로 적용하는 방법 2) 스타일 시트 내에서 @media를 사용하는 방법 @media screen and (max-width: 768px) { body { background-color: lightgreen; } } 미디어 타입은 스크린이고 화..

animation 사용시에 css 최적화 하는 방법 1. css핵 (translate Z or translate 3D)사용하기 하드웨어 가속을 활성화하여 대상이 되는 엘리먼트를 빠르게 렌더링 처리하는 방법 하드웨어 가속은 중앙처리장치(CPU)가 하는 일은 그래픽 처리 장치(GPU)가 분담하여 처리해서 컴퓨터의 성능을 최대한 끌어올리고 브라우저 렌더링을 빠르게 할 수 있게 한다. 일반적인 css animation, trnasform, traslation 속성에는 하드웨어 가속이 적용되지 않기 때문에 브라우저를 속여서 강제로 3D 처리를 하도록 브라우저에 지시해 하드웨어를 가속하는 방법 transform: translate3d(0,0,0); transform: translateZ(0) 하지만 이러한 방법은 ..

HTML/CSS과제를 끝내며 과제별로 하나하나 정리를 하면서 회고를 해볼까 생각을 하다가 아직 과제가 채점중이고 해설강의도 올라오지 않아서 혼자 다시 정리를 해봐야 똑같을 것 같다는 생각에 그냥 과제를 하면서, 그리고 끝내면서 느낀 생각들을 정리하려고 한다. 과제를 시작 하기전에 나는 강의도 충분히 들었다고 생각을 해서 HTML/CSS는 어려울게 없을것 같다고 생각을 했다. 하지만 내가 들은 강의들은 기초에 불과했고.... 그것들은 다 합쳐서 과제를 하려니 내 생각대로 되지 않는 것이 많았다. 유효성 검사에서부터 걸리기 시작하였다. 브라우저에는 정상적으로 보여서 문제가 없는 것 같았는데 유효성 검사에서 ERROR가 뜨기도 하고, 안될것 같았던데 되기도 하면서 의아한 부분이 있었다. 내가 제일 오랜 시간을..