HTML 기초 용어 정리 by 생활코딩

출처: 생활코딩 (https://opentutorials.org/)



용어 정리


표현 이름 태그 기능
<> - 열리는 표현
</> - 닫히는 표현
<!doctype html> - 웹페이지가 HTML로써 만들어졌다는 것을 표현하기 위해 문서의 시작에 작성하는 표현
<html> - Head와 body 태그를 감싸기로 약속한 하나의 표현
<head> - 문서의 속성을 지정
<title> - 웹 문서의 제목을 설정
<meta charset="utf-8"> - 웹브라우저에게 UTF-8 방식으로 페이지를 열도록 하는 표현 (웹페이지에 저장된 문자 표현 방식과 웹브라우저가 페이지를 해석하는 방식이 다를 때 이상한 문자를 표시하게 되는데, 설정이 없으면 일반적으로 영어가 아닌 문자는 깨져서 나옴)
<body> - 본문 내용 표현
<h1> ~ <h6> Heading 제목 표현 (일반적인 텍스트보다는 글씨가 두껍고 줄바꿈이 됨)
<strong> - 글씨를 진하게 함
<u> Underline 밑줄 표시
<br> - 줄 바꿈 (닫힘 태그 없음)
<p> Paragraph 단락 표현 (하나의 단락을 그룹핑)
<li> List 목차 표현 (ul 태그를 필요로 함)
<ol> Ordered list ul의 정렬된 형태 (자동 넘버링)
<ul> Unordered list li의 부모 태그 (li 태그와 아주 밀접한 관계)
<img src="위치"> - 이미지 표현
<a> Anchor 링크 표현
<iframe src="위치"> - 동영상 표현



속성 정리


  • 속성 (attribute): 태그의 이름만으로는 정보가 부족하여 만들어진 문법



태그 표현 속성명 속성 기능
<img> width=”크기 혹은 퍼센트 비율” 사진의 크기 조정
alt=”내용” 사진이 없을 경우 텍스트 대체
<a> href=”위치” (HyperText Reference) 하이퍼링크 (이 값을 참조)
target=”_blank” 페이지가 새 창에서 열리도록 함
title=”내용” 링크가 어떤 내용을 담고 있는지 툴팁으로 보여줌
<iframe> width=”크기 혹은 퍼센트 비율” 숫자 크기만큼 폭 설정
height=”크기 혹은 퍼센트 비율” 숫자 크기만큼 높이 설정
frameborder=”숫자” 동영상 테두리 두께 설정
allowfullscreen 전체화면 지원



인터넷 및 HTML의 역사


정보사회에서 HTML을 의미에 맞게 잘 사용하는 것은 비즈니스적인 측면에서 매우 중요하다.

웹은 모든 운영체제에서 동작하고, 웹페이지의 소스코드는 누구나 볼 수 있으며, 웹 자체는 저작권이 없는 순수한 공공재이다. 웹의 이러한 특징들이 다른 기술들과 구별되는 특별한 것으로 만든다.

1990년에 시작된 이후로 계속해서 가장 중요한 정보기술로 군림하면서 점점 복잡해졌고, 단순히 지식에 대한 소비자로 살 것이 아니라면 컴퓨터, 인터넷, 웹과 같이 혁신적인 것을 만들기 위해 웹의 역사를 알아야 한다.

웹은 인터넷의 부분집합이며, 웹과 동급인 기술이 별처럼 많이 있기도 하다.

미국에서 1960년대 핵공격이 일어났을 때 통신 시스템에 심각한 취약점이 있다는 것을 발견하고 중앙집중적인 통신 시스템을 분산된 형태의 통신 시스템으로 바꾸는 구상을 하였고, 이는 인터넷의 시작이었다.

수많은 통신 장치들이 각자 일종의 전화국 역할을 하는 상호부조 시스템이 인터넷이며, 중앙은 없다.

또한 웹은 스위스에서 처음으로 탄생하였는데, 제네바의 유럽 입자물리연구소(CERN)라는 저명한 연구소에서 팀 버너스 리에 의해 창시되었다.



세계 최초의 웹 페이지: http://info.cern.ch



인터넷이 동작하기 위해서는 컴퓨터가 최소 2대가 있어야 하며, 1대만 있다면 그것은 인터넷이 아니고, 3대가 있다면 본질적이라고 할 수 없다. 웹 브라우저는 클라이언트에서 동작하며 웹 클라이언트(요청하는 컴퓨터)라고 한다. 반대로 웹 서버는 서버 컴퓨터이며 웹서버(응답하는 컴퓨터)라고 부른다.

Github가 제공하는 여러 기능 중 웹호스팅 기능을 이용해 홈페이지를 운영할 수 있으며, 이는 페이지 기능을 활성화했을 때 동작한다.

HTML은 웹브라우저가 해석하기 때문에 서버에서는 특별히 해줄 일이 없고, 이러한 특성을 정적(static)이라고 한다. 현재는 php, Python, Ruby, Java 등을 통해 동적(dynamic) 웹페이지도 구현할 수 있다.



테스트 코드


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
<title>Egoing test page</title>
<meta charset="utf-8">
</head>

<ol>
<li>Html</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>

<h1>HTML</h1>
<p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.</p>
<img src="https://s3-ap-northeast-2.amazonaws.com/opentutorials-user-file/module/3135/7648.png"><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.</p>

<iframe width="560" height="315" src="https://www.youtube.com/embed/jSJM9iOiQ1g" frameborder="10" allowfullscreen>



내용 출처: 생활코딩 (https://opentutorials.org/course/3084)

Author

Alec J

Posted on

2020-02-15

Updated on

2021-02-09

Licensed under