본문 바로가기

언어/HTML & CSS35

[JS] 자바스크립트 기초- 스코프, 호이스팅, AJax , JSON, Fetch 란 ? ㅇ스코프란 ? (Scope) ㅡ 유효범위, 동일한 식별자 충돌 방지 ㅡ 변순 함수 선언 위치에 따라 스코프를 가진다. ㅇ 스코프의 종류 1) 전역 스코프 ( global scope . 전역 변수? 최상위 변수) : 어디서든 참조 가능하다 ㅡ let , const : 가장 바깥 단에서 재선언 할당이 안됨 . var는 다 가능함 2) 지역 스코프 ( local scope , 함수 또는 블록 안에 선언 된 스코프이다.) : 함수 내 정의 가능하고, 함수내에서만 참조 가능하다. 3) 함수 레벨 스코프 (함수 안에 선언한 변수 , 지역변수 이다 ) ㅡ 함수 외부에서 해당 변수 호출시 오류난다 . 4) 블록 레벨 스코프 ( 블록 { ...} 내에서 접근 가능한 변수) ㅡ let , const : 가장 바깥 단에서 .. 2024. 2. 25.
[IT] animation 최적화 기법 과 반응형 작업에 미디어 쿼리를 최소화로 잡는 방법 애니메이션을 구현하다보면 jank현상 (스크롤 떨림, 지연, 끊김 등)이 나타난다. 이를 해결하기 위해 css 에서 애니메이션 최적화가 필요하다. 1) GPU 가속 사용 will-change속성을 사용하면 css애니메이션을 보다 부드럽게 만들고 웹 페이지가 CPU대신GPU를 사용하여 애니메이션을 더욱 부드럽게 처리할 수 있다. 2) 애니메이션 시간제한 설정 애니메이션의 지속시간을 제한하면 브라우저가 애니메이션을 더욱 부드럽고 빠르게 처리 할 수 있다. 3) 픽셀 값 대신 퍼센트 값 사용 css애니메이션에서 픽셀 값을 사용하면 브라우저가 레이아웃을 다시 계산해야 한다. 따라서 퍼센트 값을 사용하면 브라우저가 더욱 빠르게 애니메이션을 처리할 수 있다. ㅇ T.. 2024. 2. 25.
[IT] CSS - box-shadow 그림자 넣기 (border 테두리 활용, 예제) ㅇ box-shadow 란 무엇인가 ? CSS속성 은 요소의 프레임 주위에 그림자 효과를 추가합니다. ㅇ 기본구조 box-shadow: x축 y축 흐림정도 그림자굵기 색상 ; ㅡ x 축으로의 이동이다 . ㅡ 음수도 가능하다. ㅡ 요소의 속성은 3개만 써도 되고 4개만 써도 된다. css 예제1 ㅡ 속성 3개 넣기 div { position: absolute; top: 100px; left: 400px; width: 100px; height: 100px; border: 1px solid red; box-shadow: 2px 10px 5px gray; } css 예제2 ㅡ 위의 코드에서 테두리 굵기 추가 box-shadow: 2px 10px 5px 5px gray; css 예제3 ㅡ inset 추가 div .. 2024. 2. 7.
[IT] HTML - noopener, noreferrer 사용법 정리 ㅇ 먼저 링크에 noopener noreferrer 사용하는 이유는 ? HTML에서 우리가 링크를 만들 때 태그를 사용한다 . 여기에서 href의 링크를 새창에서 열려면 target="_blank" 속상 값을 넣어준다. 이 때 보안상 취약점, 퍼포먼스 저하의 가능성이 있다는 것이다. ㅇ 그렇다면 어떻게 해줘야 할까 ? 이때 추가로 작성해야하는것이 noopener(노오프너) 과 noreferrer(노리퍼러) 이다. noopener : 링크된 페이지에서 window.opener를 사용하여 링크건 페이지를 참조할 수 없게 한다. noreferrer : 페이지 이동할 때 기존 페이지의 정보를 (HTTP헤더로 ) 송신하지 않는다. ㅇ 사용방법 요소 안에 rel=" " 속성을 이용하여 함께 작성해준다. rel=" .. 2024. 2. 6.

티스토리툴바