작성일자 : 2023-12-09
Ver 0.1.2
<!-- HTML 표준 작성 형식 -->
<!DOCTYPE html>
<html>
<head> <!-- 웹 브라우저에는 보이지 않지만, 웹 브라우저가 알아야 할 정보들은 모두 이 태그 안에 들어간다. -->
<meta charset="utf-8"> <!-- 문자 인코딩 태그 -->
<title class = "title">문서의 제목 작성</title>
</head>
<body> <!-- 실제 브라우저 화면에 표시될 내용을 입력하는 태그 -->
<h1>HTML</h1>
<hr> <!-- 구분선 -->
<h2>component of HTML</h2>
<p>- 'p tag' represents one paragraph<br>
- Therefore, one 'p tag' has its own area<br>
- Line breaks in HTML can be done using 'br tag'<br>
- if you want to express more than 2 spaces, use  <br>
- spa ce
</p>
<div id = "Division of Tag">
<p>1.Division of Tag</p>
<p>block level : block is formed by occupying the <em>entire</em> width of the area to which it belongs<br>
inline level : block is formed by occupying <strong>only</strong> the width of the area to which it needs<br><br>
- <strong>This is bold</strong><br>
- <em>This is emphasize</em><br>
- <mark>This is marked</mark>
</p>
</div>
<p>2.img tag<br>
- Form : img scr="img file" alt="explaination of image" width="value of width" height="value of height"<br>
</p>
<img scr="/Users/limjongjun/Desktop/JayJay/Growth/HTML/imge/swoosh.jpeg" alt="html logo" width="300" height="300" title="HTML logo">
<div id="container tag">
<p>3.container tag<br>
- It doesn't affect contents or layout and make it easier to manage by binding other components <br>
- It is good to use when seperating contents or applying same style <br>
- There are two tags : <span>div (block level)</span> & <span>span (inline)</span> <br>
- Global attributes : it is an attribute which can be used commonly in all HTML tags<br>
-> it is additional function, which is option<br>
-> it defines in start tag and has no limit to the number of attributes
</p>
</div>
<div>
<p>4.Link<br>
- a tag (anchor) make link like other page, phone number, E-mail<br>
- a tag is 'inline level' and represent destination of link<br>
- target option can make decision whether to open new content in current tab (default) or new tab<br>
-> <a href="https://nike.com/">
Nike.com
</a><br>
<a href="https://nike.com/">
<img scr="/Users/limjongjun/Desktop/JayJay/Growth/HTML/imge/swoosh.jpeg" width="300">
</a><br>
-> <a href="https://nike.com/" target ="_blank">
Nike.com
</a><br>
-> <a href="tel:010-1234-5678">
010-1234-5678
</a><br>
-> <a href="mailto:jongjoon.lim@dkbmc.com">
jongoon.lim@dkbmc.com
</a><br>
</p>
</div>
<div>
<p>5.List<br>
- it means to enumerate relevant items<br>
- it devided to 'unordered list'(ul) and 'in-order list'(ol)<br>
<ul>
<li><strong>soccer</strong></li>
<li>baseball</li>
<li>basketball</li>
</ul>
<ol>
<li><mark>soccer</mark></li>
<li>baseball</li>
<li>basketball</li>
</ol>
</p>
</div>
<div>
<p>6.input<br>
<ul>
<li>It represents an interactive control capable of receiving a value from a user</li>
<li>It is basically inline level and single tag</li>
<li>Depending on the value of the type, the shape of the input element or the type of input data varies</li>
<li>There are about 20 types available, and the default value is text</li>
<li>Name identifier can be added</li>
</ul>
<input name = "text" type = "text" palceholder ="write message" maxlength="5"/><br>
<input name = "button" type = "button" value = "Complete"/><br>
<input name = "color" type = "color"/> choose color<br>
<input name = "Score" type = "range" min="0" max="100" step = "5"/><br>
<input name = "YYYYMMDD" type = "date"/><br>
</p>
</div>
<div>
<p>7-1.select
<ul>
<li>select tag is the option that can include multiple options</li>
<li>options in menu represent 'option tag'</li>
<li>select tag can assign 'name' and value attribute, which represents the the value that will actually be precessed, can be assigned to each option. </li>
</ul>
<select name = 'sport'>
<option value = "축구">soccer</option>
<option value = "농구">basketball</option>
<option value = "야구">baseball</option>
</select>
<select name = 'sport' multiple>
<option value = "축구">soccer</option>
<option value = "농구">basketball</option>
<option value = "야구" selected>baseball</option>
</select>
</p>
</div>
<div>
<p>7-2. textarea
<ul>
<li>textarea is input element that can input multiple lines of text</li>
<li>it can also add name</li>
</ul>
<textarea name = "letter" rows = "7" cols = "15">please write down contents</textarea>
</p>
</div>
<div>
<p>8. form
<ul>
<li>form tag is used to send user-entered data to the server, providing information</li>
<li>form tag can use submit type of input tag to submit the content of form tag</li>
<li>action : Server URL to which user want to send input values</li>
<li>method : Way of how to send the data entered by client(GET or Post)</li>
<li>GET : get a response after requesting to server</li>
<li>POST : send a request to the server to perform the task(Add,Update,Delete)</li>
</ul>
<form action="exam.php" method = "POST">
<input type = "text" placeholder="NAME" name="name"><br>
<select name="sport">
<option value="soccer">soccer</option>
<option value="baseball">basebball</option>
<option value="basketball">basketball</option>
</select>
<input type="submit" value="전송">
</form>
</p>
</div>
</body>
</html>