전체 글83 [IT] CSS - 애니메이션의 모든 것 ! (transform 속성) ㅇ transform - a에서 b로 변형시킨다 (상대적으로 속도가 빠르다.) ㅇ animation 속성 ㅡ 대표적인 CSS wiggle 애니메이션 ㅡ animation : 행동 시간 반복 ; ㅡ @keyframes 행동 { } ㅇ 마우스 움직임 추적하기 ( 사용자의 마우스 기준 ) window에 이벤트 걸어주기 !!! window.addEventListener("mousemove", 마우스추 x.innerHTML = event.clientX; offsetWidth 패딩,테두리 포함 clientWidth 순수 html의 width 크기만 계산 안녕하세요 마우스움직임 x: y: window.addEventListener("mousemove", 마우스추적); var x = document.querySelec.. 2024. 2. 21. [IT] HTML과 CSS - Font를 Preload 하는 방법 !! (폰트 최적화) 웹 폰트 죄거화하는 방법에 대해 알아보자. 먼저 로컬폰트와 웹폰트는 무엇일까 ? ㅇ로컬 폰트란 ? 사용자의 컴퓨터에 이미 설치되어 있는 폰트이다. 운영체제에 의해 제공된다. ㅇ웹 폰트란? 웹 폰트는 웹 페이지에서 사용되는 폰트를 온라인상에서 다운로드하여 쓸 수 있는 기술이다. ㅡ장점 ㅡ 모든 사용자가 일관된 환경에서 일관된 디자인을 경험 할 수 있다. ㅡ 웹 페이지에서 고유하면서도 다양한 폰트를 사용할 수 있게 되었다. ㅡ 사용자가 미리 시스템을 설치하지 않아도 사용이 가능하다. ㅇ단점 ㅡ 웹 페이이지의 성능을 낮춰서 사용자 경험을 해칠 수도 있다. ㅇ 웹 폰트가 동작하는 방식 ㅡ 온라인상에서 폰트 파일을 다운로드해서 사용하게 된다. ㅡ 페이지 접근 > 브라우저가 HTML을 요청> 웹 서버 or 다른 서.. 2024. 2. 14. [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. 이전 1 2 3 4 5 6 7 ··· 21 다음
