Amazing Story

기존 HTML과 HTML5의 가장 큰 차이는 다음과 같습니다. 1. 새로운 구조요소 추가(시멘틱마크업이 세분화됨)2. 자바스크립트가 공식 스크립트 언어가 됨3. canvas 그림그리기 기능추가4. 하드웨어 컨트롤 기능추가 그 중에서도 중요한 건! 바로 시멘틱(Semantic)마크업입니다.그림과 표로 한 번 살펴보겠습니다. ■ HTML5 레이아웃 요소- header : 헤딩요소- main : 웹 사이트 주요 콘텐츠- footer : 푸터요소- nav : 메뉴요소, gnb, lnb- section : 콘텐츠를 묶는 의미적 그룹요소- article : 독립적으로 배포/재사용이 가능한 요소 => 뉴스, 게시물- sidebar : 주요콘텐츠와 내용이 관련이 없으며 분리가 가능한 요소 : 퀵메뉴 ■ 기존 구조와 H..

10. 멀티미디어 태그 (1) 비디오 태그■ 기본 형식 1 ■ 다른 형식 12345 Your browser does not support the video tag. - controls 속성은 비디오의 컨트롤바를 보게게해주는 속성으로 사용하지 않으면 컨트롤바가 표시되지 않음. 현재 대부분의 브라우저에서 .mp4포맷의 영상을 디코딩하는 코덱을 지원하긴 하나, 해당 코덱을 지원하지 않는 브라우저에서는 영상을 재생할 수 없음. (2) 오디오 태그■ 기본 형식 1 ■ 다른 형식 12345 Your browser does not support the audio tag. - 비디오와 오디오태그의 속성은 거의 비슷하다. 경로를 정확히 작성할 경우 실행이 되나, 경로를 작성을 제대로 못할 경우와 파일의 코덱이 잘되지 않..

9. Group tag(그룹태그)- 그룹태그는 div, span 요소가 있음. 블록요소 div요소로 그룹지으며 인라인 요소는 span을 사용한다. - 웹사이트 제작시 콘텐츠를 논리적으로 분류하지 않음- 작성하였을 시, 브라우저 상에 변화없음 ■ div 12345678910111213141516171819div 태그 사용 예시 사이트 로고 전체 메뉴 메뉴1 메뉴2 메뉴3 메뉴4 사이트 로고 사이트 주소 및 저작권 표시 ■ span 12span 태그 사용 예시제 이름은 대한민국입니다. ★ 블록 VS 인라인 개념정리 ★- block (블록) : 브라우저 상에서 줄바꿈 되어 표시되는 블록 요소 1234block내용1내용2내용3 EX) 블록 태그 예시 - h1 ~ h6 - p - ol li , ul li - dl..

8. Form tag(양식태그)웹문서에서 사용자에게 데이터를 받는 요소들을 (인터랙티브 요소들) 양식요소라고 한다.양식태그는 html사용시 구조만 표현하며 동작은 스크립트로 구현해야 한다. (1) 기본구조form : 폼의 시작과 끝 => 브라우저 상에 표시되는 건 없음fieldset : 개별 폼요소에 대한 그룹핑 => 브라우저에 사각 테두리로 표현됨legend : 필드셋에 대한 그룹이름 => 필드셋 테두리 좌측 상단에 표시label : 폼요소의 이름부여 1234567기본형 검색 (2) 양식태그 종류 : input, label, select, textarea, button 등1) input사용자에게 데이터를 입력받는 박스를 생성 ■ input 기본속성=> 종료태그가 존재하지 않음 ■ type 속성 => i..

7. Table표는 table로 정의하고 tr, td(th)로 표현 1234567891011121314151617181920212223242526기본형1 콘텐츠 기본형2 콘텐츠1 콘텐츠2 기본형3 칸1 칸2 칸3 칸4 1) 표의 제목 달기표의 제목은 caption을 사용하고 table과 첫번째 행 사이에 입력한다. 123456표제목 칸1 2) 제목셀 만들기제목셀을 표현하는 경우 td대신에 th를 사용.제목셀은 가운데 정렬, 볼드체로 표현. 1234567표제목 제목 내용 3) 셀병합하기셀을 합칠 때는 colspan, rowspan 속성을 셀에 작성.셀을 나누는 태그나 속성은 따로 존재하지 않음 1234567891011병합 1 2 2 3 ■ 셀병합시 조건- 행을 더할 때- 열을 더할 때- 행과 열을 더할 때..

5. anchor 태그 (링크 태그) 링크는 a태그를 사용하고, 시작태그와 종료태그로 구성된다. 링크태그는 링크를 구현할 콘텐츠를 a태그로 감싸서 표현. 주요속성은 href, target, title 등이 있다. (1) 기본구조 1콘텐츠 - a태그로 감싸진 텍스트는 밑줄, 글자색상이 바뀜- 마우스 커서 모양이 바뀌며 클릭 가능함 (2) 속성 ■ href(hyper reference) => 참고 대상을 작성1) URL2) 파일(한글, 엑셀, 이미지, PDF 등)3) 이메일4) 가상링크 ■ target => 참조대상을 띄울 창의 위치를 설정1) _self(자신의 창에서 띄움) => 자신의 사이트에서 이동하는 경우 => 기본값으로 생략가능2) _blank(새창 띄우기) => 다른 사이트 이동시 ■ title ..

1. title tag (웹문서의 제목을 작성 -> 브라우저의 제목표시줄에 나타난다. 사이트의 전체의 의미를 알수 있게 간단히 작성) 2. heading tag (제목 태그)- h1, h2, h3, h4, h5, h6 을 사용한다. (1) 기본구조 1content h => heading 제목이라는 의미를 갖고 h뒤의 숫자는 제목수준을 표현 한글문서에서 제목수준의 표현은1. => h11) => h2(1) => h3가. => h4가) => h5(가) => h6 (2) 규칙가. 잘못된 표현의 예 123제목 제목 제목 나. 올바른 표현의 예 : 제목태그는 브라우저에서 표현시 굵은 글씨로 표현하고 제목수준에 따라 글자크기가 다르게 표현 123제목태그 - 가장 큰 제목 제목태그 - 두번째로 큰 제목제목태그 - 세번..

1. HTML: Hypertext(정보의 연결) Markup(정보처리언어기술) Language 의 약자. 웹을 위한 언어. (참고1) 웹문서의 구성 1) 구조 => HTML 2) 디자인 => CSS 3) 동작 => script (참고2) HTML 문서 기본구조 1234 - 웹브라우저는 기본구조를 작성하지 않고 단일태그만으로 구성해도 정상적으로 태그를 해석한다. (참고3) 계층구조 이해하기 1[ { ( ) } ] - 조상 > 부모 > 자식 - 코딩의 가독성을 높이기 위해서 tab 으로 들여쓰기 작성 2. 규칙 - HTML은 tag(태그)라는 명령으로 구성됨 1콘텐츠 - 요소(Element), 태그(Tag)는 시작태그, 종료태그로 구성- 종료태그 앞에는 /를 사용- 웹브라우저에서 표시되는 콘텐츠는 무조건 태..