웹/HTML&CSS

HTML을 간단하게 알아보자

이재빵 2021. 8. 30. 15:01
728x90

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>, <sub></sub>,<sup></sup>, <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>