HTML 썸네일형 리스트형 target="_blank"를 아무생각 없이 쓰면 안되는 이유 HTML 마크업을 작성하다 보면 새창 열기 기능을 위해서 다음과 같이 작성하는 경우가 많습니다. 겉보기에는 새창도 잘 열리고 아무 문제가 없는 것 같지만, 이렇게 작성하면 tabnabbing 피싱 공격에 노출됩니다. 이런 문제가 있기 때문에 MDN에서도 target을 사용할 때, rel="noreferrer noopener"를 추가해 window.opener API의 악의적인 공격을 방지하라고 권고하는 내용을 찾아볼 수 있습니다. Tabnabbing이란 target="_blank"에 의해 열린 새 페이지에서 window.opener.location을 변경하여, 기존 페이지를 피싱 페이지로 변경해 사용자 정보를 탈취하는 것입니다. 이러한 피싱이 가능한 이유는 기본적으로 새 탭을 열면 현재 탭을 열었던 탭의.. 더보기 CSS 가상 클래스 셀렉터 :nth-child와 :nth-of-type의 차이점 종종 헷갈리는 CSS 가상 선택자 :nth-child와 :nth-of-type의 차이점에 대해서 알아보겠습니다. 예를 들어 다음과 같은 HTML 코드가 있습니다. Lorem ipsum dolor nth-child와 nth-of-type을 이용해서 ipsum라는 텍스트의 색상을 흰색, 배경을 노란색으로 변경해보겠습니다. :nth-child nth-child는 부모 요소의 n번째 자식 요소를 의미합니다. 이번 예제에서는 p:nth-child(2)라고 입력했으니 p 태그의 부모 요소를 기준으로 두 번째 자식 요소에 해당하는 ipsum를 지칭합니다. See the Pen nth-child by hogni-seoul (@hogni-seoul) on CodePen. :nth-of-type nth-of-type은 부.. 더보기 CSS 가상 셀렉터(Pseudo Selector) :active, :hover, :focus 가상 선택자(셀렉터)를 이용하면 HTML 요소의 상태에 따라서 해당 요소의 스타일을 다르게 적용할 수 있습니다. 대표적인 것이 hover, active, focus입니다. 아래의 예제처럼 사용할 수 있습니다. :hover 가상 셀렉터 :hover를 이용하면 마우스가 해당 요소 위에 있을 때 요소의 스타일 변경할 수 있습니다. 밑에 보이는 예제의 입력창에 마우스를 올려놓으면 색깔이 변경되는 것을 볼 수 있습니다. See the Pen :hover by hogni-seoul (@hogni-seoul) on CodePen. :active 가상 선택자 :active를 이용하면 사용자의 마우스가 해당 요소를 클릭하는 순간부터 떼는 순간까지 요소의 스타일 변경할 수 있습니다. 아래 예제의 입력창을 클릭해서 마우스를.. 더보기 이전 1 다음
