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 태그가 있다.
210305 HTML/CSS TIL - 키워드 작성완료(세부내용 작성 예정)
Read more210304 HTML/CSS TIL - 키워드 & 세부내용 작성중...
오늘은 HTML/CSS 여덟번째 수업날이었다. 오늘도 새로운 것에 대한 배움에 즐거운 하루였다.
이번 수업의 시작은 반응형 웹 디자인을 실습하기 전에 반응형 웹과 관련된 이론적인 부분에 대해서 살펴보았다. 내용의 시작은 적응형과 반응형 웹에 대한 내용이었다.
이전에 개인적으로 네이버 포털사이트의 도메인 주소가 모바일에서는 m.으로 시작되고 데스크탑의 웹 주소에서는 www.으로 시작되는 것에 대해서 강사님께 질문을 했던 적이 있는데 이는 네이버에서는 적응형으로 어플리케이션을 개발했기 때문이다. 적응형은 각 플랫폼에 맞게 개별화된 웹 어플리케이션을 만드는 것을 의미하고, 반응형의 경우에는 하나의 코드에서 스타일링만 다르게 적용해서 화면 사이즈에 따라 다르게 콘텐츠의 구조를 출력해주는 것을 말한다.
210303 HTML/CSS TIL - 키워드 작성완료(세부내용 작성 예정)
오늘은 HTML/CSS 일곱번째 수업날이었다. 오늘도 많은 유익한 내용들을 배울 수 있던 날이었다.
(Feedback)반응형 네이버 로그인 페이지 구현 및 웹 표준 & 접근성에 기반한 취약점 분석 및 개선안 적용
프로젝트 Repository : https://github.com/LeeHyungi0622/responsive-naver-login-page-with-web-standards-and-accessibility
이번 3.1절 연휴때 했던 과제에 대해서 어제(03월 02일) 데레사 강사님으로부터 피드백을 받았다. 어제 속이 별로 안좋아서 밥을 안먹고 있다가 마침 강사님이 계셔서 과제에 대한 피드백을 부탁드렸었는데 흔쾌히 해주시겠다고 하셔서 너무 감사했다. 쉬셔야 되는 시간인데 이렇게 소중한 시간을 내주셔서 피드백을 주신 강사님께 다시 한 번 감사의 말씀을 드리고 싶다.
자 그럼 어제 받은 피드백에 관한 내용을 정리해보자.
과제를 수행하는 것도 중요하지만 받은 피드백을 통해 어느 부분이 개선이 필요한지 파악해서 내 것으로 만드는 것이 중요하다.
main 태그에 바로 form 태그를 넣어줘도 되지만, form 태그를 section이나 div 태그로 한 번 감싸서 넣어주도록 하자. 그리고 main 태그에 heading 태그를 넣어서 주도록 하자.
오늘은 HTML/CSS 여섯 번째 수업날이었다. 오늘도 많은 유익한 내용들을 배울 수 있던 날이었다. 이 모든 것들을 내 것으로 만들기 위해 끊임없이 노력하자.
이 내용에 대해서는 HTML/CSS 수업 초반에 강사님께서 강조해주셨던 내용이다. 지금은 개인적으로 레이아웃 설계 연습을 할 때도 항상 되뇌이면서 연습을 하고 있다. 오늘 이 부분에 대해서 강사께서 어쩌면 실무에서 일을 하면서 이러한 콘텐츠의 논리적 순서를 고려하지 않고 레이아웃을 단순 디자인적 관점에서 보게 될 수도 있고, 상황에 따라서는 타협을 해야 될 때가 온다고 하셨다. 이럴때에는 최소한의 접근성을 고려해야 되는 요소만은 지켜서 레이아웃을 설계하면 된다고 하셨다.
콘텐츠의 논리적 순서 → 시맨틱 마크업 → Class 네이밍
반응형 네이버 로그인 페이지 구현 및 웹 표준 & 접근성에 기반한 취약점 분석 및 개선안 적용
프로젝트 Repository : https://github.com/LeeHyungi0622/responsive-naver-login-page-with-web-standards-and-accessibility
프로젝트 진행기간 : 🗓️ 2021.02.28(Sun) ~ 2021.03.01(Mon) (2일간)
