: HTML stands for HyperText Markup Language
<!DOCTYPE html>
- the declaration specifying the version of HTML for the browser<html>
- we must add opening and closing tags after declaring <!DOCTYPE html>
<head>
- this lement contains the metadata for a web page. Metadata is information about the page that isn’t displayed directly on the web page. <title>
- page title<!DOCTYPE html>
<html>
<head>
<title>Brown Bears</title>
</head>
id
intro
<div id="intro">
<h1>Introduction</h1>
</div>
<p>
- plain text<span>
- 주로 텍스트 안의 짧은 텍스트를 위해 사용.<em>
- italic체<strong>
-bold<br>
- line break. 클로징태그X<ul>
- unordered list<Ol>
- ordered list<li>
- list<img>
- self-closing tagsrc
는 이미지 소스나 위치를 위해서 사용.<img src="image-location.jpg" />
alt
는 추가적인 이미지 설명하기위해 사용.<img src="#" alt="A field of yellow sunflowers" />
<video>
- 이미지와 다르게 클로징태그 필요함src
에는 url이나 파일을 위해 사용.control
는 정지나 재생, 스킵 버튼을 만듬.<video src="myVideo.mp4" width="320" height="240" controls>
Video not supported
</video>
<a>
- Anchor tags are used to link to internal pages, external pages or content on the same page. 텍스트 넣은 후에 href에 링크 넣기.<a href="https://en.wikipedia.org/wiki/Brown_bear"> Learn More</a>
target
- 에_blank
속성을 넣으면 링크가 새로운 윈도우로 나옴.<a>
에 연결<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">The Brown Bear</a>
<img>
를 <a>
로 감싸기<a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="https://www.Prickly_Pear_Closeup.jpg" alt="A red prickly pear fruit"/></a>
#
을 붙이고 id
이름을 쓰면 그 id로 이동. and id
should be descriptive to make it easier to remember the purpose of a link. <ul>
<li><a href="#introduction">Introduction</a></li>
<li><a href="#habitat">Habitat</a></li>
<li><a href="#media">Media</a></li>
</ul>
<div id="habitat">
<table>
- making table<tr>
-table row 먼저 구성<td>
- table data<th>
-table head, a table heading must be placed within a table row. scope
the use of the scope attribute, which can take one of two values: row and col<table>
<tr>
<th></th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Temperature</th>
<td>73</td>
<td>81</td>
</tr>
</table>
colspan
- 데이터가 하나 이상의 column 속하고 싶을 때 사용. 즉 늘려줌.rowspan
- 데이터가 하나 이상의 row(행)에 속하고 싶을 때 사용. <tr>
<td colspan="2">Out of Town</td>
<td>Back in Town</td>
</tr>
<tbody>
-table body, 테이블이 너무 커졌을 때 사용. The element should contain all of the table’s data, excluding the table headings<thead>
- table head, only the column headings go under the element<tfoot>
- table foot, often used to contain sums, differences, and other data results. <thead>
<tr>
<th scope="col">Company Name</th>
<th scope="col">Number of Items to ship</th>
<th scope="col">Next Action</th>
</tr>
</thead>
<form>
- We need to supply the <form>
element with both the location of where the <form>
s information goes and what HTTP request to make. action
는 정보가 전달될 위치를 결정, method
는 어떤 방식으로 정보를 넘길지(POST,GET). <form action="/example.html" method="POST">
</form>
<input>
- this element has a type attiribute which determines how it renders on the webpage and what kind of data it can accepttext,password,number,range,checkbox,radio,list,submit
text
- text attribute. it’s also important that we include a name
attribute for the <input>
attribute(이름없이는 제출 불가). 사용자가 텍스트를 입력하면 name="value(사용자입력)" 형태로 보내짐. 예시) "first-text-field=important details". 디폴값도 설정 가능.<form action="/example.html" method="POST">
<input type="text" name="first-text-field">
</form>
-> 디폴트 적용 후
<form action="/example.html" method="POST">
<input type="text" name="first-text-field" value="already pre-filled">
</form>
<lable>
- 주로 input을 구별하기 위해 사용. To associate a <label>
and an <input>
, the <input>
needs an id attribute. We then assign the for attribute of the <label>
element with the value of the id attribute of <input>
. input의 id을 lable의 for속성에 넣어줘야 연결.<form action="/example.html" method="POST">
<label for="meal">What do you want to eat?</label>
<br>
<input type="text" name="food" id="meal">
</form>
password
- password attribute.<form>
<label for="user-password">Password: </label>
<input type="password" id="user-password" name="user-password">
</form>
number
- number attribute. we can restrict what users type into the input field to just numbers. step
attribute which creates arrows inside the input field.<form>
<label for="years"> Years of experience: </label>
<input id="years" name="years" type="number" step="1">
</form>
range
- range attribute. mix
, max
, step
적용 가능.<form>
<label for="volume"> Volume Control</label>
<input id="volume" name="volume" type="range" min="0" max="100" step="1">
</form>
cheak box
- checkbox attribute. 각각의 input은 같은 name (=Topping)을 갖고 있어서 checkbox를 하나로 묶을 수 있음.그러나 각각의 input은 label를 연결시키기위해 고유한 id를 갖고 있음.<form>
<p>Choose your pizza toppings:</p>
<label for="cheese">Extra cheese</label>
<input id="cheese" name="topping" type="checkbox" value="cheese">
<br>
<label for="pepperoni">Pepperoni</label>
<input id="pepperoni" name="topping" type="checkbox" value="pepperoni">
<br>
<label for="anchovy">Anchovy</label>
<input id="anchovy" name="topping" type="checkbox" value="anchovy">
</form>
radio
- radio attribute. 옵션을 선택할때. 체크박스처럼 value가 눈에 보이지않아서 꼭 label과 연결을 해줘야함.<form>
<p>What is sum of 1 + 1?</p>
<input type="radio" id="two" name="answer" value="2">
<label for="two">2</label>
<br>
<input type="radio" id="eleven" name="answer" value="11">
<label for="eleven">11</label>
</form>
dropdown list
- <select>
to create the dropdown list and <option>
elements, each with a value attribute. 디폴트로는 하나만. 만약 폼이 제출되면 select의 name과 option의 value가 합쳐져서 제출. "lunch=pizza"형태로 제출됨.<form>
<label for="lunch">What's for lunch?</label>
<select id="lunch" name="lunch">
<option value="pizza">Pizza</option>
<option value="curry">Curry</option>
<option value="salad">Salad</option>
<option value="ramen">Ramen</option>
<option value="tacos">Tacos</option>
</select>
</form>
<datalist>
- The <datalist>
is used with an <input type="text">
element. The <input>
creates a text field that users can type into and filter options from the <datalist>
. 밑의 코드에서 input에 list와 id를 주의할것. list로 datalist로 연결함.<select>
와의 <datalist>
의 큰 차이점은 if none of the s match, 사용자가 타이핑한 텍스트가 들어감. <form>
<label for="city">Ideal city to visit?</label>
<input type="text" list="cities" id="city" name="city">
<datalist id="cities">
<option value="New York City"></option>
<option value="Tokyo"></option>
<option value="Barcelona"></option>
<option value="Mexico City"></option>
<option value="Melbourne"></option>
<option value="Other"></option>
</datalist>
</form>
<textarea>
- for bigger text field. + row
,col
설정가능. 디폴트를 설정하려면 오프닝,클로징태그사이에 쓰기.<form>
<label for="blog">New Blog Post: </label>
<br>
<textarea id="blog" name="blog" rows="5" cols="30">
</textarea>
</form>
submit
- submit form. If there isn’t a value attribute, the default text, Submit shows up on the button. name=value pairs 형태.<form>
<input type="submit" value="Send">
</form>
required
- add to input. 정보를 꼭 넣어야한다고 알려줌.<form action="/example.html" method="POST">
<label for="allergies">Do you have any dietary restrictions?</label>
<br>
<input id="allergies" name="allergies" type="text" required>
<br>
<input type="submit" value="Submit">
</form>
min
,max
- add to input. 최소 최대 설정가능<form action="/example.html" method="POST">
<label for="guests">Enter # of guests:</label>
<input id="guests" name="guests" type="number" min="1" max="4">
<input type="submit" value="Submit">
</form>
minlength
,maxlength
- add to input. checking text length. 만약 조건을 충족하지 않으면 경고창이 뜸.<form action="/example.html" method="POST">
<label for="summary">Summarize your feelings in less than 250 characters</label>
<input id="summary" name="summary" type="text" minlength="5" maxlength="250" required>
<input type="submit" value="Submit">
</form>
pattern
- add to input. we can assign it a regular expression, or regex. users can’t submit the <form>
with a number that doesn’t follow the regex.<form action="/example.html" method="POST">
<label for="payment">Credit Card Number (no spaces):</label>
<br>
<input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
<input type="submit" value="Submit">
</form>
<div>
and <span>
are not semantic elements since they provide no context. we can use <header>
tag instead of a <div>
. <header>
- By using a <header>
tag, our code becomes easier to read. its for either navigational links or introductory content containing <h1>
to <h6>
headings.<nav>
- its used to define a block of navigation links such as menus and tables of contents. 헤더안에 넣기<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
,<footer>
- <main>
is used to encapsulate the dominant content within a webpage. <div>
가 아닌 <main>
을 사용함으로써 안의 중요한 내용(태그) 확인 가능.<main>
<header>
<h1>Types of Sports</h1>
</header>
<article>
<h3>Baseball</h3>
<p>
The first game of baseball was played in Cooperstown, New York in the summer of 1839.
</p>
</article>
</main>
<section>
- it defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. <article>
- this can hold content such as articles, blogs, comments, magazines. 내용에 따라 섹션이 아티클안에 위치할수도 있음.<section>
<h2>Fun Facts About Cricket</h2>
<article>
<p>A single match of cricket can last up to 5 days.</p>
</article>
</section>
<aside>
- additional information list 주석, 참고문헌,,등<figure>
- <figure>
encapsulates all types of media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document. 정보에 추가적으로 이미지를 넣고싶을때?<figcaption>
- <figcaption>
is used to describe the media in <figure>
tag.<figure>
<img src="overwatch.jpg">
<figcaption>This picture shows characters from Overwatch.</figcaption>
</figure>
<audio>
,<video>
controls
: 재생,정지, autoplay
: 자동재생. loop
:반복재생<audio autoplay controls>
<source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>
<video src="coding.mp4" controls>Video not supported</video>
<embed>
- this tag can use any media content including videos, audio files, and gifs from an external source. 곧 없어질 태그.