내비게이션 메뉴 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼이다. 목록 태그 네비게이션 메뉴를 만들기 위해 주로 사용된다. 태그 설명 ul 순서가 없는 목록(unordered list) 생성 ol 순서가 있는 목록(ordered list) 생성 li 목록 요소(list item) 생성 과일과 채소는 ul 태그를 사용한 모습이다. 사과, 바나나, 오렌지 또는 상추, 치커리, 양배추는 ol 태그를 사용한 모습이다. [참고] HTML5 웹 프로그래밍 입문(3판)
WEB
글자 태그는 웹 페이지에서 가장 큰 비중을 차지한다. 제목 글자 태그 문서의 제목을 표현할 때 사용한다. 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: ,..
