미디어 태그는 이미지, 오디오, 비디오 등 멀티미디어를 넣을 때 사용한다. 내용물 여부 태그 설명 내용물을 가질 수 있는 태그 음악 삽입 영상 삽입 내용물을 가질 수 없는 태그 이미지 삽입 audio 태그는 HTML5부터 추가된 기능이기 때문에 그 이하 버전에선 동작하지 않는다. 미디어 태그 속성 이미지, 오디오, 비디오에 필요한 추가 정보는 속성을 사용한다. 태그 속성 설명 img 태그 src 이미지의 경로 지정 alt 이미지가 없을 때 나오는 글자 지정 width 이미지의 너비 지정 height 이미지의 높이 지정 audio, vedio 태그 scr 음악, 비디오 파일의 경로 지정 preload 음악, 비디오를 준비 중일 때 데이터를 모두 불러올지 여부 지정 autoplay 음악, 비디오의 자동 재생..
html5
표를 만들 때는 테이블 태그를 사용한다. 태그 설명 table 표 삽입 tr 표에 행(table row) 삽입 th 표의 제목 셀(table heading) 생성 td 표의 일반 셀(table data) 생성 월 화 수 목 금 1교시 영어 국어 과학 미술 기술 2교시 도덕 체육 영어 수학 사회 테이블 태그의 속성 th와 td에 colspan과 rowspan 속성을 사용하여 표에서 셀이 차지하는 영역을 조절할 수 있다. 태그 속성 설명 table border 표의 테두리 두께 지정 td, th colspan 셀의 너비 지정 rowspan 셀의 높이 지정 지역별 홍차 중국 정산소종 기문 운남 인도 및 스리랑카 아삼 실론 다질링 닐기리 중국, 정산소종은 둘 다 두 번째 행이다. 그래서 같은 tr 태그 안에 있..
내비게이션 메뉴 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼이다. 목록 태그 네비게이션 메뉴를 만들기 위해 주로 사용된다. 태그 설명 ul 순서가 없는 목록(unordered list) 생성 ol 순서가 있는 목록(ordered list) 생성 li 목록 요소(list item) 생성 과일과 채소는 ul 태그를 사용한 모습이다. 사과, 바나나, 오렌지 또는 상추, 치커리, 양배추는 ol 태그를 사용한 모습이다. [참고] HTML5 웹 프로그래밍 입문(3판)
글자 태그는 웹 페이지에서 가장 큰 비중을 차지한다. 제목 글자 태그 문서의 제목을 표현할 때 사용한다. h는 heading(제목)을 의미한다. 태그 설명 h1 첫 번째로 큰 제목 글자 생성 h2 두 번째로 큰 제목 글자 생성 h3 세 번째로 큰 제목 글자 생성 h4 네 번째로 큰 제목 글자 생성 h5 다섯 번째로 큰 제목 글자 생성 h6 여섯 번째로 큰 제목 글자 생성 절대적인 글자 크기는 아니라서 동일한 태그여도 웹 브라우저의 종류가 다르면 글자 크기가 다를 수 있다. 한 웹 브라우저 내에서는 우선 순위에 따라 순차적으로 사용한다. 본문 글자 태그 p는 paragraph(단락), br은 break(줄 바꿈), hr은 horizontal rule(수평 줄)을 의미한다. 태그 설명 p 본문 문단 생성 b..
검사를 이용한 오류 확인 버그(bug) 프로그램이 원하지 않는 방향으로 동작하는 것 디버그(debug) 버그를 찾아내고 수정하는 행위 웹 브라우저 검사 기능으로 디버그 수행 웹 페이지에서 우클릭 후 [검사] 검사 단축키: [F12], [Ctrl]+[Shift]+[I] [Elements] 탭 현재 HTML 페이지의 계층 구조와 각 태그에 적용된 스타일을 파악할 때 사용 [Console] 탭 오류를 확인하거나 자바스크립트 코드를 추가로 입력할 때 사용 검사 기능을 통해 오류 발생 원인과 위치를 쉽게 파악할 수 있음 [참고] HTML5 웹 프로그래밍 입문(3판)
HTML5 페이지의 작성과 실행 1. 새 파일 만들기 [파일]-[새 파일] 단축키: Ctrl+N 2. 코드 작성 후 파일로 저장 HTML 페이지는 다음과 같은 샘플코드로 시작 Hello World! .html, .htm 형식으로 저장 cf) VSCode에서 html:5 입력 후 tab키를 누르면 html 기본 형태가 자동으로 생성됨 3. 실행 저장한 html 파일 경로 복사 후 크롬에 붙여넣기하여 웹 페이지 실행 경로 복사 단축키: ++C 스타일시트 작성과 실행 내부 스타일 (1개 파일 - .html) (HTML페이지 내부에서) style 태그를 사용해 스타일시트를 직접 입력하는 방법 스타일시트가 짧은 경우 사용 외부 스타일 (2개 파일 - .css, .html) 스타일시트를 별도의 파일로 생성 (HTM..
HTML5 구조의 예 : HTML5 문서 표기, 반드시 첫 행에 기입 : HTML 페이지 기본요소, 내부에 모든 태그 작성 : body태그에 필요한 스타일 시트, 자바스크립트 제공 : 웹 브라우저에 표시되는 제목 지정
요소(element) HTML 페이지를 구성하는 각 부품 (제목, 본문, 이미지 등) 태그(tag) 요소를 만들 때 사용하는 작성 방법 요소 생성 = 태그 생성 생성 방법에 따른 요소 구분 요소 구분 형태 예 내용을 가질 수 있는 요소 내용 Hello 프로그래밍 내용을 가질 수 없는 요소 내용을 가질 수 있는 요소 형태: 내용 ex) Hello, 프로그래밍, 시작태그 - 내용 - 끝 태그 순 내용에 들어가는 거: 텍스트, 다른 태그, 입력X 내용을 가질 수 없는 요소 형태: ex) , , cf) HTML 표기법과 XHTML 표기법HTML 표기법은 만으로 요소를 생성 -> 내용을 가질 수 있는 태그의 시작 태그인지 내용을 가질 수 없는 태그 전체인지 구분 어려움-> XHTML 표기법 사용 ( HTML: ,..
