IT 정보10 [IT]noreferrer, noopener, nofollow 무엇인가 ? - 보안이슈, SEO [noreferrer, noopener, nofollow] 해당 속성 등을 사용하는 이유와 보안 이슈에 대해 처리하는 방법, SEO에 연관되는 방법 등에 대해 작성 웹 사이트를 개발할 때 외부 링크로 연결해야 할 때 링크 태그에 noreferrer, noopener, nofollow를 사용할 수 있다. 이 속성들은 무슨 역할을 하고 왜 사용할까요? ㅡ target="_blank" 의 보안 취약점 해결하기 : 링크 태그에 해당 속성을 사용하면 보안 문제가 발생한다. 악의적인 웹사이트가 피싱 공격을 시도할 수 있다는 것 ! 먼저 브라우징 컨텍스트의 상호 관계가 있다. ㅡ 보조 브라우징 컨텍스트 (Auxiliary Browsing Context) "_b.. 2024. 2. 24. [IT} Flex와 Grid의 차이점 간단하게 요약!! CSS에서 레이아웃을 구성하는 두가지 방법이 있다, 그것이 바로 Flex와 Grid 이다. 1) Flex ㅡ 일차원적인 레이아웃 ( 유연하다) ㅡ x축과 y출에 따라 아이템들을 배치하고 정렬한다. ㅡ 크기와 간격이 자동조절 가능 ㅡ 반응형 웹 디자인에 적합하고, 단순한 레이아웃에 사용하기 좋다. 장점 : 유연하고, 간단한 레이아웃 구성가능 , 반응형 웹디자인에 적합 단점 : 복잡한 레이아웃 구성 어려움 , 일차원적인 레이아웃만 가능하다. 2) Grid ㅡ 이차원적인 레이아웃 ㅡ행(rows)과 열(columns)로 이루어진 격자 모양의 레이아웃을 제공한다. ㅡ 복잡한 레이아웃에 사용하기 좋으며, 아이템들의 위치와 크기를 정확하게 지정할 수 있다. ㅡ 픽셀 단위 뿐만 아니라 fr(분수)단위나 repeat().. 2024. 2. 24. [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. [입문] Git / Github - ISSUES * ISSUES ㅡ 이슈는 프로젝트의 작업, 개선사항, 버그를 추적하고 커뮤니티케이션 할 수 있는 Github 에서 제공하는 기능 1. 탬플릿 설정 하고나서 commit 하기 !!! 2. issue 적기 3. 리뷰가능 * Markdown ( Github에서 Markdown 문법 방식으로 사용된다, issue 등록때 가능 ) ㅡ Markdown 이란 ? 일반텍스트 형식의 문서의 양식을 편집하는 문법이다. HTML로 변환이 가능하다. 쉽다. ㅡ Markdown 태그의 종류 문법이 따로 있다. https://www.markdownguide.org/ Markdown Guide A free and open-source reference guide that explains how to use Markdown. ww.. 2024. 1. 16. 이전 1 2 3 다음
