a 태그에 rel="noopener noreferrer" 속성을 추가하는 이유

noopener & noreferrer 속성 추가하는 이유✔️ a 태그href 속성을 통해 다른 페이지로 연결할 수 있는 하이퍼링크를 만든다.그냥 사용할 경우 target이 _self (기본값)라서 url을 현재 브라우징에 표시한다.하지만 target="_blank" 로 지정할 경우 새로운 브라우저(새 탭)에 표시한다.// a태그 활용 (target X)그냥 열기// a태그 활용2 (target은 _blank)새 창으로 열기 이렇게 새로운 브라우저에 표시하게 되었지만rel 지정 없이 사용하게 되면 웹사이트가 window.opener API 악용 공격에 취약해진다. 새로 열린 페이지는 원본 페이지를 참조하고 있기 때문에 window.opener 에 의해 부분적으로 액세스 하여 피싱 페이지로 변경될 수 있다..

  • format_list_bulleted 🧠 저장/HTML&CSS
  • · 2024. 5. 17.
  • textsms
css flex 활용 포토박스 만들기 (+명시도)

css flex 활용 포토박스 만들기 (+명시도)

🍕 CSS의 flex이러한 포토박스를 만들어보려고 한다. 일단 12개의 div가 필요 이렇게 만들어도 되지만 .. 만약 사진이 점점 늘어나는 구조라면 ..? 사진이 막 100000장이라면 ??? 그렇다면 스크립트를 활용해보자 const box_arr = [ ["img_01.jpg", "Port-1"], ["img_02.jpg", "Port-2"], ["img_03.jpg", "Port-3"], ["img_04.jpg", "Port-4"], ["img_05.jpg", "Port-5"], ["img_06.jpg", "Port-6"], ["img_07.jpg", "Port-7"], ["img_08.jpg", "Port-8"], ["img_09.jpg", "Port-9"], ["img_10.jpg", "Port..

  • format_list_bulleted 🧠 저장/HTML&CSS
  • · 2022. 9. 6.
  • textsms

css 선택자, 미디어 쿼리

⎷ CSS - 인라인 스타일 방식 테스트 목적으로 적용.. 이렇게 쓰면 겁나 지저분함! - 외부 스타일 방식 훨씬 효율적이고 간단함! - 임베디드 스타일 태그에 넣기 하나의 html에서만 적용할때 ⎷ CSS 의 선택자 전체 선택 * - 클래스 선택자 . 여러번 사용 - 아이디 선택자 # 단 한번 사용 - 복합 선택자 : 하위 선택자 or 자식 선택자 하위 선택자 : 누구의 자식 → 상위 선택자 자식 선택자 : 누구의 자식이면 전부 → 상위>선택자 - 속성 선택자 : 태그안의 속성 → 선택자[속성=“값”] - 가상 클래스 선택자 : 가상의 선택자를 지정, 링크 or 동적 링크 선택자 : 선택자:link, 선택자:visited 동적 선택자 : 선택자:active, 선택자:hover 우선순위 인라인 > 임베디..

  • format_list_bulleted 🧠 저장/HTML&CSS
  • · 2022. 8. 16.
  • textsms

html 동영상 가져오기 (IFRAME, VIDEO)

⎷ HTML 요소, 태그, 속성, 변수 태그 : 전체 html 소스코드를 구성함 속성 : 태그의 성질을 정해줌 align 같은거 변수 : 실질적인 값 thead tbody는 테이블에서 표의 제목이랑 내용부분 나눌때 .. form 태그 : 입력을 받기 위한 양식을 표현하기 위해 사용 method 속성 : 데이터를 전달하는 방식 action 속성 : 데이터를 전송할 url 정하기 비번같은거 전송할땐 post IFRAME 태그 : 외부의 웹 문서를 현재의 문서로 가져올때 (유튜브 영상 가져오기) VIDEO 태그 : 동영상 가져올 수 있음. 하지만 CONTROLS 속성을 추가해줘야 재생 컨트롤바가 생김

  • format_list_bulleted 🧠 저장/HTML&CSS
  • · 2022. 8. 3.
  • textsms