HTML을 간단하게 알아보자

HyperText Markup Language

• 웹 페이지를 기술하기 위한 markup 언어
• 웹 페이지의 내용(content)과 구조(structure)를 담당하는 언어
• html tag를 통해 정보를 구조화
   
   

요소 (element) = start tag + content + end tag

• 요소는 중첩 가능
• 빈 요소: content가 없는 요소 (br, hr, img, input, link, meta, …)

 

 

 

BOX or ITEM
main - section - article (반복되는 것들을 묶어주는 구조)

 

 

 

 

속성 (attribute)

• 요소의 성질, 특징을 정의
• 이름 = 값
• 주석: <!-- 주석 -->

 

시맨틱 태그

브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명

 

시맨틱 웹

• 웹 페이지들에 메타데이터(데이터를 설명)를 부여하여 웹 페이지를 ‘의미’와
  ‘관련성’을 가지는 거대한 database로 구축하고자 하는 발상
• non-semantic element: div, span, …
• semantic element
• form, table, img, …
• header, nav, aside, section, article, footer

 

 

Structure

웹 페이지의 레이아웃을 위해 공간 분할하는 tag

• div, span, table: 다른 요소를 포함하는 container 역할
• semantic tag를 이용하는 것이 바람직: header, nav, aside, section, article, footer

 

 

 

메타태그

•  <meta name=‘keywords’ content=“HTML, CSS, XML”>
• </meta name=‘description’ content=“web tutorial”>
• </meta name=‘description’ content=“web tutorial”>
• <meta http-equiv=“refresh” content=“30”>

택스트 관련태그

• <h1></h1>, … <h6></h6>
• <b></b>, <strong></strong>, <i></i>, <em></em>,<small></small>
• <mark></mark>, <del></del>, <ins></ins>, ,, <p></p>, <pre></pre>, <q></q>,<blockquote></blockquote>
• <br>, <hr>, &nbsp;

 

하이퍼링크 태그

<a href=“path”> </a>

 

<a href="http://www.google.com">URL</a><br>
<a href="html/my.html">Local file</a><br>
<a href="file/my.pdf" download>Download file</a><br>
<a href="#">fragment identifier</a><br>
<a href="mailto:someone@example.com?Subject=Hello again">SendMail</a><br>
<a href="javascript:alert('Hello');">Javascript</a>

 

 

 

 

 

 

 

 

사용자와의 커뮤니케이션

<form></form>

• input, textarea, button, select, checkbox, radio button, submit, button, …
• action = ‘url’, method = ‘get/post’
• GET 방식: 전송 url에 입력 데이터를 query string으로 보냄
  http://jsonplaceholder.typicode.com/posts?userId=1&id=1
• POST 방식: request body에 담아 보냄
  http://jsonplaceholder.typicode.com/posts