웹 프로그래밍 (3) HTML5 기본 태그

교재 정리/HTML5

웹 프로그래밍 (3) HTML5 기본 태그

끔벅이별 2024. 4. 1. 14:20

01. 글자 태그

웹 페이지는 글자 태그의 비중이 가장 크다.

글자 태그는 종류가 매우 다양하므로 설명하는 분류 기준으로 기억하면 많은 도움이 될 것이다.

1. 제목과 본문 글자 태그

태그		설명
제목 글자	h1	첫 번째로 큰 제목 글자 생성
	h2	두 번째로 큰 제목 글자 생성
	h3	세 번째로 큰 제목 글자 생성
	h4	네 번째로 큰 제목 글자 생성
	h5	다섯 번째로 큰 제목 글자 생성
	h6	여섯 번째로 큰 제목 글자 생성
본문 글자	p	본문 단락 생성
	br	줄 바꿈
	hr	수평 줄 삽입

문서에서 제목은 위의 여섯가지 제목 글자 태그로 표현. 이때, h1은 heading(제목)을 의미.

본문 글자를 입력할 때는 p, br, hr 태그를 사용. p는 paragraph(단락), br은 break(줄 바꿈), hr은 horizontal rule(수평 줄)을 의미.

예제1) 제목 표현

간단한 제목 글자 태그 활용.

웹 브라우저에 따라 기본 글꼴이 다르기 때문에 출력되는 글꼴도 다르다.

또한 같은 웹 브라우저라도 운영체제에 따라 기본 글꼴이 다를 수 있다.

예제2) 본문 단락 구분

각 p태그가 하나의 단락이라는 것을 주의한다.

예제3) 제목과 본문 태그의 활용

br 태그는 다른 글자 태그 내부에 삽입할 수 있지만, hr 태그는 안 된다.

물론 웹 브라우저가 유연하게 대처하므로 정상적으로 출력되지만 웹 표준에 어긋난다.

! 특수 문자 표기

특수 문자	출력 문자
	공백
<	<
>	>
&	&

예를 들어, HTML 태그 내부에 공백 3개를 연속으로 입력하면: 연속된 공백 여러개를 1개로 인식하여 제대로 표시되지 않는다. 이때 (non-breaking-space)를 사용한다.

2. 앵커 태그

HTML(HyperText Makeup Language)에서 가장 중요한 글자: H(HyperText).

하이퍼텍스트: 사용자 선택에 따라 관련된 특정 정보로 이동할 수 있도록 조직된 문서.

a 태그=anchor: 다른 웹 페이지 혹은 웹 페이지 내부의 특정 위치로 이동할 때 사용.

- a 태그: 하이퍼링크 생성.

- herf(hyper reference) 속성: 어떤 웹 페이지로 이동할지 웹 브라우저에 알려준다.

ex. <a herf="http://www.hanbit.co.kr">한빛미디어</a>

이동할 웹 페이지 / 출력 글자

- 하이퍼링크 설정

1) 특정 웹 페이지로 연결하기

2) 웹 페이지 내부에 연결하기

웹 페이지 내부의 특정 태그로 이동시키기 위해서는: id 속성 추가 필요.

h1태그에 id속성을 입력한다.

a 태그의 herf 속성에 "#id 속성" 형태의 문자열을 입력한다.

id 속성이 중복되면 먼저 나오는 태그로 이동한다.

하지만 웹 표준에 어긋난다.

! 빈 링크

a 태그의 하이퍼링크 기능을 제거하고 사용할 때가 있다.

이때 하이퍼링크 기능은 제거하더라도 herf 속성은 반드시 입력해서 웹 표준을 따르는 것이 좋다.

이 경우 "#"을 입력한다.

ex. <a href="#"></a>

3. 글자 모양 태그

태그	설명
b	굵은 글자bold
i	기울어진 글자italic
small	작은 글자
sub	아래 첨자subscript
sup	위 첨자superscript
ins	밑줄 글자insert
del	취소선 글자delete

big 태그 없음에 주의.

글자 모양 태그는 단독으로 사용할 수 있고, 제목 글자/본문 글자 태그 내부에도, 다른 글자 모양 태그 내부에도 넣을 수 있다.

하지만 글자 모양 태그 내부에 제목 글자/본문 글자 태그를 넣을수는 없다. 웹 브라우저가 표준 위반에 유연하게 대처하기 때문에 실행은 가능하다.

02. 목록 태그

태그	설명
ul	순서가 없는 목록 생성 unordered list
ol	순서가 있는 목록 생성 ordered list
li	목록 요소 생성 list item

내비게이션 메뉴: 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼을 모아 둔 것.

내비게이션 메뉴 제작시 목록 태그 사용.

! 웹 사이트와 웹 페이지

웹 사이트: 책

웹 페이지: 책 페이지

웹 페이지 하나로 웹 사이트가 될 수 있지만, 보통 웹 페이지 여러개로 웹 사이트 하나를 이룬다.

- 목록 태그 활용

1) 순서가 없는 기본 목록 만들기

2) 순서가 있는 목록 만들기

3) 중첩 목록 만들기

03. 테이블 태그

태그	설명
table	표 삽입
tr	표에 행 삽입 table row
th	표의 제목 셀 생성 table heading
td	표의 일반 셀 생성 table data

- 시간표 만들기

1) 표 만들기: table 태그 사용.

2) 표에 셀 추가하기: tr, th, td 태그 사용.

- 테이블 태그의 속성

태그	속성	설명
table	border	표의 테두리 굵기 지정
th, td	colspan	셀의 넓이 인정
th, td	rowspan	셀의 높이 인정

colspan 속성: 영역이 가로 방향으로 늘어난다.

rowspan 속성: 영역이 세로 방향으로 늘어난다.

3) 행, 열 병합 표 생성: colspan, rowspan 속성 적용.

04. 미디어 태그

지금까지는 웹 페이지에 글자를 사용하는 태그.

여기서는 이미지, 오디오, 비디오 등 멀티미디어를 넣는 방법.

- img 태그: 이미지를 삽입할 때 사용.

- audio 태그: 음악을 삽입할 때 사용.

- video 태그: 비디오를 삽입할 때 사용.

이때 img 태그는 내용을 가질 수 없는 태그이지만, audio 태그와 video 태그는 내용을 가질 수 있는 태그이다.

- 이미지, 오디오, 비디오 태그의 속성

태그	속성	설명
img 태그 <img>	src	이미지의 경로 저장
	alt	이미지가 없을 때 나오는 글자 지정
	width	이미지의 너비 지정
	height	이미지의 높이 저장
audio 태그 <audio></audio> video 태그 <video></video>	src	음악, 비디오 파일의 경로 지정
	preload	음악, 비디오를 준비 중일 때 데이터를 모두 불러올지 여부 지정
	autoplay	음악, 비디오의 자동 재생 여부 지정
	loop	음악, 비디오의 반복 재생 여부 지정
	controls	음악, 비디오 재생 도구 출력 여부 저장
video 태그 <video></video>	width	비디오의 너비 저장
video 태그 <video></video>	height	비디오의 높이 저장