<!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 까지 -->
내용 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>
<!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 부터
까지 -->
<!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 부터
까지 -->
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 까지 -->
- 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 크롬과 사파리가 채용한 웹 브라우저 엔진)
<!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 처럼 옆으로 쌓임)
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/
내용 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
@{
var name = "홍길동 ";
var age = 10;
}
<h1>@name 님 환영합니다. </h1>
@if (age == 10)
{
<h2> @name 님은 @age 살 입니다. </h2>
}
else
{
<h2> @name 님은 나이를 알 수 없습니다. </h2>
}
@for (var index = 1; index < 10; index++)
{
<h2> @index 번째 입니다.</h2>
}
Controller에서 View로 데이터 전달
1. New fordels - (Models)
2. Models - new Class (User.cs)
3. Models - User.cs
User.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace AspNetCoreProject.Models
{
public class User
{
//사용자 번호
public int UserNo { get; set; }
//사용자 이름
public string UserName { get; set; }
}
}
4. Controller - HomeController.cs
#1번째 방식 View(model)
return View(hongUser)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using AspNetCoreProject.Models;
namespace AspNetCoreProject.Controllers
{
public class HomeController : Controller
{
//http://www.example.com/Home/Index
public IActionResult Index()
{
//var HongUser = new User();
//HongUser.UserNo = 1;
//HongUser.UserName = "홍길동";
var HongUser = new User
{
UserNo = 1,
UserName = "홍길동"
};
return View(HongUser);
}
public IActionResult Error()
{
return View();
}
}
}
5. View - Index.cshtml
<h1>사용자 번호 : @Model.UserNo</h1>
<h1>사용자 이름 : @Model.UserName</h1>
4-1. Controller - HomeController.cs
#2번째 방식 ViewBag
return View()
4-2. Controller - HomeController.cs
#3번째 방식 ViewData
return View()
EntityFramework Core 소개 및 MS SQL Server
ASP.NET MVC
C# DB 통신
-ADO.NET
-Enterprise Library 5
쿼리문을 직접 작성 > 값을 처리
Logging
=> △ 위 두가지는 쿼리문 직접 작성해야 > 오류 발생의 소지가 높음.
# ORM
Java JPA - 기준 > 하이버네이트
C# Entityframework
Mapper
#게시판 프로젝트
Asp.net MVC , MS SQL, EntityFramework
EntityFramework 1.0~ 6.0 > .net Framework
ASP.NET Core > 7.0 > EntityFramework Core
ASP.NET Core 1.X
EntityFramework Core 1.1
EntityFramework (개발 방식 2가지)
1. Database First 방식
-Database DBA(데이터베이스 관리자)
-설계 완료, 물리적 데이터베이스도 모두 완성된 상태.
=> Database 기준으로 Application 개발
2.Code First 방식
=>Database 기준으로 Application 개발 역으로 Code > Database 생성해 Application 개발
1. Controller - MVC Controller Class 생성 (StudyController.)
Controller - MVC Controller Class 생성 (StudyController.) StudyController.cs 작성
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
namespace AspNetCoreProject.Controllers
{
public class StudyController : Controller
{
// GET: /<controller>/
public IActionResult Index()
{
return View();
}
// IAR > IActionResult
public IActionResult Java()
{
return View();
}
public IActionResult CSharp()
{
return View();
}
public IActionResult Cpp()
{
return View();
}
}
}
@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<h1> StudyContoller - Index 페이지 </h1>
@*
For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<h1> StudyContoller - java 페이지 </h1>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
Console.WriteLine("안녕! C#");
Console.Write("Hello, C#");
}
}
}
List<int> list = new List<int>();List<String> list = new List<String>();var list = new List<int>();***선언과 동시에 초기화함
프로젝트 내 새로운 클래스 User 생성.
getter, setter 선언 방식 비교 **오른쪽 사용!
메서드를 통해 데이터 값 조작
get : 멤버변수 값 반환. return 받기.
set : 멤버변수 값 할당. 저장
-User.cs
User.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleApplication1
{
class User
{
//번호 , 이름 , 나이, 연락처
//porp + tab + tab 단축키 사용
public int No { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public String Phone { get; set; }
}
}
-Program.cs
Program.csProgram.cs (보완)Program.cs (보완2)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
// 1 2 3 4 5 6 7 8 9 10
// 1 2 3 4 5 6 7 8 9 10
// 1 2 3 4 5 6 7 8 9 10
// 2차원적 데이터
// 번호 이름 나이 연락처
// 01 김김김 30 010-1111-1111
// 02 마마마 31 010-1111-1112
var user1 = new User();
user1.No = 1;
user1.Name = "김김김";
var user2 = new User();
user2.No = 2;
user2.Name = "마마마";
var list = new List<User>();
list.Add(user1);
list.Add(user2);
foreach(var user in list)
{
Console.WriteLine("번호 : " + user.No + " / 이름 : " + user.Name);
}
}
}
}
(보완2)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
var list = new List<User>()
{
new User()
{
//Ctrl + Space
No = 1,
Name = "김김김",
Age = 30,
Phone = "010-1111-1111"
},
new User()
{
No = 2,
Name = "마마마",
Age = 31,
Phone = "010 - 1111 - 1112"
}
};
foreach (var user in list)
{
Console.WriteLine("번호 : " + user.No + " / 이름 : " + user.Name);
}
}
}
}
Class, mthod, 클래스 라이브러리
test
-Calc.cs
Calc.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
//클래스명 클래스지정명 = new 클래스명 (); 객체생성
Calc calc = new Calc();
calc.PrintHello();
}
}
}
-Program.cs
Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
//클래스명 클래스지정명 = new 클래스명 (); 객체생성
Calc calc = new Calc();
calc.PrintHello();
}
}
}
calc
-Program.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleApplication1
{
class Program
{
static void Main(string[] args)
{
//클래스명 클래스지정명 = new 클래스명 (); 객체생성
Calc calc = new Calc();
Console.WriteLine(calc.Plus(10, 20));
}
}
}
-Calc.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ConsoleApplication1
{
class Calc
{
public void PrintHello()
{
Console.WriteLine("안녕하세요");
}
public int Plus(int num1, int num2)
{
return num1 + num2;
}
}
}
새로운 프로젝트 생성하여 클래스 작성.
project reference 시킴using FirstLibrary; 입력 후 에러 없음. (using 다른 프로젝트의 클래스명) 또는 Ctrl+. 하여 선택
