HTML 기초 정리

ㅎㅎ·2021년 3월 17일
0

HTML/CSS

목록 보기
1/5


: Code Academy HTML 정리


📌 HTML?

: HTML stands for HyperText Markup Language

HTML DOCUMENT STANDARDS

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

Attibute

  • Attributes are content added to the opening tag of an element
  • the name of attribute - ex) id
  • the value of attribute ex) intro
<div id="intro">
  <h1>Introduction</h1>
</div>

Text

  • <p> - plain text
  • <span> - 주로 텍스트 안의 짧은 텍스트를 위해 사용.
  • <em> - italic체
  • <strong> -bold
  • <br> - line break. 클로징태그X

List

  • <ul> - unordered list
  • <Ol> - ordered list
  • <li> - list

Images

  • <img> - self-closing tag
  • src는 이미지 소스나 위치를 위해서 사용.
<img src="image-location.jpg" />
  
  • alt는 추가적인 이미지 설명하기위해 사용.
<img src="#" alt="A field of yellow sunflowers" />

Video

  • <video> - 이미지와 다르게 클로징태그 필요함
  • src 에는 url이나 파일을 위해 사용.
  • control는 정지나 재생, 스킵 버튼을 만듬.
  • 안에 텍스트는 만약 비디오를 불러올 수 없으면 나타남.
<video src="myVideo.mp4" width="320" height="240" controls>
  Video not supported
</video>

Linking to

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

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

Forms

  • Computers need an HTTP request to know how to communicate. The HTTP request instructs the receiving computer how to handle the incoming information.
  • <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 accept
    -> type: text,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를 갖고 있음.
    • (각각의 id는 lable을 연결시키기위해, name은 체크박스를 묶기위해, 밑의 value는 보이지않아서 꼭 lable과 연결시켜야함.)
<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>

Form validation

  • 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.
    Regular expressions
<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>

Semantic HTML

  • The word semantic means “relating to meaning,” so semantic elements provide information about the content between the opening and closing tags. Elements such as <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. 곧 없어질 태그.

0개의 댓글