HTML5
1.프런트엔드 개발자 학습 방향
(1) 유저가 App과 소통하기 위한 창구(User Interface, 이하 UI)를 사용하기 좋게 구현(2) UI는 상태 정보를 서버로 전송 + 서버의 데이터를 가져와서 UI에 표시(3) 디자이너, 백엔드 개발자와의 협업HTML태그, 속성, 시맨틱 웹CSS레이아웃,
2.HTML5 기본 문법
HTML : 웹페이지의 내용(contetnt) 과 구조(structure) 을 담당하고, HTML 태그를 통해 정보를 구조화하는 마크업 언어<!DOCTYPE html> : 문서 형식(Document Type)을 HTML5로 지정<html></html>
3.시맨틱 요소와 검색 엔진
대부분의 인터넷 사용자들은 검색 사이트를 통해 원하는 정보를 얻는다.웹사이트가 검색되기 위해서 즉, 검색 엔진에 노출되기 위해서 SEO(검색 엔진 최적화)같은마케팅 도구를 사용하여 본인의 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하기도 한다. 이것은 기본적으로
4.웹페이지를 구성하는 기본 태그
출력할 웹 페이지의 형식을 브라우저에게 전달문서의 최상위에 위치, 대소문자 구분 X모든 HTML 요소의 부모 요소웹페이지에 단 하나만 존재<!DOCTYPE> 제외한 모든 요소는 html 요소 내부에 기술글로벌 어트리뷰트 지원, 특히 lang 많이 사용메타데이터(H
5.텍스트 관련 태그
제목을 나타낼 때 사용<h1> ~ <h6>, 숫자가 클수록 중요한 제목검색 엔진은 제목 태그를 중요한 의미로 받아들이기 때문에 제목의 의미로만 사용 권장의미없는 bold체의미론적 중요성을 갖는 bold체의미없는 Italic체의미론적(중요,강조) 중요성을 갖는
6.HTML의 핵심 개념인 Hyperlink
Hyper : 텍스트 등의 정보가 동일 선상이 아닌 다중 연결되어 있는 상태\_\_Hyperlink : 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능<a> 로 수행이동하고자 하는 파일의 위치(경로)를 값으로 받음 파일 시스템 계층 구조의 최상단Unix:
7.목록(List)와 표(Table) 형식 표현을 위한 태그
주로 내비게이션 메뉴 만들 때 사용표를 만들 때 사용과거에는 레이아웃 구성에도 사용했으나, 모던 웹에서는 div 태그 사용https://poiemaweb.com/html5-tag-list-tablehttp://www.tcpschool.com/html-
8.이미지의 표현과 동영상, 음악 등 멀티미디어를 지원하는 태그
<img> : 웹페이지에 이미지 삽입HTML5에서 새롭게 추가된 태그, IE8 이하 지원 Xhttps://poiemaweb.com/html5-tag-image-multimedia
9.사용자와의 커뮤니케이션을 위한 폼 태그
사용자가 입력한 데이터를 수집하기 위해 사용input, textarea, button, select, checkbox 등의 입력 양식 태그와 함께 사용submit => input 태그에 입력된 데이터가 form 태그의 method 어트리뷰트 지정된 방식으로 action
10.웹페이지의 레이아웃을 구성하기 위해 공간을 분할하는 태그
과거에는 table 태그로, 모던 웹에서는 주로 div로 레이아웃 구성But, div 태그는 의미론적으로 어떠한 의미도 갖지 않음HTML5에서 새롭게 추가된 시맨틱 태그 사용 권장이와 같은 공간 분할 태그는 일반적으로 다른 요소를 포함하는 컨테이너의 역할