[개발자의품격][부트캠프][1기][1차시] HTML 주요 포인트

[ 영광의 시대!/2022 개발자의 품격 부트캠프 1기 ]

2022년 01월 07일 12시 33분 59초에 업로드 된 글입니다.

작성자: DandyNow

728x90

HTML 주요 포인트

이 페이지에 정리된 내용은 HTML 첫번째 수업의 전체가 아닌 일부분에 해당한다.

개인적으로 다시보고 기억하고 싶은 주요 포인트만 담았다.

여기에는 포함되어 있지 않지만 GitHub Desktop과 VS Code를 이용한 Git관리는 매우 유용했다.

Git을 처음 접했을때 CLI에서 따라했던 기억이 있어 난해하게 여겨졌었는데, GUI에서 쉽게 커밋했다!

tag 와 element

<>는 tag이다. tag를 이용해서 요소(element)를 만든다.

tag는 블록 요소(block element)와 인라인 요소(inline element)로 구분된다.

empty element

<img src="" alt="" >

empty element : 요소를 가지고 있지 않으므로, 시작 tag만 있고 종료 tag는 없다.

img tag에서 alt를 신경쓰는 개발자가 좋은 개발자이다. 사용자를 배려하는 마음 때문이다.

img tag 안에 style을 줄 수 있다. 이것을 Inline style 이라고 한다.

웹 접근성의 중요성

lang = 'en'

검색엔진의 접근 위한 정보 제공(잘 사용하면 검색엔진에 더 잘 노출 될 수 있음)
스크린 리더가 웹 접근성을 고려하여 읽기 때문에 시각장애인을 위한 원활한 음성 지원 가능
<h1> 검색엔진에서 제목으로 중요하게 여김, <div>로 유사하게 보이도록 만들 수 있지만 검색엔진은 구분함
웹 접근성을 지키지 않으면 유사한 모양이라고 하더라도 좋은 페이지가 아님
웹 접근성을 지키지 않으면 검색엔진에 노출될 확률이 줄어들며, 장애인을 위한 배려도 아님
html5부터 웹 접근성을 위한 새로운 tag들이 많이 추가 되었음
웹접근성은 반드시 별도로 공부해야 함

자동 완성된 <head> tag에 대한 설명 중

<head> tag의 <meta name="viewport" content="width=device-width, initial-scale=1.0" />은 디바이스 사이즈에 웹 width를 맞추는 역할을 함

HTML공식문서

https://www.w3schools.com/

Github 사용팁

Github 에 Prefix 사용을 권장함.

Prefix 표기는 회사별로 정해둔 방식이 존재할 수 있음.

예) [ADD] 신규 파일 추가

그 밖의 언급된 내용

Top Web Design and UI Trends for 2022(https://designmodo.com/web-design-trends-2022/)에서 웹프론트엔드 최신 기술을 엿볼 수 있다.

검색엔진최적화(search engine optimization, SEO)를 위해 Lighthouse 활용 할 수 있다.

※ 수업 중 Lighthouse에 대한 구체적인 언급은 없어고 궁금해서 찾아 보았다.

728x90

저작자표시 비영리 변경금지

'영광의 시대! > 2022 개발자의 품격 부트캠프 1기' 카테고리의 다른 글

[개발자의품격][부트캠프][1기][7차시] JavaScript 주요 포인트 #3 \| 조건문, 반복문, 함수 \| 내장 객체 String, Number (0)	2022.01.26
[개발자의품격][부트캠프][1기][6차시] JavaScript 주요 포인트 #2 (0)	2022.01.21
[개발자의품격][부트캠프][1기][5차시] JavaScript 주요 포인트 #1 (0)	2022.01.20
[개발자의품격][부트캠프][1기][2~4차시] HTML부터 CSS까지 - CSS 주요 포인트 (0)	2022.01.15
[개발자의품격][부트캠프][1기][2~4차시] HTML부터 CSS까지 - HTML 주요 포인트 (0)	2022.01.14

다음글이 없습니다.

이전글이 없습니다.