HTML Form

www.w3schools.com/html/html_forms.asp

 

HTML Forms

HTML Forms An HTML form is used to collect user input. The user input is most often sent to a server for processing. The Element The HTML element is used to create an HTML form for user input:

. form elements .
The element is a container for

 

www.w3schools.com

W3schools.com 요악 및 정리 

더보기

내용

HTML Forms
HTML Forms
HTML Form Attributes
HTML Form Elements
HTML Input Types
HTML Input Attributes
HTML Input Form Attributes


▶ HtmlForm_1

HtmlForm_1.pdf
0.50MB

<!DOCTYPE html>
<html>
<body>

<!-- HTML Forms 
<form> 요소 
사용자 입력을위한 HTML 양식을 만드는 데 사용

<input> 요소
<input type = "text">	한 줄 텍스트 입력 필드를 표시합니다.
<input type = "radio">	라디오 버튼을 표시합니다 (여러 선택 항목 중 하나를 선택).
<input type = "checkbox">	확인란을 표시합니다 (여러 선택 항목을 0 개 이상 선택).
<input type = "submit">	제출 버튼 표시 (양식 제출 용)
<input type = "button">	클릭 가능한 버튼을 표시합니다.

<label> 요소
많은 폼 요소에 대한 레이블을 정의
화면 판독기 사용자에게 유용합니다. 사용자가 입력 요소에 집중할 때 화면 판독기가 레이블을 소리내어 읽어주기 때문
for의 속성 <label>태그는 같아야 id의 속성 <input> 들을 함께 바인딩 요소.


-->
<h2>HTML Forms</h2>

<form action="/action_page.php">
  <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"><br><br>
  <input type="submit" value="Submit">
</form> 

<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

<!-- 라디오 버튼 <input type="radio"> 
	선택 항목 중 하나를 선택-->
<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

<!-- 체크 박스 <input type="checkbox"> 
	0 개 또는 추가 옵션을 선택-->
<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

<!-- 제출 버튼 
	<input type="submit">폼 - 처리기 폼 데이터의 송신 버튼을 정의

	<input>의 이름 속성
	각 입력 필드에는 name제출할 속성이 있어야합니다 .
-->
<form action="/action_page.php">
  <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"><br><br>
  <input type="submit" value="Submit">
</form>


<!-- HTML 양식 속성 -->

<!-- 타겟 속성 
	target속성 지정 여기서 양식을 제출하면 수신되는 응답을 표시
	_blank	The response is displayed in a new window or tab
	_self	The response is displayed in the current window
	_parent	The response is displayed in the parent frame
	_top	The response is displayed in the full body of the window
	framename	The response is displayed in a named iframe
-->
<form action="/action_page.php" target="_blank"> 
	<!-- 여기에서 제출 된 결과는 새 브라우저 탭에서 열립니다. -->

<!-- 메서드 속성 
	method속성은 폼 데이터를 제출할 때 HTTP 메소드가 사용되도록 지정 
	양식 데이터는 URL 변수 (사용 method="get") 또는 HTTP 사후 트랜잭션 (사용 method="post") 으로 전송 될 수 있습니다 .
	양식 데이터를 제출할 때 기본 HTTP 메소드는 GET입니다. 


	GET에 대한 참고 사항 :

양식 데이터를 이름 / 값 쌍으로 URL에 추가합니다.
GET을 사용하여 민감한 데이터를 보내지 마십시오! (제출 된 양식 데이터는 URL에 표시됩니다!)
URL의 길이는 제한되어 있습니다 (2048 자).
사용자가 결과를 북마크하려는 양식 제출에 유용합니다.
GET은 Google의 쿼리 문자열과 같은 비보안 데이터에 적합합니다.
POST에 대한 참고 사항 :

HTTP 요청 본문에 양식 데이터를 추가합니다 (제출 된 양식 데이터는 URL에 표시되지 않음).
POST에는 크기 제한이 없으며 많은 양의 데이터를 전송하는 데 사용할 수 있습니다.
POST를 사용한 양식 제출은 북마크 할 수 없습니다.
팁 : 양식 데이터에 민감한 정보 나 개인 정보가 포함 된 경우 항상 POST를 사용하십시오!

-->
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">

<!-- 자동 완성 속성 
	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="email">Email:</label>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit">
</form>

<!-- Novalidate 속성 
	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">
</form>



<!-- HTML 양식 요소 -->

<!-- <input> 요소 
	type 속성 의 모든 다른 값은 다음 장인 HTML 입력 유형-->
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

<!-- <label> 요소 
	여러 가지 형태의 요소에 대한 레이블을 정의
	화면 판독기 사용자에게 유용 -->
<!-- <select> 요소 
	<select>요소는 드롭 다운 목록을 정의
	미리 선택된 옵션을 정의하려면 옵션에 selected속성을 추가 
	-->
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat" selected>Fiat</option>
  <option value="audi">Audi</option>
</select>

<!-- 보이는 값 : 사용 size표시 값의 수를 지정하는 속성  -->
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<!-- 다중 선택 허용 : 
	multiple사용자가 둘 이상의 값을 선택할 수 있도록 하려면 속성을 사용
	Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.-->
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

<!-- <textarea> 요소 
	<textarea>소자는 여러 줄의 입력 필드 (텍스트 영역)을 정의

		rows속성은 텍스트 영역에 표시되는 줄 수를 지정
		cols속성은 텍스트 영역의 가시 폭을 지정 -->
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

<!-- <button> 요소 -->
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

<!-- <fieldset> 및 <legend> 요소 
	<fieldset>소자 형태로 그룹과 관련된 데이터를 저장하는 데 사용
	<legend>요소는 캡션 정의 <fieldset> 요소를.

	-->
<form action="/action_page.php">
  <fieldset>
    <legend>Personalia:</legend>
    <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"><br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

<!-- <datalist> 요소 
<datalist>요소는에서 미리 정의 된 옵션의리스트를 지정 <input>소자.
사용자는 데이터를 입력 할 때 미리 정의 된 옵션의 드롭 다운 목록을 볼 수 있습니다.
list의 속성 <input>요소는 참조해야 id의 속성 <datalist>요소-->
<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

<!-- <output> 요소 
<output>(하나의 스크립트에 의해 수행 같은) 요소는 계산 결과-->
<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

<!-- HTML 입력 유형
팁 :type 속성 의 기본값 은 "text"입니다.

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week"> -->

<form action="/action_page.php">
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
  <input type="submit" value="Submit">
</form>

<!-- HTML 입력 속성 -->

 <!-- 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>

<!-- 읽기 전용 속성
입력 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>


<!-- 비활성화 된 속성 
입력 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>

<!-- 크기 속성 
입력 size속성은 입력 필드의 보이는 너비 (문자)를 지정
본값 size은 20  
이 size속성은 텍스트, 검색, 전화, URL, 이메일 및 비밀번호와 같은 입력 유형에서 작동
-->
<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>

<!-- maxlength 속성 -->
<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" maxlength="4" size="4">
</form>

<!-- 최소 및 최대 속성 -->
<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>

<!-- 다중 속성 
multiple이메일, 파일 : 속성은 다음과 같은 입력 유형과 작동-->
<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form>

<!-- 패턴 속성 
입력 pattern속성은 양식이 제출 될 때 입력 필드의 값이 검사되는 정규식을 지정
pattern속성은 텍스트, 날짜, 검색, URL, 전화, 이메일 및 비밀번호 입력 유형에서 작동-->
<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>

<!-- 자리 표시 자 속성 
입력 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>

<!-- 필수 속성 
입력 required속성은 양식을 제출하기 전에 입력 필드를 채워야 함을 지정-->
<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form>

<!-- 단계 속성 
입력 step속성은 입력 필드의 유효한 숫자 간격을 지정
예 : step = "3"인 경우 유효한 숫자는 -3, 0, 3, 6 등이 될 수 있습니다.-->
<form>
  <label for="points">Points:</label>
  <input type="number" id="points" name="points" step="3">
</form>

<!-- 자동 초점 속성 
input 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>

<!-- 높이 및 너비 속성 
입력 height및 width속성은 <input type="image">요소 의 높이와 너비를 지정합니다 .-->
<form>
  <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="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<!-- 
목록 속성
입력 list속성은 <datalist><input> 요소에 대해 사전 정의 된 옵션을 포함 하는 요소를 참조합니다 . -->
	<form>
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</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>



<!-- HTML 입력 양식 * 속성 -->
<!-- 
양식 속성
입력 form속성은 <input>요소가 속한 양식을 지정합니다 .
이 속성의 값은 해당 속성이 속한 <form> 요소의 id 속성과 동일해야 -->
<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">

<!-- formaction 속성 
입력 formaction속성은 양식이 제출 될 때 입력을 처리 할 파일의 URL을 지정
이 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>

<!-- formenctype 속성 
입력 formenctype 속성은 제출시 양식 데이터를 인코딩하는 방법을 지정합니다 (method = "post"인 양식에만 해당).-->
<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>

<!-- formmethod 속성 
입력 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>

<!-- 
formnovalidate 속성
입력 formnovalidate속성은 <input> 요소가 제출 될 때 유효성을 검사하지 않아야 함을 지정합니다. -->
<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>
<!-- 
novalidate 속성
novalidate속성은입니다 <form>속성.

존재하는 경우 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>

</body>
</html>

<!-- HTML 양식 https://www.w3schools.com/html/html_forms.asp
	HTML 입력 양식 * 속성 https://www.w3schools.com/html/html_form_attributes_form.asp 까지 -->

 



'dev. > Publishing' 카테고리의 다른 글

w3schools.com - HTML Tutorial  (0) 2021.02.18

HTML Tutorial

www.w3schools.com/html/default.asp

 

HTML Tutorial

HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy Learning with HTML "Try it Yourself" With our "Try it Yourself" editor,

www.w3schools.com

W3schools.com 요악 및 정리 

더보기

내용
HTML Tutorial 
HTML HOME 
HTML Introduction 
HTML Editors 
HTML Basic 
HTML Elements 
HTML Attributes 
HTML Headings 
HTML Paragraphs 
HTML Styles 
HTML Formatting 
HTML Quotations 
HTML Comments 
HTML Colors 
HTML CSS 
HTML Links 
HTML Images 
HTML Tables 
HTML Lists 
HTML Block & Inline 
HTML Classes 
HTML Id 
HTML Iframes 
HTML JavaScript 
HTML File Paths 
HTML Head 
HTML Layout 
HTML Responsive 
HTML Computercode 
HTML Semantics 
HTML Style Guide 
HTML Entities 
HTML Symbols 
HTML Emojis 
HTML Charset 
HTML URL Encode 
HTML vs. XHTML

내용
HTML Tutorial 
HTML HOME 
HTML Introduction 
HTML Editors 
HTML Basic 
HTML Elements 
HTML Attributes 
HTML Headings 
HTML Paragraphs 
HTML Styles 
HTML Formatting 
HTML Quotations 
HTML Comments 
HTML Colors 
HTML CSS 
HTML Links 
HTML Images 
HTML Tables 
HTML Lists 
HTML Block & Inline 
HTML Classes 
HTML Id 
HTML Iframes 
HTML JavaScript 
HTML File Paths 
HTML Head 
HTML Layout 
HTML Responsive 
HTML Computercode 
HTML Semantics 
HTML Style Guide 
HTML Entities 
HTML Symbols 
HTML Emojis 
HTML Charset 
HTML URL Encode 
HTML vs. XHTML


▶ HtmlTutorial_1

HTML Tutorial 
HTML HOME 
HTML Introduction 
HTML Editors 
HTML Basic 
HTML Elements 
HTML Attributes 
HTML Headings 
HTML Paragraphs 
HTML Styles 
HTML Formatting 
HTML Quotations 
HTML Comments 
HTML Colors

❕ HTML
- Hyper Text Markup Language
- 웹 페이지를 만들기위한 표준 마크 업 언어
- 웹 페이지의 구조를 설명
- 일련의 요소로 구성
- HTML 요소는 콘텐츠를 표시하는 방법을 브라우저에 알려줍니다.
- HTML 요소는 "이것은 제목입니다", "이것은 단락입니다", "이것은 링크입니다"등과 같은 콘텐츠 조각에 레이블을 지정합니다.

HTML 구조

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

HTML Tutorial_1.pdf
0.65MB

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<!--제목: <h1> ~ <h6> 태그-->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<h1 style="font-size:60px;">Heading 1</h1>

<!--단락 <p>
 항상 새 줄에서 시작되며 브라우저는 단락 앞뒤에 공백 (여백)을 자동으로 추가-->
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<!--HTML 링크 <a>
	href 속성-->
<a href="https://www.w3schools.com">This is a link</a>

<!--HTML 이미지 <img> 
	소스 파일 ( src), 대체 텍스트 ( alt) width, 및 height 속성-->
<img src="sj.png" alt="W3Schools.com" width="104" height="142">

<!--툴팁 <p>
	title 속성-->
<p title="I'm a tooltip">This is a paragraph.</p>

<!--수평선 <hr> -->
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

<!--줄바꿈 <br> -->
<p>This is<br>a paragraph<br>with line breaks.</p>

<!--서식이 지정된 텍스트 : <pre> -->
<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>

<!-- ----------------------------- HTML 스타일 ----------------------------- -->	

<!--스타일 style 
	배경 색상 	background-color 
	텍스트 색상 	color 
	글꼴 		font-family 
	텍스트 크기 	font-size 
	텍스트 정렬	text-align 

	-->
<h1 style="background-color:powderblue;">This is a heading</h1>
<h1 style="color:blue;">This is a heading</h1>
<h1 style="font-family:verdana;">This is a heading</h1>
<h1 style="font-size:300%;">This is a heading</h1>
<h1 style="text-align:center;">Centered Heading</h1>

<!--
	<b> 		- 굵은 텍스트
	<strong> 	-중요한 텍스트
	<i> 		-기울임 꼴 텍스트
	<em> 		-강조된 텍스트
	<mark> 		-표시된 텍스트
	<small> 	-더 작은 텍스트
	<del> 		-삭제 된 텍스트
	<ins> 		-삽입 된 텍스트
	<sub> 		-아래 첨자 텍스트
	<sup> 		-위첨자 텍스트
-->
<b>This text is bold</b>
<strong>This text is important!</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<small>This is some smaller text.</small>
<p>Do not forget to buy <mark>milk</mark> today.</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>

<!-- 인용문 <blockquote> 
	들여 쓰기-->
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

<!-- 짧은 인용문 <q>
	인용문 주위에 인용 부호("")를 삽입-->
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

<!-- 약어용 <abbr>
	요소 위로 마우스를 가져갈 때 약어 / 약어에 대한 설명을 표시하려면 전체 title 속성 사용 -->
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

<!-- 연락처 정보 용 <address> 
이메일 주소, URL, 실제 주소, 전화 번호, 소셜 미디어 핸들 등이 될 수 있습니다.
기울임 꼴 , 줄바꿈-->
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

<!-- 작품 제목 <cite> 
작품 (예 : 책,시, 노래, 영화, 그림, 조각 등)의 제목을 정의
기울임 꼴 -->
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

<!-- 현재 텍스트 방향을 재정의 <bdo> 
BDO는 Bi-Directional Override를 의미 -->
<bdo dir="rtl">This text will be written from right to left</bdo>

<!-- 테두리 색상 border -->
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

<!-- 색상 지정
	RGB 값, HEX 값, HSL 값, RGBA 값 및 HSLA 값을 사용하여 색상을 지정 
	RGBA 및 HSLA 값 투명도 가능 아래 예시는 투명도 50% 
	hsl ( 색조 , 채도 , 밝기 )
	hsla ( 색조, 채도 , 밝기, 알파 ) -->
<h1 style="background-color:rgb(255, 99, 71);">Hello</h1>
<h1 style="background-color:#ff6347;">Hello</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">Hello</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">Hello</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">Hello</h1>

<!--HTML 홈 https://www.w3schools.com/html/default.asp 부터 
	HTML 색상 https://www.w3schools.com/html/html_colors.asp 까지 -->
</body>
</html>

▶ HtmlTutorial_2

HTML CSS
HTML Links

CSS
CSS (Cascading Style Sheets)는 웹 페이지의 레이아웃 형식을 지정하는 데 사용

<!DOCTYPE html>
<html>
<head>
	<title></title>

<style type="text/css">

/* border 테두리 
   padding 패딩
   		 텍스트와 테두리 사이의 패딩 (공백)을 정의
   margin 마진 여백 
   		margin속성은 테두리 외부의 여백 (공백)을 정의*/
/*
p {
  border: 2px solid powderblue;
  padding: 30px;
}

p {
  border: 2px solid powderblue;
  margin: 50px;
}
*/
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

<!--HTML 링크 
	target속성
		_self- 기본. 클릭 한 것과 동일한 창 / 탭에서 문서를 엽니 다.
		_blank -새 창 또는 탭에서 문서를 엽니 다.
		_parent -상위 프레임에서 문서를 엽니 다.
		_top -창 전체에 문서를 엽니 다.-->
<a href="https://www.w3schools.com/" target="_self ">Visit W3Schools!</a>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
<a href="https://www.w3schools.com/" target="_parent">Visit W3Schools!</a>
<a href="https://www.w3schools.com/" target="_top">Visit W3Schools!</a>

<!--HTML 링크-이미지를 링크로 사용  -->
<a href="https://www.google.com/">
	<img src="sj.png" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

<!-- 이메일 주소에 연결 
	mailto:내부를 사용 href하여 사용자의 이메일 프로그램을 여는 링크를 만듭니다-->
<a href="mailto:someone@example.com">Send email</a>

<!-- 링크 버튼 
	HTML 버튼을 링크로 사용하려면 JavaScript 코드를 추가해야함 -->
<button onclick="document.location='HtmlTutorial_1.html'">HTML Tutorial</button>

<!-- 링크 제목 
	title속성은 요소에 대한 추가 정보를 지정-->
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML section">Visit our HTML Tutorial</a>

<!-- HTML 링크 색상 
	CSS를 사용하여 링크 상태 색상을 변경-->

<!-- HTML 스타일 CSS https://www.w3schools.com/html/html_css.asp 부터 
	https://www.w3schools.com/html/html_links.asp까지 -->
</body>
</html>

<!--  -->

▶ HtmlTutorial_3

HTML Links

<!DOCTYPE html>
<html>
<head>
	<title></title>

<style>

/*HTML 링크 색상
	아래 스타일 적용 결과는 
	방문하지 않은 링크는 밑줄이없는 녹색
	방문한 링크는 밑줄이없는 분홍색
	활성 링크는 노란색으로 밑줄
	마우스를 가져 가면 빨간색과 밑줄
	*/
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}


/*CSS를 사용하여 링크 스타일을 단추로 지정*/
.visitGoogle:link, .visitGoogle:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.visitGoogle:hover, .visitGoogle:active {
  background-color: red;
}

</style>
</head>
<body>

<a href="https://google.com/" target="_blank ">Visit google!</a>

<!-- 링크버튼 -->
<a href="https://google.com/" target="_blank " class="visitGoogle">Visit google!</a>

</body>
</html>
<!-- HTML 링크-다른 색상 hhttps://www.w3schools.com/html/html_links_colors.asp 부터 
	까지 -->

▶ HtmlTutorial_4

HTML Images

HtmlTutorial_4.pdf
0.63MB

<!DOCTYPE html>
<html>
<head>
	<title></title>

<style>


</style>
</head>
<body>

<!-- HTML 링크-북마크
사용 id속성 (ID = " 값을 페이지에 책갈피를 정의하는")
사용 href속성 (HREF = "#의 값을 북마크에 링크") -->
<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>
<br>

<!-- HTML 이미지 <img> 
<img>태그는 속성 만 포함하고, 닫는 태그가없음
<img>태그는 두 개의 필수 속성 
	src-이미지의 경로를 지정합니다.
	alt-이미지의 대체 텍스트를 지정합니다.-->
<img src="sj.png" alt="Italian Trulli">
<img src="sj2.png" alt="Girl in a jacket">
<img src="sj3.png" alt="Flowers in Chania">

<!-- 이미지 플로팅 
	float속성을 사용하여 이미지가 텍스트의 오른쪽 또는 왼쪽으로 떠오르게합니다.-->
<p><img src="sj4.png" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="sj3.png" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

<br>

<!-- 이미지 맵 
	이미지 : <img> 다른 이미지와 유일한 차이점은 usemap속성을 추가해야한다는 것
	이미지 맵 생성 : - -->
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm" onclick="clickedcoffee()">
</map>


<img src="frenchfood.jpg" alt="French Food" usemap="#foodmap" width="450" height="675">
<map name="foodmap">
  <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" alt="Croissant" href="croissant.htm">
</map>

</body>
</html>

<script>
function clickedcoffee() {
  alert("You clicked the coffee cup!");
}
</script>

<!-- HTML 링크-다른 색상 hhttps://www.w3schools.com/html/html_links_colors.asp 부터 
	HTML 이미지 맵 https://www.w3schools.com/html/html_images_imagemap.asp 까지 -->

▶ HtmlTutorial_5

HTML Images

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>

body {
	/*배경 반복*/
 /* background-image: url('sj4.png');
  background-repeat: no-repeat;*/

	/*배경 표지*/
 /* background-image: url('sj4.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;*/

  /*배경 늘이기*/
  background-image: url('sj4.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}

</style>
</head>
<body>

<h2>Background Repeat</h2>

<p>By default, the background image will repeat itself if it is smaller than the element where it is specified, in this case the body element.</p>

<div >

<!-- HTML 요소의 배경 이미지 -->
<!-- <div style="background-image: url('sj3.png');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div> -->

</body>
</html>

<script>

</script>

<!-- HTML 배경 이미지 https://www.w3schools.com/html/html_images_background.asp 부터 
	 까지 -->

▶ HtmlTutorial_6

HTML Images
HTML Tables
HTML Lists

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>

table, th, td {
  border: 1px solid black;
  /*테두리가 하나의 테두리로 축소되도록하려면 border-collapse 속성*/
  border-collapse: collapse;
  text-align: left;
  /*표의 테두리 간격을 설정하려면 CSS border-spacing속성*/
  /*border-spacing: 5px;*/
}

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

/*ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}*/

</style>
</head>
<body>

<!-- HTML <picture> 요소 -->
<picture>
  <source media="(min-width: 650px)" srcset="sj2.png">
  <source media="(min-width: 465px)" srcset="sj3.png">
  <img src="sj4.png">
</picture>

<picture>
  <source srcset="sj3.png">
  <source srcset="sj2.png">
  <img src="sj4.png" alt="Beatles" style="width:auto;">
</picture>

<!-- HTML 테이블 -->

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

<br>

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

<br>

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

<br>

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

<br>

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

<!-- HTML 목록 
정렬되지 않은 HTML 목록 :  <ul>, 목록 항목은 <li>태그 
정렬 된 HTML 목록 : <ol>, 목록 항목은 <li>태그 
HTML 설명 목록 : <dl> 상기 설명 목록, <dt> 태그 용어 (이름), <dd> 용어 설명-->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

<ul style="list-style-type:disc;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:circle;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:none;">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol

<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol>
  <li>Coffee</li>
  <li>Tea
    <ol>
      <li>Black tea</li>
      <li>Green tea</li>
    </ol>
  </li>
  <li>Milk</li>
</ol>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>


</body>
</html>


<script>

</script>

<!-- HTML <picture> 요소 https://www.w3schools.com/html/html_images_picture.asp 부터 
	HTML 기타 목록  https://www.w3schools.com/html/html_lists_other.asp 까지 -->

▶ HtmlTutorial_7

HTML Block & Inline
HTML Classes
HTML Id
HTML Iframes
HTML JavaScript
HTML File Paths
HTML Head

<!DOCTYPE html>
<html>
<head>
  <!-- <link>대부분 외부 스타일 시트에 연결하는 데 사용
  <link rel="stylesheet" href="mystyle.css"> -->
  
  <!-- <meta> 요소 -->
  <meta charset="UTF-8"> <!-- 사용 된 문자 세트 -->
  <meta name="description" content="Free Web tutorials"> <!-- 검색 엔진 용 키워드 정의 -->
  <meta name="keywords" content="HTML, CSS, JavaScript"> <!-- 웹 페이지에 대한 설명을 정의 -->
  <meta name="author" content="John Doe"> <!-- 페이지 작성자  -->
  <!-- <meta http-equiv="refresh" content="30"> <!-- 30 초마다 문서 새로 ​​고침  --> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 웹 사이트가 모든 기기에서보기 좋게 보이도록 뷰포트  -->


  <!-- HTML <base> 요소 
    모든 상대 URL의 기본 URL 및 / 또는 대상을 지정-->
  <base href="https://www.w3schools.com/" target="_blank">

  <!-- <title> 검색 엔진 최적화 (SEO)에 매우 중요  -->
  <title>
     HtmlTutorial_7
  </title>

<style>

.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}

.note {
  font-size: 120%;
  color: red;
}

#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}

</style>
</head>
<body>

<!-- HTML 블록 및 인라인 요소 
- 블록 수준 요소 : 
  항상 새 줄에서 시작 
  항상 사용 가능한 전체 너비를 차지
  위쪽 및 아래쪽 여백이 있지만 인라인 요소에는 없음
- 인라인 요소
  새 줄에서 시작하지 않음. 
  필요한만큼만 너비를 차지
  단락 내부의 <span> 요소

    <div>요소는 블록 레벨이며, 종종 다른 HTML 요소들에 대한 컨테이너로서 사용
    <span>요소는 텍스트의 일부를 표시하는 데 사용 인라인 용기, 또는 문서의 일부
  -->
<div>Hello World</div>
<span>Hello World</span>

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<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>

<!-- HTML 클래스 속성 -->

<button onclick="Hideelements()">Hide elements</button>
<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

<!-- HTML ID 속성 
클래스와 ID의 차이점
클래스 이름은 여러 HTML 요소에서 사용할 수 있지만 ID 이름은 페이지 내 하나의 HTML 요소에서만 사용해야합니다.
-->
<h1 id="myHeader">My Header</h1>
<button onclick="displayResult()">Change text</button>

<p><a href="#C4">Jump to Chapter 4</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<!-- HTML Iframe 구문 
    <iframe>태그는 인라인 프레임을 지정
    인라인 프레임은 현재 HTML 문서 내에 다른 문서를 포함하는 데 사용-->
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

<!-- HTML 자바 스크립트 -->
<p id="demo"></p>

</body>
</html>

<script>
//JavaScript에서 클래스 속성 사용
function Hideelements() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}

// 자바 스크립트에서 id 속성 사용
function displayResult() {
  document.getElementById("myHeader").innerHTML = "Have a nice day!";
}

document.getElementById("demo").innerHTML = "Hello JavaScript!";
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
// document.getElementById("image").src = "sj4.png";

</script>
<!-- <noscript>태그는 브라우저에서 스크립트를 비활성화했거나 스크립트를 지원하지 않는 브라우저가있는 사용자에게 표시 할 대체 콘텐츠를 정의 -->
<noscript>Sorry, your browser does not support JavaScript!</noscript>


<!-- HTML 블록 및 인라인 요소 https://www.w3schools.com/html/html_blocks.asp부터 
	 HTML- 헤드 요소 https://www.w3schools.com/html/html_head.asp 까지 -->

▶ HtmlTutorial_8

HTML Layout
HTML Responsive

HTML Layout Techniques
CSS float property
CSS flexbox
CSS grid

 

● ::before / ::after 

css-tricks.com/almanac/selectors/a/after-and-before/

blog.naver.com/PostView.nhn?blogId=hyejin2351&logNo=221383144111&parentCategoryNo=&categoryNo=219&viewDate=&isShowPopularPosts=true&from=search

 

CSS 가상 요소 ::before와 ::after

포스팅 목차>> 1. 가상요소 ::before, ::after의 정의 1.1) 가상요소(Pseudo-Element)란 ? 1.2) ::...

blog.naver.com

clear: both

float 한 뒤에는 clear : both;

float 

- 박스를 좌측이나 우측으로 붙이고 아래 내용이 그 주변을 흐르게 하는 속성

- float 한 박스에 width 값을 주어야 모든 브라우저에서까지도 동일한 결과

clear: both

- float한 박스들의 바로 아래 박스에게 주변을 흐르지 않고 원래대로 배치하도록 하는 속성 

- 이 요소는 블록 이어야 함

- clear: both 를 부여할 가짜 요소를 만들어 준다. :after 선택자를 이용하 실제로 없는 마지막 박스를 만들고 내용을 비워둔다. 거기에 clear: both 

<clear 속성>

none (기본값) : clear 속성을 설정하지 않은 것과 같다.

left : 왼쪽으로 붙는 float 정렬을 취소 한다.

right: 오른쪽으로 붙는 float 정렬을 취소 한다.

both : 왼쪽, 오른쪽 모두 붙는 float 정렬을 취소한다.

 

box-sizing: border-box
box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성

테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉬움. 

 

 - HtmlTutorial_8_LayoutFloat.html 

<!DOCTYPE html>
<html>
<head>
  <title>
     HtmlTutorial_8
  </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/*CSS Layout Float*/
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 30%;
  height: 300px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

article {
  float: left;
  padding: 20px;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}

</style>
</head>
<body>

<h2>1. CSS Layout Float</h2>

<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>

<header>
  <h2>Cities</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

<script>


</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>



<!--HTML 레이아웃 요소 및 기법 https://www.w3schools.com/html/html_layout.asp 부터 
    까지 -->

 

- HtmlTutorial_8_LayoutFlexbox

 

● css 접두어 webkit , moz, ms , o 의미 ? 

크로싱 브라우저 처리

-webkit- : 구글, 사파리, 브라우저 적용 (webkit 크롬과 사파리가 채용한 웹 브라우저 엔진)

-moz- : 파이어 폭스

-ms- : 익스플로러 (보통 생략)

-o- : 오페라

 

● flex-direction : column 

플렉스 컨테이너 내의 아이템 배치할때 사용하는 주축 및 방향 (정방향, 역방향) 을 지정

 

/* 한 줄의 글을 작성하는 방향대로 */

flex-direction: row;

 

/* <row>처럼, 대신 역방향 */

flex-direction: row-reverse;

 

/* 글 여러 줄이 쌓이는 방향대로 */

flex-direction: column;

 

/* <column>처럼, 대신 역방향 */

flex-direction: column-reverse;

 

/* 전역 값 */

flex-direction: inherit;

flex-direction: initial;

flex-direction: unset;

 

developer.mozilla.org/ko/docs/Web/CSS/flex-direction

 

flex-direction - CSS: Cascading Style Sheets | MDN

flex-direction CSS 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다. The source for this interactive example is stored in a GitHub repository. If you'd like to contribut

developer.mozilla.org

<!DOCTYPE html>
<html>
<head>
  <title>
     HtmlTutorial_8
  </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/*CSS Layout Flexbox*/
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Container for flexboxes */
section {
  display: -webkit-flex;
  display: flex;
}

/* Style the navigation menu */
nav {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

/* Style the content */
article {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
  background-color: #f1f1f1;
  padding: 10px;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {
  section {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}

</style>
</head>
<body>

<h2>2. CSS Layout Flexbox</h2>
<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.</p>

<header>
  <h2>Cities</h2>
</header>

<section>
  <nav>
    <ul>
      <li><a href="#">London</a></li>
      <li><a href="#">Paris</a></li>
      <li><a href="#">Tokyo</a></li>
    </ul>
  </nav>
  
  <article>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
    <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
  </article>
</section>

<footer>
  <p>Footer</p>
</footer>

</body>
</html>

<script>


</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>




<!--HTML 레이아웃 요소 및 기법 https://www.w3schools.com/html/html_layout.asp 부터 
    까지 -->

 

- HtmlTutorial_8

 

● @media screen and (max-width:800px) { ... } 

미디어 타입 screen, 화면 최대 너비(브레이크 포인트) 800px

<!DOCTYPE html>
<html>
<head>
  <title>
     HtmlTutorial_8
  </title>

<meta charset="utf-8">

<!-- 반응 형 웹 사이트를 만들려면 <meta> 모든 웹 페이지에 다음 태그를 추가 
페이지의 뷰포트가 설정되어 페이지의 크기와 크기 조정을 제어하는 ​​방법에 대한 브라우저 지침을 제공-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

* {
  box-sizing:border-box;
}

.left {
  background-color:#2196F3;
  padding:20px;
  float:left;
  width:20%; /* The width is 20%, by default */
}

.main {
  background-color:#f1f1f1;
  padding:20px;
  float:left;
  width:60%; /* The width is 60%, by default */
}

.right {
  background-color:#4CAF50;
  padding:20px;
  float:left;
  width:20%; /* The width is 20%, by default */
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .left, .main, .right {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

</style>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>Responsive Image</h2>
<p>When the CSS width property is set in a percentage value, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p>

<!-- CSS width속성이 100 %로 설정되어 있으면 이미지가 반응 형으로 확대 및 축소 -->
<img src="img_girl.jpg" style="width:100%;">

<!-- 위의 예에서 이미지는 원래 크기보다 크게 확대 될 수 있습니다. 대부분의 경우 더 나은 솔루션은 max-width속성을 대신 사용
max-width속성을 100 %로 설정하면 이미지는가있는 경우 축소,하지만 원래 크기보다 크게 확장하지 않음 -->
<img src="img_girl.jpg" style="max-width:100%;height:auto;">

<!-- 브라우저 너비에 따라 다른 이미지 표시 
브라우저 창 크기를 조정하여 너비에 따라 아래 이미지가 어떻게 변경되는지 확인-->
<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_smallflower.jpg" alt="Flowers">
</picture>

<!-- 반응 형 텍스트 크기 
텍스트 크기는 "뷰포트 너비"를 의미하는 "vw"단위로 설정
뷰포트는 브라우저 창 크기입니다. 1vw = 뷰포트 너비의 1 %. 뷰포트의 너비가 50cm이면 1vw는 0.5cm입니다.-->
<h1 style="font-size:10vw">Hello World</h1>

<!-- 미디어 쿼리 -->
<!-- 예 : 아래 세 개의 div 요소가 큰 화면에 가로로 표시되고 작은 화면에 세로로 쌓 이도록 브라우저 창 크기를 조정 
style 코드 참고-->

<div class="left">
  <p>Left Menu</p>
</div>

<div class="main">
  <p>Main Content</p>
</div>

<div class="right">
  <p>Right Content</p>
</div>

</body>
</html>

<script>

</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

<!-- HTML 반응 형 웹 디자인 https://www.w3schools.com/html/html_responsive.asp부터 
    까지 -->

 

- HtmlTutorial_8_responsivePage

● display:block;

display : inline 

기본값. 요소를 inline 요소처럼 표시 (줄바꿈 없음)

 

display : block

block 요소처럼 표시(줄바꿈 있음)

display : none

none 박스가 생성되지 않음 (공간 0 ) 

 

display : inline-block

inline 이지만 내부는 block 요소처럼 표시 (박스가 inline 처럼 옆으로 쌓임) 

 

developer.mozilla.org/ko/docs/Web/CSS/display

 

display - CSS: Cascading Style Sheets | MDN

display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다. display 속성은, 형식적으로는

developer.mozilla.org

o7planning.org/12049/bootstrap-display

 

Bootstrap Display

1- Bootstrap Display Utility Display Utility is part of Bootstrap. It builds a system of classes that helps you control the display (or hiding) of elements. Controls how the elements will display and react to the size changes of parent element. These cla

o7planning.org

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
* {
  box-sizing: border-box;
}
.menu {
  float:left;
  width:20%;
  text-align:center;
}
.menu a {
  background-color:#e5e5e5;
  padding:8px;
  margin-top:7px;
  display:block;
  width:100%;
  color:black;
}
.main {
  float:left;
  width:60%;
  padding:0 20px;
}
.right {
  background-color:#e5e5e5;
  float:left;
  width:20%;
  padding:15px;
  margin-top:7px;
  text-align:center;
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div style="overflow:auto">
  <div class="menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>

  <div class="main">
    <h2>Lorum Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

  <div class="right">
    <h2>About</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>


<!-- 부트 스트랩 
  head <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> 추가 후 사용-->
<div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p> 
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>        
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>


</body>
</html>
<!-- HTML 반응 형 웹 디자인 https://www.w3schools.com/html/html_responsive.asp부터 
    까지 -->

▶ HtmlTutorial_9

HTML Computercode
HTML Semantics
HTML Style Guide
HTML Entities
HTML Symbols
HTML Emojis
HTML Charset
HTML URL Encode
HTML vs. XHTML

XHTML 
X tensible H yper T EXT M arkup L의 anguageXHTML은보다 엄격하고 XML 기반의 HTML 버전.
XHTML은 XML 애플리케이션으로 정의 된 HTML.
XHTML은 모든 주요 브라우저에서 지원됩니다.

XHTML은 다른 데이터 형식 (예 : XML)과 작업 할 수 있도록 HTML을보다 확장 가능하고 유연하게 만들기 위해 개발되었습니다. 
또한 브라우저는 HTML 페이지의 오류를 무시하고 마크 업에 오류가 있더라도 웹 사이트를 표시하려고합니다. 
따라서 XHTML은 훨씬 더 엄격한 오류 처리와 함께 제공

HTML과의 가장 중요한 차이점
<! DOCTYPE>은 필수입니다.
<html>의 xmlns 속성은 필수입니다.
<html>, <head>, <title> 및 <body>는 필수입니다.
요소는 항상 적절하게 중첩 되어야합니다.
요소는 항상 닫혀 있어야합니다.
요소는 항상 소문자 여야합니다.
속성 이름은 항상 소문자 여야합니다.
속성 값은 항상 따옴표 로 묶어야합니다.
속성 최소화는 금지되어 있습니다.

W3C 유효성 검사기로 HTML 유효성 검사
https://validator.w3.org/nu/
<!DOCTYPE html>
<html>
<head>
<style>

/*<article> 요소의 스타일을 지정*/
.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;
}

.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;
}

.browser {
  background: white;
}

.browser > h2, p {
  margin: 4px;
  font-size: 90%;
}




aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}

</style>
</head>

<body>


<!-- HTML 컴퓨터 코드 요소 -->
<code>
x = 5;
y = 6;
z = x + y;
</code>

<!-- 키보드 입력 용 HTML <kbd> -->
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

<!-- 프로그램 출력용 HTML <samp> -->
<p><samp>File not found.<br>Press F1 to continue</samp></p>

<!-- HTML 시맨틱 요소 -->

<!-- HTML <section> 요소 
	섹션은 일반적으로 제목이있는 주제별 콘텐츠 그룹-->
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

<!-- HTML <article> 요소 
독립적 인 자체에 포함 된 내용을 지정-->

<article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
  </article>
</article>

<!-- HTML <footer> 요소 
	<footer>요소는 문서 나 구역의 바닥 글을 정의-->
<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

<!-- HTML <nav> 요소 
	<nav>요소는 탐색 링크의 집합을 정의
	문서의 모든 링크가 <nav>요소 안에 있어야하는 것은 아님-->
<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

<!-- HTML <aside> 요소
<aside>요소가 (a 사이드 등)에 저장되는 내용을 제외하고 어떤 콘텐츠를 정의 -->
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<!-- HTML <figure> 및 <figcaption> 요소 
<figure>등 그림, 도표, 사진, 코드 목록과 같은 태그를 지정 자체에 포함 된 내용,
<figcaption>태그는 대한 캡션을 정의하는 <figure>요소
<figcaption>요소가 최초로 또는 마지막 자식으로 배치 될 수 <figure>소자. -->
<figure>
  <img src="sj.png" alt="Trulli">
  <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption>
</figure>

<!-- HTML 스타일 가이드 및 코딩 규칙 
- 항상 문서 유형 선언 <!DOCTYPE html> 
- 소문자 요소 이름 사용 <body> 
- 모든 HTML 요소 닫기 
- 소문자 속성 이름 사용 
- 항상 속성 값 인용 <table class="striped"> 
- 항상 이미지의 alt, 너비 및 높이 지정
	<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
- <title> 요소를 건너 뛰지 마십시오.
- lang 속성 추가 <html lang="en-us">
- 메타 데이터 <meta charset="charset">
- 뷰포트 설정 <meta name="viewport" content="width=device-width, initial-scale=1.0">
	-->


<!-- HTML 문자 엔터티 -->
<p>&nbsp; &lt; &gt; &copy; &yen; a&#768; &forall; &sum; </p>

<!-- HTML에서 이모티콘 사용 -->
<p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p>

<!-- HTML Uniform Resource Locators 
scheme://prefix.domain:port/path/filename-->


<!-- HTML 대 XHTML -->



<!-- HTML에서 JavaScript로드 
	<script src="myscript.js"> -->
<script>

getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";

</script>

</body>
</html>
<!-- HTML 컴퓨터 코드 요소 https://www.w3schools.com/html/html_computercode_elements.asp부터 
HTML Versus XHTML https://www.w3schools.com/html/html_xhtml.asp 까지 -->


HTML Tutorial

www.w3schools.com/html/default.asp

 

HTML Tutorial

HTML Tutorial HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! Start learning HTML now » Easy Learning with HTML "Try it Yourself" With our "Try it Yourself" editor,

www.w3schools.com

W3schools.com 요악 및 정리 

더보기

내용
HTML Tutorial
HTML HOME
HTML Introduction
HTML Editors
HTML Basic
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Styles
HTML Formatting
HTML Quotations
HTML Comments
HTML Colors
HTML CSS
HTML Links
HTML Images
HTML Tables
HTML Lists
HTML Block & Inline
HTML Classes
HTML Id
HTML Iframes
HTML JavaScript
HTML File Paths
HTML Head
HTML Layout
HTML Responsive
HTML Computercode
HTML Semantics
HTML Style Guide
HTML Entities
HTML Symbols
HTML Emojis
HTML Charset
HTML URL Encode
HTML vs. XHTML

 

'dev. > Publishing' 카테고리의 다른 글

w3schools.com - HTML Form  (0) 2021.02.22

+ Recent posts