210510 anchor 태그에서 target="_blank" 속성의 보안적 문제
anchor 태그에 연결되어있는 페이지를 새로운 창에 열고자 할때 속성에 target=”_blank”를 넣어주는데, 보안적으로 문제가 있다. 바로 Tabnabbing이라는 공격의 위험성이 있다는 것이다.
Tabnabbing이란 HTML 문서 내에서 링크를 클릭했을때 새롭게 열린 탭이나 페이지에서 기존 문서의 location을 피싱 사이트로 변경해서 정보를 탈취하는 공격기술을 말한다.
이 공격은 이메일이나 커뮤니티에서 쉽게 사용될 수 있기 때문에 주의해야 한다.
따라서 anchor 태그에 target=”_blank” 속성을 넣어 줄 때에는 반드시 rel="noreferrer noopener"라는 속성을 같이 넣어서 취약점을 보완해야 한다.
210417 Mobile first 방식의 이점과 간단한 HTML 마크업과 CSS 스타일링 예시
이번 포스팅에서는 모바일 우선(Mobile-First) 웹 디자인에 대해서 정리를 하려고 한다.
요즘 간단한 화면의 구성요소들을 모듈형태로 나눠서 프로젝트식으로 만들어보고 있는데, 모두 Mobile-first 방식으로 웹 디자인을 하고 있다.
이전에 반응형 웹 페이지를 만들때는 아무 생각없이 처음에 Desktop 기준으로 웹 페이지를 디자인하는 경우가 많았는데, 모바일 우선 방식으로 웹 페이지를 디자인 하는 것이 더 효율적이라는 것을 알게 된 후부터는 시작할때 모바일 기준으로 HTML 마크업을 하고 CSS 스타일링을 하고 있다.
이번 포스팅에서는 왜 모바일 우선으로 웹 페이지를 디자인해야 되는지에 대해서 공부한 내용을 기반으로 내용을 작성해보려고 한다.
우선 Desktop과 Mobile의 사용률을 보았을때 2014년도를 기점으로 Mobile 사용률이 Desktop 사용률을 넘어섰다. 단순히 이러한 사용률만의 문제가 아니라 모바일 우선 방식으로 웹 페이지를 디자인했을때 생기는 이점들에 대해서 정리를 해보겠다.
우선 첫 번째, 구글은 Mobile-First Index를 사용한다. 구글은 우리가 모두 다 아는 대규모 검색 엔진으로 구글이 모바일에 올인하고 있다. 구글의 검색 알고리즘이 모바일 버전 사이트의 콘텐츠를 사용하여 해당 사이트의 검색 노출 페이지 순위를 매긴다는 의미이다. 만약 본인이 개발한 웹 페이지가 구글에서 많이 노출되길 원한다면 웹 페이지를 모바일 우선 방식으로 디자인하는 것이 좋다.
두 번째, 좋은 사용자 경험(UX)을 줄 수 있다. 일반적으로 모바일 사용자는 빠른 웹 사이트 로드를 기대한다. 만약 웹 페이지가 모바일 우선 방식으로 디자인이 되어있다면, 모바일 사용자가 초기에 웹 페이지를 로드했을때 빠르게 페이지가 로드되어 사용자에게 좋은 경험을 줄 수 있다.
세 번째, 빠른 웹 사이트를 만들 수 있다. 두 번째 이점과 거의 같은 맥락의 이야기지만, 모바일 화면에서 보여지는 페이지의 요소는 상대적으로 데스크탑 웹 페이지에 비해 화면에 보여지는 요소가 적다. 만약 반응형 디자인으로 페이지가 디자인되어 있고, 모바일에서 해당 웹 페이지를 로드한다면, 초기에 로드되어야 하는 화면의 요소가 데스크탑 기준으로 우선 로드되고, 미디어 태그로 조건 처리된 모바일 기준 스타일이 다음으로 적용되어 상대적으로 느린 웹 페이지 로드를 보여 줄 수 있다.
우선 flex에 대해서 알아보기 전에 classic한 방식으로 block 요소를 배열하는 방법에 대해서 간단하게 알아보자.
왼쪽은 display 속성이 block인 요소의 배열을 나타낸다. 배열의 형태에서 유추해 볼 수 있듯이 block요소의 옆에는 어떠한 element도 올 수 없다. 그럼 div 요소의 display 속성을 inline-block으로 바꾸게 되면 어떻게 될까?
바로 오른쪽 캡쳐와 같이 일렬로 배열되는 것을 확인할 수 있다. inline-block으로 display 속성을 바꾸게 되면, 서로 옆으로 정렬된 형태로 box들이 정렬된다.
|
|
inline은 유동적이기 때문에 너비와 높이가 없는 요소 이다. 대표적인 inline 요소는 anchor 태그가 있다.
이전에 2월달에 React 관련 사이드 프로젝트를 진행하던 도중에 HTML 시맨틱 태그 구조에 대해 의문이 생겼었다. 화면에는 제대로 랜더링 되어 예상했던 화면이 출력은 되었지만, 과연 이렇게 HTML 시맨틱 태그를 작성하는 것이 맞는 것인가하는 의문은 쉽게 머리속에서 사라지지 않았다.
그러던 중에 우연치 않게 현재 수강하고 있는 수업의 커리큘럼 상 뒷쪽에 배치되었던 HTML/CSS 수업이 앞쪽으로 당겨지면서 Python 수업 다음으로 HTML/CSS 수업을 듣게 되었다.
정말 절묘한 타이밍에 수업을 듣게 되어 내가 기존에 화면의 레이아웃을 구성하면서 들었던 의문 중에 거의 대부분이 해소되었다.
그래서 이제는 좀 더 정돈된 마음으로 프로젝트를 진행해 볼 수 있을 것 같다는 생각이 들었다.
