history API로 SPA 구현

history API브라우저는 페이지 로딩 시 세션 히스토리를 갖는다.세션 히스토리는 페이지를 이동할 때마다 쌓이며, 이를 통해 뒤로가기 시 이전 페이지로 가거나 뒤로 간 이후 다시 앞으로 가는 등의 이동이 가능하다.사용자가 페이지를 새로고침 하거나 뒤로가기/앞으로가기 버튼을 클릭하지 않아도, 웹 애플리케이션 내에서 프로그래밍 방식으로 페이지를 이동할 수 있다.`history.back()`: 브라우저의 '뒤로' 버튼과 같은 역할. 세션 기록에서 한 단계 이전 페이지로 이동`history.forward()`: 브라우저의 '앞으로' 버튼과 같은 역할. 세션 기록에서 한 단계 다음 페이지로 이동`history.go(n)`: 현재 위치에서 상대적으로 n페이지 만큼 앞이나 뒤로 이동. n이 음수일 경우 n 페이지..

2024.06.24

HTML5 새로운 폼 요소

1. input 요소 HTML5 에서는 강력한 form 속성을 지원한다. 때문에 어려운 스크립트 없이도 다양한 ui를 표현할 수 있다. 이메일 입력을 위한 email 리소스 주소 입력을 위한 url 일정한 범위의 숫자를 입력받기 위한 number * min - 범위의 최소 값 * max - 범위의 최대 값 * step - 벙뮈 이동의 크기 일정한 범위의 숫자를 입력받기 위한 range * min - 범위의 최소 값 * max - 범위의 최대 값 * step - 벙뮈 이동의 크기 날짜를 입력받기 위한 date 검색을 위한 search 전화번호 입력을 위한 tel 색상 입력을 위한 color 2. output요소 output 요소는 사용자가 입력을 받기 위한 요소가 아니라 서식에서 출역용으로 사용하는 요소이..

2021.11.11

HTML5 Multimedia - Audio Elements

1. Audio Elements - video elements와 비슷하다. - 별도의 플러그인 설치를 필요로 하지 않는 오디오 자료를 표시 - Control API 제공 src 오디오 자원의 경로 지정 사용시 생략 width 표시되는 요소의 넓이 height 표시되는 요소의 높이 controls 컨트롤 패널을 표시함 autoplay 로드되면 자동 재생함 loop 반복 재생함 / loop="3" type 오디오 코덱 정보를 지정 /* 크로스 브라우징을 위한 문법 */ Download bass.mp3 * 웹접근성 위배 - 소리가 있는 컨텐츠에 대한 autoplay - 소리가 있는 컨텐츠에 대한 loop 대표 브라우저 별 사용 가능 확장자 크롬 mp3 / ogg / wav 사파리 mp3 / ogg / wav ..

2021.11.11

HTML5 Multimedia - Video Elements

1. Video Elements - 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시 - Control API 제공 src 비디오 자원의 경로지정 사용 시 생략 width 표시되는 요소의 넓이 height 표시되는 요소의 높이 poster 포스터 이미지를 지정함 (영상이 없을 때, 시작 전에 보여지는 이미지) 영상의 크기와 동일한 크기의 이미지를 준비한다. controls 컨트롤 패널을 표시함 autoplay 로드되면 자동 재생함 loop 반복 재생함 / loop="3" type 비디오 코덱 정보를 지정 muted 비디오 사운드 제거 preload 영상을 로딩하면서 재생이 동시에 이루어짐 (필수) /* 크로스 브라우징을 위한 문법 */ Your browser is old. Download th..

2021.11.11

HTML5 시맨틱 태그 (Semantic Tag)

Semantic Tag? HTML5의 큰 특징 중 하나는 시맨틱 태그(Semantic Tag)다. 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공하게 된다. 기존에 사용하던 div 태그는 non-semantic Tag라 할 수 있다. table, article 등의 태그는 semantic Tag라 할 수 있다. 일반적으로 태그만 보고는 검색엔진이 이 태그 안에 들어간 내용의 의미를 알 수 없다. HTML5에서 사용되는 시맨틱 태그는 를 사용하여 검색엔진이 이 태그를 분석하여 내용의 의미를 유추할 수 있는 장점이 있다. non-semantic Tag 주로 div로 레이아웃을 표현하며, class와 id로 스타일을 준다. semantic Tag 의미있는 태그를 사용하여 검색엔진이 태그를 분석하여 유..

2021.10.07

HTML 기본 문법

HTML 기본 문법의 특징 1. 폴더와 파일명 : 영문(대/소) + 숫자 + _ + - (시작 문자는 꼭 영문이어야 함 ex. sample_1.html) 2. html/css/javascript 영문 대소문자를 구분한다. 3. html : 무조건 영문 소문자로 마크업한다. 4. 대다수의 태그들은 열고 닫는 세트로 되어있다. (태그의 계층, DOM, 부모/자식의 관계) 5. 태그들은 계층 (부모/자식)을 표현할 수 있다. (Tab) 6. 모든 웹문서(파일명.html)는 하나의 을 최상위부모로 가진다. 주언어 정의 7. : 화면에 보여지는 부분 이외의 것을 명시(코드명시/CSS 또는 js파일을 연결) 8. : 웹페이지의 본문을 처리하는 태그(화면 UI 구현) 9. 사이트제목 10. : 본문의 코드를 처리하기..

2021.10.05