웹 프로그래밍을 위한 웹페이지의 구조적 이해

1. 텍스트 표현

1) br 요소

• Line Break

2) p 요소

• Paragraph

3) hr

• 의미론적으로는 페이지 내에서 주제가 변경되는 콘텐츠를 구분할 때 사용

4) h1~6

• 제목

5) pre

• 요소애네 포함된 모든 텍스트는 고정폭으로 표시
• 자동줄바꿈 미적용

6) blockquote

• 인용
• 자동 들여쓰기
• cite 속성: 인용한 URL 지정

7) 공백 및 특수문자

문자	이름표현(Entiti Name)	코드표현(Entity Code)
공백	 	   
<	&lt;	&#60; &#x3c;
>	&gt;	&#62; &#x3e;
&	&amp;	&#38; &#x26;
"	&quot;	&#34; &#x22;
©	&copy;	&#169; &#xa9;
→	&rarr;	&#8594; &#x2192;
♡	--	&#x2661;
☞	--	&#x261e;

8) 글자 스타일

• 물리적 스타일
  • b: 볼드
  • i: 이탤릭
  • s: 취소선
  • u: 밑줄, 하이퍼링크와 혼동을 유발할 수 있어 사용제한 필요
  • sup: 위첨자
  • sub: 아래첨자
  • small: 작은 글자, 부수적 해설, 이용조건, 법적 고지 등 표기
• 논리적 스타일
  • cite: 작품의 제목을 표시, 이탤릭체
  • code: 컴퓨터 코드 표시
  • samp: 프로그램의 샘플 출력 표시
  • var: 변수를 표시, 이탤릭체
  • dfn: 용어에 대한 정의 표시, 이탤릭체
  • em: 강조표시, 이탤릭체
  • strong: 중요표시, 볼드체
  • addr: 축약형 표시
  • address: 실제 우편 주소, 이탤릭체, 자동줄바꿈
  • kdb: 키보드로 입력한 내용임을 표시
  • q: 짧은 인용구, 자동으로 큰 따음표
  • mark: 시각적, 의미적으로 특정문구나 단어 강조, 형광펜 표시

9) 블록 요소와 인라인 요소

• 블록 요소: div, p, h1 등
• 인라인 요소: span, img, a 등
• div 요소: 여러 HTML요소를 묶어 하나의 논리적 단위 영역으로 구성하는 컨테이너
• span 요소: 텍스트를 위한 컨테이너

2. 리스트 표현

1) Unordered Lists <ol></ol>

• Using CSS (attribute) list-style-type
  • 기호미사용: none
  • 채워진 원: disc(Default)
  • 비워진 원: circle
  • square

2) Ordered Lists <ol></ol>

• (Attribute) type=argument
  • 1: 1, 2, 3...
  • a: a, b, c...
  • A: A, B, C...
  • i: i, ii, iii...
  • I: I, II, III...
• (Attribute) start=argument
  • Starting Number
• (Attribute) reversed: Revere Order
• li (Attribute) value=argument
  • Change Item Number

3) Definition Lists <dl></dl>

• Definition Term: <dt></dt>
• Definition Description: <dd></dd>

3. 이미지 표현

• src
• width
• height
• alt
• usemap = "#name"

4. 하이퍼링크 표현

1) 개요

• href (hyper reference) 속성 = "URL"
• target 속성
  • _blank
  • _self
  • _top
  • _parent
  • windows name
• download 속성

2\) "id" 속성 이용

• id로 링크 <a href="#Name of Position">
• 목적지 <a id="Name of Position">

3) 다양한 링크

• E-mail: <a href="mailto:aaa@aaa.com">
• JavaScript: <a href="javascript:alert('Hello, World!');">

4) 이미지 맵

• 하나의 이미지를 여러개의 영역으로 나누어 영역마다 링크를 지정
• img요소 (usemap 속성)
• map요소 (name속성): 삽입한 이미지의 어떤 부분에 링크시킬 것인지 지정
• area요소 (shape, coords, href속성): map요소 안에서 필요한 영역의 개수만큼 사용해서 링크시킬 각 영역을 지정

<img src="sample.png" usemap="#map1">
<map name="map1">
	<area shape="rect" coords="0,0,50,50" href="https://www.naver.com">
    <area shape="circle" coords="300,200,50" href="https://www.daum.net">
    <area shape="poly" coords="400,100,450,150,400,200,350,150" href="https://www.google.com">
</map>

5) iframe element

• name="이름"
• src="URL" (srcdoc 속성 지정시 무시)
• srcdoc="HTML code"(창에 보여줄 HTML콘텐츠)
• width, height

5. 테이블 표현

1) 개요

See the Pen public.re.kr/54-5-1-01 by Lee Deokho (@duqe) on CodePen.

2) 행열 병합

See the Pen public.re.kr/54-5-2-01 by Lee Deokho (@duqe) on CodePen.

3) Grouping

See the Pen public.re.kr/54-5-3-01 by Lee Deokho (@duqe) on CodePen.

4) Column Style

See the Pen public.re.kr/54-5-4-01 by Lee Deokho (@duqe) on CodePen.

6. 미디어 표현

• Attribute
  • autoplay
  • controls
  • loop
  • muted
  • preload= "value" // autoplay 의 경우 비적용
    • none
    • auto
    • metadata
  • src
  • Video Only
    • width
    • height
    • poster: Alternative Image

<audio controls>
    <source src="./audio/1.mp3" type="audio/mp3">
    <source src="./audio/2.ogg" type="audio/ogg">
    <source src="./audio/3.wma" type="audio/wma">
</audio>
<video controls width="700" height="400" poster="./img/a.jpg>
    <source src="./video/1.mp4" type="video/mp4">
    <source src="./video/2.avi" type="video/avi">
    <source src="./video/3.wmv" type="video/wmv">
</audio>

7. 시멘틱 요소

0) 정의

• 의미있는 구조의 문서 작성을 위해 HTML5에서 추가된 요소
• 요소명을 통해 해당 요소의 기능에 대한 이해/파악이 용이

1) 문서구조화 시멘틱 요소

<header>
<nav>
<aside>	<section>	<aside>
	<article>
	<article>
	<article>
<footer>

• <header> Site Name, Logo, Introduction
• <footer> Producer Information, Copyright
• <nav> 주료 웹페이지 전체에 적용되는 상단 메뉴를 표시하기 위한 하이퍼링크 모음
• <aside> 주요 콘텐츠 외에 참고 콘텐츠 등을 나타낼 때 사용
• <section> Chapter, Verse
• <article> Contents

2) 시멘틱 블록 요소

See the Pen public.re.kr/54-7-3-01 by Lee Deokho (@duqe) on CodePen.

3) 시멘틱 인라인 요소

See the Pen public.re.kr/54-7-4-01 by Lee Deokho (@duqe) on CodePen.

8. 웹 폼

1) form 요소

• action="URL" 폼데이터를 전달받아 처리할 서버 응용프로그램의 주소
• method="전송방식" 폼 데이터를 웹서버로 전송하는 방식 (value: get, post)
• name="이름" 폼 이름, js파일에서 사용
• accept-charset="인코딩" 폼 제출을 위해 사용되는 문자 인코딩 방식
• autocomplete="on/off" 폼의 input 요소에서 자동완성 기능의 사용 여부
• enctype=" 인코딩" "method=post" 인 경우 서버로 제출될 때 폼 데이터의 인코딩 방식
• novalidate 제출시 폼 데이터의 유효성을 검사하지 않도록 지정
• target="창" 폼 제출 후 서버로부터 전달받은 처리 결과를 보여 줄 창 지정(value: _blanki, _self, _parent, _top, 창이름)

See the Pen public.re.kr/54-8-8-01 by Lee Deokho (@duqe) on CodePen.

2) input 요소

• input type=
  • text
  • password
  • radio
  • checkbox
  • hidden: 사용자에게 보이지 않는 상태로 데이터를 전송받아 서버로 전송
  • file: 로컬PC의 파일 선택 버튼
  • image: 이미지를 제출 버튼으로 지정
  • submit
  • reset
  • button: 클릭할 수 있는 일반 버튼. 주로 JavaScript 활성화를 위해 사용
  • search
  • tel
  • url: 자동으로 유효성 검사
  • email
  • number: 특정 범위의 숫자 입력
  • range: 특정 범위의 숫자 입력 (슬라이드 바 형태)
  • color: 색상
  • date: 년, 월, 일
  • month: 년, 월
  • week: 년, 주차
  • time
  • datetime-local: 날짜와 시분초 입력
• input 요소 속성에 사용 가능한 입력 유형
  
  • accept="파일유형( audio/*, video/*, image/* file )" 
  • alt="이미지에 대한 대체 텍스트 (image) " 
  • image height, width="이미지의 폭과 높이 픽셀 (image) "
  • src="url (image) "
  • autocomplete="on/off ( text, password, tel, search, url, email, range, color, date/time )" 
  • autofocus 페이지 로드시 자동으로 입력 타입에 포커스 위치
  • checked (checkbox, radio)
  • disabled 인풋 요소를 비활성화
  • form="form_id" 인풋 요소가 폼 밖에서 사용되는 경우 인풋 요소가 속할 폼 지정
  • formaction="URL" form action= 대체 (submit, image)
  • formenctype="인코딩" form enctype= 대체 (submit, image)
  • formmethod="전송방식" form method= 대체 (submit, image)
  • formnovalidate form novalidate= 대체 (submit, image)
  •  formtarget="창" form target= 대체 (submit, image)
  • list="datalist_id" input element에 바인딩되는 datalist element 지정
  • min / max / step="숫자/날짜", "숫자" ( number, range, date/time )
  • minlength / maxlength="숫자"
  • multiple (file, email)input요소에서 하나 이상의 값을 지정할 수 있도록 함.
  • nume="이름"
  • pattern="(유효성 검사)정규표현식" (text, password, tel, search, url, email, date)
  • placeholder="(힌트)텍스트" (text, password, tel, search, url, email)
  • readonly 읽기전용으로 지정
  • required (text, password, tel, search, url, email, date/time, checkbox, radio, file, number)
  • size="숫자" (text, password, tel, search, url, email)
  • type="유형" input요소가 나타날 수 있는 입력 타입을 지정
  • value="텍스트"
    • 버튼위에 표시되는 텍스트 input type=button, reset, submit
    • 입력타입에 표시되는 초기값 input type=text, password, hidden
    • 입력과 관련하여 서버로 전달되는 값 input type=checkbox, radio, image

3) 텍스트 입력

• input type="text", "textarea"
• 속성
  • name="영역이름"
  • cols="숫자" 한줄에 입력 가능한 글자수
  • rows="숫자" 텍스트 영역의 높이(라인수)
  • wrap="값" 줄바꿈 여부
    • Value=soft (Default) 자동줄바꿈 미적용
    • Value=hard 자동줄바꿈. 다만 cols 속성이 지정되어야 함.
  • readonly 읽기전용 속성
• input type="password"
• input type="search"
• input type="tel"
• input type="url" 자동 유효성 검사 시행
• input type="email" 이메일 주소 입력 받으려면 multiple 속성 지정하고 콤마로 구분해서 입력

See the Pen public.re.kr/54-8-3-01 by Lee Deokho (@duqe) on CodePen.

4) 숫자 입력

• input type="number"
  • box shape with spin button
• input type="range"
  • slide bar shape
• other attribute
  • max/min
  • value
  • step

See the Pen public.re.kr/54-8-4-01 by Lee Deokho (@duqe) on CodePen.

5) 데이터 선택

• input type="radio"
• input type="checkbox"
• input type="file"
• select
  • attribute
    • name="리스트 네임"
    • size="한번에 보여질 개수"
    • multiple
    • autofocus
    • disabled
    • form
    • required
  • optgroup
    • attribute
      • label
  • option
    • attribute
      • disable
      • selected
      • value
• datalist
  • input type="text"에 대한 옵션 리스트를 지정
  • option 사용

See the Pen Untitled by Lee Deokho (@duqe) on CodePen.

6) 버튼 생성

See the Pen public.re.kr/54-8-6-01 by Lee Deokho (@duqe) on CodePen.

7) 날짜/시간 선택

• input type="date", "month", "week", "time", "datetime-local"
  • attribute
    • min/max
    • step
    • value

See the Pen public.re.kr/54-8-7-01 by Lee Deokho (@duqe) on CodePen.

8) 폼 내의 값을 출력하는 Output 요소

• output
  • input요소의 값을 출력하기 위해서는 input요소의 값이 변하게 되면 발생하는 form요소의 input이벤트를 활용하여 출력할 값의 연산식을 JavaScript문법으로 지정
  • attribute
    • name
    • for

See the Pen Untitled by Lee Deokho (@duqe) on CodePen.

9) 폼 요소의 그룹핑

• label
  • form요소와 caption을 묶어줌.
• fieldset
  • attribute
    • name
    • form
    • disabled
  • <legend>: grouping 요소의 캡션 표시

See the Pen public.re.kr/54-8-9-01 by Lee Deokho (@duqe) on CodePen.

※ HTML 속성 정의 우선순위

1. rel
2. type
3. href, src
4. width, height
5. target
6. id
7. name
8. class
9. style
10. title, alt
11. etc attribute

[참고자료]

• 이관용, HTML5 웹 프로그래밍, KNOU Press, 2023