시맨틱 마크업부터 시작해보자

구름 딥다이브 프론트엔드 과정 1일차!

오늘 첫번째 시간으로 언제나 그렇듯이 시작은 HTML 수업이였다!

 

배운내용

1. HTML 기본구조

 - 이건 너무 잘알기에.....따로 적어야할까...?✨

 

2. 시맨틱 태그

- 대부분 잘알고있다고 생각했지만 강사님께서 올려주신 아티클을 보고 아차싶었다.
예전에 실무할때도 input타입에 button을 쓰는사람이 있고, button태그를 쓰는 사람이 있는 등 제각각 이였는데
button태그를 쓰는것과 동시에 타입에 button 쓰는것도 잊지말아야겠다!

https://nykim.work/96

버튼에 타입을 쓰는 이유 (button type="button")

 

실습과제

오늘 배운 태그 5개 이상 활용해서 자기소개 사이트 만들어보기

좌: html, 우: css

 

 

1. 시맨틱 마크업

- b 아니고 strong, i 아니고 em

- 레이아웃구성할때 아무의미없는 div태그를 남발하기보다 header,section,aticle,aside,footer 시맨틱하게 짜자

참고문서

https://brunch.co.kr/@tigrisdesign/7

알아두면 쓸모 있는 시맨틱 마크업

 

2. a태그 _blank rel속성 추가하기

- 새창으로 열기로 설정할 때에는 rel="noopener noreferrer"을 붙여주는게 좋다

- 원본페이지를 피싱해서 보안문제가 생기기 때문!

 

참고문서

https://taylog.tistory.com/231

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

실습결과

다음엔 2배속으로 올려야겠다,,,,,

 

nav 메뉴들이 새창으로 열리는것은 UX 관점에서 좋은 접근은 아니지만

오늘은 최대한 시맨틱하게 만들어보는것이 목표였기때문에,,,어쩔수없었다

Lighthouse 플러그인을 설치해서 Accessibility(웹접근성)과 Best Practices(웹표준) 100점을 받았다!! 🎉

 

 

오늘의 한줄

대부분 HTML 잘알고있다고 생각햇는데 a태그 새창으로 열때 보안문제가 있다는건 오늘 처음알았다

(나....HTML배운지 20년된 사람...ㅎ....)

기억하자!

<a href="..." target="_blank" rel="noopener noreferrer”></a>

+ 크롬에서 이제 _blank로 열면 noopener 옵션을 자동으로 붙여준다고 하니 noreferrer만 붙이면 된다구 한다!