HTML에서 JavaScript를 포함할 때 script 태그를 사용한다. 이 script 태그가 어디에 위치하느냐에 따라 조금씩 차이점이 있는데 이를 알아보도록 하자! 1. head 태그 안에 script 태그 포함 head 태그 안에 script 태그를 포함할 경우, HTML을 파싱하다가 멈추고 JavaScript 파일을 먼저 다운받는다. JavaScript를 다 다운받으면 실행한 후 그 이후에 HTML을 마저 파싱한다. 단점: 자바스크립트 용량이 커서 다운로드가 오래 걸리면 그동안 뒤의 HTML이 파싱되지 않기 때문에 페이지 로드가 느려진다. 2. body 태그 마지막에 script 태그를 포함 1번의 문제점을 해결할 수 있는 방법이다. script 태그를 body의 마지막에 포함하게 되면, HTM..
WEB/HTML
미디어 태그는 이미지, 오디오, 비디오 등 멀티미디어를 넣을 때 사용한다. 내용물 여부 태그 설명 내용물을 가질 수 있는 태그 음악 삽입 영상 삽입 내용물을 가질 수 없는 태그 이미지 삽입 audio 태그는 HTML5부터 추가된 기능이기 때문에 그 이하 버전에선 동작하지 않는다. 미디어 태그 속성 이미지, 오디오, 비디오에 필요한 추가 정보는 속성을 사용한다. 태그 속성 설명 img 태그 src 이미지의 경로 지정 alt 이미지가 없을 때 나오는 글자 지정 width 이미지의 너비 지정 height 이미지의 높이 지정 audio, vedio 태그 scr 음악, 비디오 파일의 경로 지정 preload 음악, 비디오를 준비 중일 때 데이터를 모두 불러올지 여부 지정 autoplay 음악, 비디오의 자동 재생..
표를 만들 때는 테이블 태그를 사용한다. 태그 설명 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태그에 필요한 스타일 시트, 자바스크립트 제공 : 웹 브라우저에 표시되는 제목 지정
