시작하기에 앞서, HTML이란 무엇인가?
- HTML은 HyperText Markup Language을 기반으로 둔다.
- HTML은 창조적인 웹 페이지를 위한 표준의 markup 언어이다.
- HTML은 웹 페이지의 구조를 묘사한다.
- HTML은 elements들의 연속으로 구성되어있다.
- HTML의 elements들은 브라우저에게 내용을 어떻게 진열하는지를 말해준다.
- HTML의 elements들은 '이것은 heading이다', '이것은 paragraph이다' 같은 내용의 조각들을 라벨 화한다.
<meta>
<meta charset="UTF-8"> <!-- Define character set -->
<meta name="keywords" content="HTML, CSS, JavaScript"> <!-- Define keywords for search engines -->
<meta name="description" content="Free Web tutorials"> <!-- Define a description of your web page -->
<meta http-equiv="refresh" content="30"> <!-- Refresh document every 30 seconds -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Setting the viewport to make your website look good on all devices --><meta>는 주로 character set, page description, keywords, author of the document, and viewport setting를 구체화하는 데 사용된다.
page에 표시되지는 않지만, 검색 엔진을 통해 브라우저에게 사용된다.
Paragraph
HTML에서는 <p> 태그를 이용해 단락을 표현한다. 여기서 단락이란, 내용상 끊어서 구분할 수 있는 하나하나의 부분을 말하고, 문단이라고도 부른다.
하지만 <p> 태그 안에서 띄어쓰기나 줄 나누기는 웹 브라우저를 통해 나타나는 화면에는 영향을 주지 못한다.
따라서 <br> 태그를 통해 줄을 나누거나 <pre> 태그를 이용하면 HTML 코드에서 작성한 텍스트 서식을 그대로 표현할 수 있다.
<pre> 태그 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현된다.
<pre>
이렇게 줄을 나눌 수 있다.
그 결과는 과연??
</pre>
- <hr> :horizontal rule
<p> 첫 번째 단락 </p>
<hr>
<p> 두 번째 단락 </p>
<hr>
<p> 세 번째 단락 </p>단락을 나눌 때 수평 가로 구분선을 사용함으로 더욱 편리하게 화면에 내용을 나타낼 수 있다.
- <div>
<div style="background-color:black;color:white;padding:20px;">
<h2>Title</h2>
<p>Contents</p>
</div><div>는 다른 HTML elements의 container로 자주 사용된다.
style, class 그리고 id를 사용하는 것이 가장 일반적이다.
- <span>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes
and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
<span> 은 어느 한 부분의 mark up을 위해 주로 사용된다.
Links
- The target Attribute
<a> 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지 명시해준다.
| target 속성값 | 설명 |
| _blank | 링크로 연결된 문서를 새 창이나 새 탭에서 연다 |
| _self | 링크로 연결된 문서를 현재 frame에서 연다 (default) |
| _parent | 링크로 연결된 문서를 부모 frame에서 연다 |
| _top | 링크로 연결된 문서를 현재 창의 가장 상위 frame에서 연다 |
| frame 이름 | 링크로 연결된 문서를 지정된 frame에서 연다 |
<a href="https://yewon-lee.tistory.com/" target="_blank">Visit my blog!</a>
<a href="https://yewon-lee.tistory.com/" target="_self">Visit my blog!</a>
<a href="https://yewon-lee.tistory.com/" target="_top">Visit my blog!</a>
- Button as a Link
<button onclick="document.location='default.asp'">Click Me!</button>
- Bookmark
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
<a href="html_demo.html#C4">Jump to Chapter 4</a>
웹 페이지가 너무 길 때, 북마크를 사용하면 유용하다.
먼저 id를 이용해 북마크를 만든 후, link를 저장하면 된다.
Images
- Image as a Link
<a href="default.asp">
<img src="smiley.gif" alt="사진설명" style="width:42px;height:42px;">
</a><img> 태그를 <a> 태그 안에 넣으면, 이미지를 링크로 사용할 수 있다.
iframe
iframe이란 inline frame의 약자이다.
iframe 요소를 이용하면 해당 웹 페이지 안에 어떤 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.
<iframe src="삽입할페이지주소"></iframe>
iframe 요소는 기본적으로 검정색 border를 가진다. style에서 border 속성 설정을 할 수 있다.
<a> 태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경할 수 있다. <a> 태그의 target 속성과 iframe 요소의 name 속성을 연결하면, <a> 태그를 통해 iframe 요소의 페이지를 변경할 수 있다.
<iframe src="/css/intro" name="frame_target" style="width:100%; height:400px;"></iframe>
<p>
<a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 </a>
</p>
frameset을 이용하면 하나의 브라우저 창에 둘 이상의 페이지를 표시할 수 있다.
이런 프레임셋은 iframe 요소와는 달리 하나 이상의 페이지를 동시에 가질 수 있고, 또 noresize 속성을 명시하지 않으면 사용자가 마음애도 페이지의 크기를 조절할 수 있다.
수직 프레임셋 (하나의 브라우저 창을 세로 방향으로 분리)
<frameset cols="25%,*,25%">
<frame name="left" src="/html/intro"/>
<frame name="center" src="/css/intro"/>
<frame name="right" src="/php/intro"/>
<noframes>
<body> 이 브라우저는 frame태그를 지원하지 않습니다! </body>
</noframes>
</frameset>
가로 프레임셋 (가로 방향으로 분리)
<frameset rows="20%,60%,20%">
<frame name="top" src="/html/intro" noresize="noresize" />
<frame name="center" src="/css/intro" noresize="noresize" />
<frame name="bottom" src="/php/intro" noresize="noresize" />
<noframes>
<body>
이 브라우저는 frame태그를 지원하지 않습니다!
</body>
</noframes>
</frameset>
Layout
HTML에서는 크게 세 가지 방법으로 레이아웃을 작성할 수 있다.
1. div 요소를 이용한 레이아웃
2. HTML5 레이아웃
3. table 요소를 이용한 레이아웃
1. <div> 요소를 이용한 레이아웃
<div id="header"><h2>Header 영역</h2></div>
<div id="nav"><h2>Nav 영역</h2></div>
<div id="section"><p>Section 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>
2. HTML5
HTML5에서는 웹 페이지의 레이아웃만을 위한 별도의 새로운 요소들을 제공한다.
이런 요소들을 semantic 요소라고 하는데, 그 자체로 의미를 가지고 있는 요소를 가리킨다.
즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소이다.
1) header 요소
header 요소는 HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의한다.
헤더(header)란 도입부에 해당하는 콘텐츠(content)를 가지고 있는 부분을 의미한다.
또한, 한 문서 내에 여러 개의 header 요소가 존재할 수 있다.
2) nav 요소
nav 요소는 HTML 문서 사이를 탐색할 수 있는 링크(link)의 집합을 정의한다.
nav 요소는 링크의 커다란 집합을 의미하지만, 문서 내의 모든 링크가 nav 요소에 포함되는 것은 아니다.
<nav>
<a href="/html/html5_1">첫번째</a> |
<a href="/htmlhtml5_2/">두번째</a> |
<a href="/html/html5_3">세번째</a>
</nav>
3) section 요소
section 요소는 HTML 문서에서 섹션(section) 부분을 정의한다.
섹션(section)이란 제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미한다.
<section>
<h2>기사 제목</h2>
<p>기사내용은 이렇습니다.</p>
</section>
4) article 요소
article 요소는 HTML 문서에서 독립적인 하나의 기사(article) 부분을 정의한다.
article 요소의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 페이지의 나머지 부분과는 구별되어 읽을 수 있어야 한다.
<article>
<h2>기사 제목</h2>
<p>기사내용은 이렇습니다.</p>
</article>
이 때, 위의 section 요소와 article 요소 간의 별다른 차이점을 발견할 수 없다. 실제로 두 요소간의 쓰임에 있어 큰 차이는 없다.
대체적으로 section 요소는 HTML 문서의 전체적인 내용에 포함되고, article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용된다.
5) figure, figcaption 요소
책이나 신문 등에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 caption)이 있는 것 처럼, HTML5에서는 위와 같은 목적을 위해 figure 요소와 figcaption 요소를 제공한다.
figure 요소는 HTML 문서에서 그래픽과 비디오 등의 독립적인 콘텐츠(content)를 정의할 때 사용하고,
figcaption 요소는 위와 같은 figure 요소를 위한 캡션을 정의할 때 사용한다.
<figure>
<img src="/examples/images/img_flower.png" alt="flowers" width="350" height="263">
<figcaption>[ 그림 1. 설악산에서 찍은 사진 ]</figcaption>
</figure>
6) footer 요소
footer 요소는 HTML 문서나 섹션(section) 부분에 대한 푸터(footer)을 정의한다.
HTML 문서의 푸터(footer)에는 일반적으로 사이트의 작성자나 그에 따른 저작권 정보, 연락처 등을 명시한다.
또한, 한 문서 내에 여러 개의 footer 요소가 있을 수 있다.
<footer>
<p>Copyright 2021. Yewon all rights reserved.</p>
<p>연락처 : +82 10-1234-5678 </p>
</footer>
HTML5 레이아웃의 요소들을 정리하면 아래와 같다.
| 의미 요소 종류 | 설명 |
| <header> | HTML 문서나 section 부분에 대한 헤더를 정의 |
| <nav> | HTML 문서의 탐색 링크를 정의 |
| <section> | HTML 문서에서 section 부분을 정의 |
| <article> | HTML 문서에서 독립적인 하나의 article 부분을 정의 |
| <aside> | HTML 문서에서 페이지 부분 이외의 contents를 정의 |
| <footer> | HTML 문서에서 section 부분에 대한 footer를 정의 |
Form - <input>
<input> element는 type attribute에 의존하여 많은 방법으로 나타내 진다.
| Type | 설명 |
| <input type="text"> | Displays a single-line text input field |
| <input type="radio"> | Displays a radio button (for selecting one of many choices) |
| <input type="check"> | Displays a checkbox (for selecting zero or more of many choices) |
| <input type="button"> | Displays a clickable button |
| <input type="submit"> |
Displays a submit button (for submitting the form). action 속성에서 구체화된다 |
| <input type="password"> | Defines a password field |
| <input type="reset"> | Defines a reset button that will reset all form values to their default values |
| <input type="date"> | Used for input fields that should contain a date |
| <input type="file"> | Defines a file-select field and a "Browse" button for file uploads |
| <input type="range"> | Defines a control for entering a number whose exact value is not important |
| <input type="tel"> | Used for input fields that should contain a telephone number |
<label>
<label>은 몇몇의 form elemets을 위한 라벨을 정의한다.
그리고 screen-reader 유저들에게 유용한데, 그 사용자가 input element에 초점을 맞출 때 화면 표시기가 라벨을 크게 판독하기 때문이다.
또한 <label>은 radio 버튼이나 checkboxes 같은 작은 구역을 클릭할 때 어려움을 겪는 사용자들을 돕는다. 그들이 <label> element 내의 텍스트를 클릭하면 라디오 버튼/메모리를 토글 하기 때문이다.
<label>에 대한 for의 속성은 <input>의 id 속성과 같아야 한다.
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
Input Attributes
- value
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>input value 속성은 input field의 초기 값을 설정한다.
- readonly
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>read-only 부분은 변경될 수 없다. 하지만 사용자는 텍스트를 tab, highlight, copy 할 수 있다.
- disabled
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>
disabled input field는 사용할 수 없고 클릭할 수 없다. 또한 양식을 제출할 때 비활성화된 입력 필드 값이 전송되지 않는다.
- size
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>input field의 눈에 보이는 너비를 문자로 지정한다. (default 20)
참고: 크기 특성은 text, search, tel, url, email, and password 입력 유형과 함께 작동한다.
- min, max
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>min 및 max 속성은 number, range, date, datetime-local, month, time and week 등의 입력 유형에서 작동한다.
- multiple
<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>이것은 한 개 이상의 값을 넣을 수 있게 해준다.
이것은 email과 file 입력 유형에서 작동한다.
- pattern
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
이것은 form을 제출할 때 입력 필드 값을 확인하는 정규식을 지정한다.
패턴 속성은 text, date, search, url, tel, email, and password의 입력 유형과 함께 작동한다.
- placeholder
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
input field의 예상 값(예상 form에 대한 샘플 값 또는 간단한 설명)을 설명하는 짧은 힌트를 지정한다.
사용자가 값을 입력하기 전에 입력 필드에 짧은 힌트가 표시된다.
자리 표시자 속성은 text, search, url, tel, email, and password의 입력 유형과 함께 작동한다.
- required
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>반드시 입력해야 하는 부분을 지정할 때 사용하는 속성이다.
- step
<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>입력 단계 특성을 사용하여 입력 필드에 대한 수 간격을 지정한다.
ex) 만약 step="3", 0을 포함한 3의 배수의 숫자만 입력할 수 있다.
- autofocus
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
- autocomplete
<form action="/action_page.php" autocomplete="on">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>form 또는 input field의 자동 완성 켜기 또는 끄기 여부를 지정한다.
자동 완성은 브라우저가 값을 예측할 수 있도록 한다. 사용자가 필드에 입력을 시작할 때, 브라우저는 이전에 입력된 값에 기초하여 필드를 채우는 옵션을 표시해야 한다.
Form Attributes
- form
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">input form 속성은<input> element가 속한 form을 구체화한다.
- formaction
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>input formaction 속성은 form을 제출할 때 입력을 처리할 파일의 URL을 지정한다.
이 속성은 <form> 속성의 action 속성을 재정의한다.
- formenctype
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>input formenctype 속성은 제출 시 form-data를 인코딩하는 방법을 지정한다(method="post"가 있는 형식만).
이 속성은 <form> 속성의 enctype 속성을 재정의한다.
- formmethod
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>input formmethod 속성은 form-data를 action URL로 전송하는데 사용되는 HTTP method를 정의한다.
- formtarget
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>input formtarget 속성은 form 제출 후 수신되는 응답을 표시할 위치를 나타내는 이름 또는 keyword를 지정한다.
submit, image 와 함께 작용된다.
- formnovalidate
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>input formnovalidate 속성은 제출될 때 <input> 요소의 유효성을 검사해서는 안 된다는 것을 명시한다.
- novalidate
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
novalidate는 제출되었을 때 모든 form-data가 검증되지 않아야 한다고 명시한다.
(이 모든 내용은 www.w3schools.com에서 참고했다.)
'Study > Web' 카테고리의 다른 글
| HTML Forms & Graphics (0) | 2021.01.05 |
|---|---|
| 웹사이트 개발 과정 (0) | 2021.01.05 |
| '웹 서비스 구축' 사전 준비 (0) | 2021.01.04 |
| JSP CRUD 게시판 만들기 -3 (0) | 2020.10.26 |
| JSP CRUD 게시판 만들기 - 2 (2) | 2020.10.19 |