Chapter03 HTML5 기본 태크

문입 밍래그로프 웹 5LMTH/Chapter03 HTML5 기본 태그

Chapter03 HTML5 기본 태크

Hesitater 2021. 10. 5. 19:29

728x90

01 글자태그

제목과 본문 글자 태그

앵커 태그

글자 모양 태그

02 목록 태그

03 테이블 태그

01 글자태그

웹페이지는 글자 태그중 비중이 가장 크다. 글자 태그는 종류가 매우 다양하므로 책에서 설명하는 분류기준으로 기억하면 많은 도움이 된다..?

1. 제목과 본문 글자 태그

문서에서 제목은 여섯가지 제목 글자 태그로 표현합니다. 제목 글자 태그에서 h는 heading(제목)을 의미합니다.

본문 글자를 입력할 떄는 p, br, hr 태그를 사용합니다 p태그에서 p는 paragraph(단락), br은 break(줄 바꿈),

hr은 horizontal rule(수평줄) 을 의미합니다.

표 3-1 제목 글자 태그

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

★기본 예제 3-1 제목표현

간단하게 제목 글자 태그를 활용해 보겠습니다. 여기서는 h1이 가장 큰 제목 태그고, h6이 가장 작은 제목 태그라는 것만 기억하면 됩니다. 웹 브라우저에 따라 기본 글꼴이 달라서 출력되는 글꼴도 다릅니다. 또 같은 웹 브라우저라도 운영체제에 따라 기본 글꼴이 다를 수 있습니다.

코드 3-1 text)header.html

★기본 예제 3-2 본문 단락 구분

앞서 다룬 제목 글자 태그와 본문 글자 태그를 사용해 보겠습니다. 책에서는 p 태그 내부에 짧은 글자를 입력했지만, 실습을 진행할 떄는 예제 소스처럼 글자를 많이 입력해주세요 각 p 태그가 문단을 하나씩 만들고 있는 부분을 주의해서 살펴봅시다

○결과값

★기본 예제 3-2 본문 단락 구분

앞서 다룬 제목 글자 태그와 본문 글자 태그를 사용해 보겠습니다. 책에서는 지면상 p 태그 내부에 짧은 글자를 입력했지만, 실습을 진행할 때는 예제 소스처럼 글자를 많이 입력해주세요 각 p태그 가 문단 하나씩 만들고 있는 부분을 주의해서 살펴봅시다

코드 3-2 text_paragraph.html

○결과값

★기본 예제 3-3 제목과 본문 태그의 활용

제목과 본문 태그를 모두 활용해서 간단한 문서를 작성해보자. 주의할 점은 br 태그는 다른 글자 태그 내부에 삽입할 수 있지만 hr 태그는 안된다는 것이다. 물론 hr 태그가 다른 글자 태그 내부에 있어도 웹 브라우저가 유연하게 대처하므로 정상적으로 출력됩니다. 하지만 이는 웹 표준에 어긋납니다 실행 결과를 예측해보자

코드 3-3 text_content.html

○결과창

NOTE 특수 문자 표기

공백, 괄호 등은 다음 특수 문자를 사용해 화면에 표시할 수 있습니다.

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

이 외에도 많다 일단이건 알아둬야할듯 하다 책에 나와있으니..

예를 들어 HTML 태그 내부에 공백 3개를 연속으로 입력한 후 파일을 실행하면 연속된 공백을 1개로 인식하기에 공백 3개가 제대로 표시되지않습니다

  (non-breaking space)를 사용하면 모든 공백을 표시합니다.

코드 3-4 reference_textTithNbspSpace.html

결과값

NOTE Lorem Ipsum(https://lipsum.com/)

라인ㅌ어로 지은 최고선악론에 나오는 단어를 마구잡이로 추출해 만든거다

웹 사이트에서 그럴듯한 글자를 쉽게 생성할 수 있어서 웹 디자인할때 많이 사용됨

https://lipsum.com/

Lorem Ipsum - All the facts - Lipsum generator

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type spec

lipsum.com

2. 앵커 태그

HTML(HyperText Markup Language)에서 가장 중요한 글자는 H를 의미하는 하이퍼텍스트입니다. 하이퍼텍스트는 사용자 선택에 따라 관련 특정 정보로 이동할 수 있도록 조직된 문서를 의미합니다. HTML 페이지가 조직화된 문서 형태가 될 수 있는 이유는 a 태그덕분입니다. a태그는 anchor를 의미하며, 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동할 때 사용 합니다.

표 3-2 앵커 태그

태그	설명
a	하이퍼링크 생성

a 태그만으로는 어떤 웹 페이지로 이동할지 웹 브라우저에 알려 줄 수 없어 [그림3-2]와 같이 href 속성을 사용해 알려 줍니다. href는 hyper reference를 의미하고 다음 그림과 같이 웹 페이지나 파일의 위치를 나타내는 경로를 입력합니다.

그림 3-2 a 태그의 href속성

★기본 예제 3-4 하이퍼링크 설정

a 태그를 사용해 특정 웹페이지나 웹 페이지 내부의 특정 위치로 이동하는 링크를 생성해보자

1. 특정 웹페이지 연결하기

[코드3-5]를 작성하고 실행한 후 하이퍼링크를 설정한 글자를 클릭하면 해당 웹 페이지로 이동합니다

코드 3-5 text_anchor.html

결과값(누르면 사이트 잘 들어가짐)

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

웹 페이지 내부의 특정 태그로 이동하려면 id 속성을 추가로 사용해야합니다. 우선 h1 태그에 id속성을 입력합니다. 이어서 a 태그의 href 속성에 '#id속성' 형태의 문자열을 입력합니다. 파일을 실행해서 Alpha 부분 링크를 클릭하면 해당 내용으로 이동합니다. p 태그에 입력되는 본문은 지면상 일부만 넣었습니다

코드 3-6 text_anchorlnner.html

(22번줄 <br>많은건 이게 코드가 짧아서 Alpha부분, Beta 부분, Gamma 부분 누를시 주소창은 변하는데

보이는화면이 달라지지가 않아서 <br>을 넣은거임)

○결과값

이상태인데 저상태에서 Beta 부분을 누르면 아래그림처럼 Beta 부분이 위로 올라옴

NOTE 빈 링크

a 태그의 하이퍼링크 기능을 제거하고 사용할 때도 있습니다. 하지만 이때도 하이퍼링크 기능은 제거하더라도 a 태그에 href 속성은 반드시 입력햇 웹 표준을 따라야 합니다. 웹 표준을 지키면서 이동하지 않는 a 태그를 만들 때는 href 속성에 '#'을 입력합니다. 이를 빈 링크라고 합니다.

다음은 네이버 메인 페이지 코드의 일부분입니다 a 태그의 href 속성에 '#'입력했습니다.

○결과값

3.글자 모양 태그

HTML5는 [표3-3]의 글자 모양 태그를 사용해 웹 페이지의 글자에 형태와 의미를 부여합니다. HTML5에는 HTML4 버전까지 있었던 big 태그가 없습니다. small 태그가 있어 big 태그가 있다고 착각할 수 있으니 주의하세요

표3-3 글자 모양 태그

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

글자 모양 태그는 단독으로 사용하거나 제목 글자와 본문 글자 태그 내부에 입력 or 다른 글자 모양 태그도 넣을 수 있습니다. 하지만 글자 모양 태그 내부에 제목 글자와 본문 글자 태그는 넣을 수 없습니다.

그림3-3 웹 표준을 위반한 글자 모양 태그 사용 예

결과값

★기본 예제 3-5 다양한 글자 모양

코드3-7 text_font.html

○결과값

02 목록 태그

현대 웹 페이지에서 빠지지 않고 등장하는 요소가 있따면 바로 내비게이션 메뉴입니다. 내비게이션 메뉴는 그림과 같이 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼 모아둔 것입니다.

내비게이션 메뉴를 만들 때는 주로[표3-4]와 같은 목록 태그를 사용합니다.

표3-4 목록 태그

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

★기본 예제 3-6 목록 태그 활용

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

[코드3-8]과 같이 목록 태그를 사용해 목록을 생성합니다.

코드 3-8 list_unordered.html

○결과값

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

ul 태그를 ol 태그로 바꾸어 실행합니다. 순서가 있는지만 기억하면 목록 태그도 쉽게 이해 가능

코드3-9 list_ordered.html

○결과값

3. 중첩 목록 만들기

다음과 같이 중첩 목록을 만들 수도 있습니다.

코드 3-10 nested_list.html

○결과값

03 테이블 태그

표를 만들 때는 [표3-5]의 테이블 태그를 사용합니다. 태그가 조금 많지만 차근차근 보자

tr-표에 행(table row) 삽입

th-표의 제목 셀 (table heading) 생성

td-표의 일반 셀(table data)생성

표 3-5 테이블태그

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

★기본 예제 3-7 시간표 만들기

1. 표만들기

table 태그를 사용해 표를 만듭니다

코드3-11table_basic.html

2.표에 셀 추가하기

테이블 요소를 만드는 tr태그, th 태그, td 태그를 추가해 시간표를 만듭니다.

코드 3-12

<table border="1"> 표의 테두리를 지정하는 속성입니다

○결과창

테이블 태그에는 [표3-6]과 같은 속성이 있습니다. table 태그의 경우 HTML5 전에는 속성이 많았지만, 이제는 표의 테두리 두께를 지정하는 border 속성만 가지고 있습니다. th태그와 td태그는 colspan 속성과 rowspan 속성을 사용해 표에서 차지하는 영역을 조절할 수 있습니다. colspan 속성을 사용하면 영역이 가로 방향으로 늘어나고, rowspan 속성을 사용하면 세로 방향으로 늘어납니다.

표 3-6 테이블 태그의 속성

태그	속성	설명
table	border	표의 테두리 두게 지정
th,td	colspan	셀의 너비지정
th,td	rowspan	셀의 높이 지정

★기본 예제 3-8 table_span.html

○결과값

04 미디어 태그

지금까지는 웹 페이지에 글자를 사용한느 태그를 살펴보았다. 이 절에서는 이미지, 오디오, 비디오 등 멀티미디어를 넣는 방법을 알아보겠다. 이미를 삽입할 떄는 img 태그를 사용하고, 음악을 삽일할 때는 audio 태그를 사용합니다.

audio 태그는 HTML5에 추가된 기능이므로 인터넷 익스플로어 8이하에서는 사용이 안됩니다.

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

표 3-7 미디어 태그 구분

내용물을 가질 수 있는 태그	내용물을 가질 수 없는 태그
<audio ></audio> <video ></video> <audio src=""></audio> <video src=""></video>	<img > <img src="" alt="">

표 3-8 이미지, 오디오, 비디오 태그의 속성( 한번에 못담아서 나눈것임)

태그	속성	설명
img 태그	src	이미의 경로 지정
	alt	이미지가 없을 때 나오는 글자 지정
	width	이미지의 너비 지정
	height	이미지의 높이 지정

태그	속성	설명
audio, video 태그	src (source)	음악, 비디오 파일의 경로지정
	preload (사전에 설치하다 예비하다)	음악, 비디오를 준비 중일 때 데이터를 모두 불러올지 여부 지정
	autoplay	음악, 비디오의 자동 재생 여부 지정
	loop	음악, 비디오 재생 도구 출력 여부 지정
	controls	음악, 비디오 재생 도구 출력 여부 지정
video 태그	width	비디오의 너비 지정
video 태그	height	비디오의 높이 지정

★기본 예제 3-9 멀티미디어(이미지, 오디오, 비디오)삽입

1. 이미지 삽입하기

표시하고 싶은 이미지 파일()을 HTML페이지와 같은 폴더에 넣고 [코드3-14]를 작성합니다.

코드 3-14 image_basic.html

○결과창

2. 음악 삽입하기

삽입하고 싶은 오디어 파일() 을 HTML vpdlwldhk rkxdms vhfejdp sjghr [코드3-15]를 작성합니다. 코드를 실행하면 웹 브라우저마다 컨트롤이 다르기 때문에 서로 다른 모습의 웹 페이지를 볼 수 있습니다.

코드 3-15 audio_basic.html

2번 파일은 왜 안되는지 모르겠음 근데 1번 3번은 노래 잘들림

2번파일이wma인데 이게 뭐 변환해야 하는것같음 근데 그건 잘 모르겠음

○결과값

3. 웹브라우저 제약이 없도록 음악 삽입하기

웹 브라우저 미세 버전에 따라 [코드3016]이 실행되지 않을 수 있습니다. 웹 브라우저마다 지원하는 확장자 형식이 달라 나타나는 현상입니다. 게임기와 텔레비전에 들어가는 웹 브라우저 모두 지원하는 확장자가 다릅니다. 웹브라우저 마다 지원하는 음악 파일 확장자가 다른 문제는 source 태그로 해결할 수 있습니다. soruce 태그는 audio 태그나 video 태그내부에 입력합니다. HTML 페이지와 같은 폴더에 확장자가 OGG인 파일을 넣어 줍니다. 파일변환 프로그램을 사용해도되고 준비 파일을 사용해도 됩니다.

코드 3- 16 audio_source.html