Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

빅데이터 AI 인공지능 IT 꿀팁 아이팁

HTML Day1 본문

HTML

HTML Day1

아이팁 2021. 3. 1. 20:15

HTML 이란?

HTML 은 Hyper Text Markup Language의 약자로 HyperText(웹페이지에서 다른 페이지로 이동할 수 있도록 하는것)

기능을 가진 문서를 만드는 언어입니다.

 

쉽게 말해, 구조를 설계할 때 사용되는 언어로 Hyper Link 시스템을 가지고 있으며,

흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.

 

Web page?

웹 페이지(Web page)는 월드 와이드 웹 상에 있는 개개의 문서를 가리키는 것입니다.

월드 와이드 웹(World Wide Web, WWW, W3) 은 인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유하는

전 세계적인 정보 공간을 말합니다.

 

HTML 문서 작성을 위한 기본적인 문법

HTML의 문서인 웹 페이지는 Head 영역 그리고 Body 영역으로 구성됩니다.문서의 타이틀(Title)은 웹 페이지의 제목으로 브라우저 탭에 표시됩니다.

 

HTML 용어

  • 엘리먼트 요소콘텐츠를 감싸는 태그(TAG)
  • open tag - 여는 태그
  • close tag - 닫는 태그

  • 여는 태그와 닫는 태그가 있는 이유는 콘텐츠를 감싸기 위함입니다.
  • 닫는 태그(close tag) 가 없는 HTML요소 -콘텐츠를 감싸지 않아 비어있다는 의미 입니다.

 

  • 애트리뷰트(attribute) - 속성
  • 벨류(value) - 값

HTML 작성

 

HTML 문서는 윈도우의 메모장, 리눅스의 vi와 같은 기본 에디터로도 작성 가능합니다.

HTML 문서는 작성을 마친 후에 확장자를 .html로 저장하면 웹 브라우저에서 바로 확인 가능합니다.

 

HTML 버전

HTML 1.0 1991 팀 버나스리(Tim Berners-Lee)가 발표한 최초의 HTML
HTML 2.0 1995 국제 표준으로 제정된 최초의 HTML
HTML 3.2 1997 W3C에 의해 제정된 최초의 HTML
HTML 4.01 1999

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

    "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 2000

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML 5 2014 <!DOCTYPE html>

 

주요 HTML 요소들

 

  • <br> 줄바꾸기
  • <p> 단락 바꾸기(한줄 떨어짐)
  • <hr> 가로줄
  • <center></center>  가운데로 정렬합니다
  • <font></font> 폰트를 바꿉니다
  • < ul><li>...<li></ul> 순서없는 목록으로 만듭니다. ( ul : unordered list )
  • <ol><li>...<li></ol> 순서있는 목록으로 만듭니다. ( ol : ordered list ) ( li : list item )
  • <table></table> 표를 만듭니다.
  • <tr></tr> 행(<table>..</table> 에 넣습니다.)
  • <td></td> 열(<tr>..</tr>에 넣습니다.)
  • <th></th> 제목(<tr>..</tr>에 넣습니다.)
  • <td colspan = 숫자></td> 지정된 셀부터 숫자만큼의 오른쪽 셀을 병합합니다.
  • <td rowspan = 숫자></td> 지정된 셀부터 숫자만큼의 아래쪽 셀을 병합합니다.

 

HTML 의 페이지 구성

  • HTML : 문서의 내용을 이루는 정보 및 문서의 구조 정의
  • CSS : 디자인 요소를 내용 정보(HTML)와 분리한 문서
  • Javascript : 문서에서 이벤트 기반 동작을 정의하는 언어

HTML 중요 TAG

 

  • a : link 를 만든다.
  • button : 버튼을 만든다.
  • canvas : 그림을 그릴 수 있는 영역을 만든다.
  • div : 컨텐츠의 영역을 만든다.
  • form : 페이지의 상호 작용을 위한 양식을 만든다.
  • h1~h6 : 단계별 제목을 만든다.
  • img : 이미지를 삽입한다.
  • input : 사용자 입력 양식을 만든다.
  • script : 동적 스크립트와 데이터 블럭을 문서에 포함한다.
  • style : 스타일 정보를 문서에 포함한다.
  • table : 2차원 표를 만든다.

HTML 1일차 정리

'HTML' 카테고리의 다른 글

JavaScript 실습 : 회원가입 정규표현식  (0) 2021.03.04
HTML 실습 : 자바스크립트  (0) 2021.02.26
'HTML' Related Articles more