헬린코린이
HTML 본문
HTML은 (Hypertext Markup Language, 하이퍼텍스트 마크업 언어)로
프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는
마크업 언어입니다.모든 파트들은 요소(Element)로 이루어져 있습니다.이 Element들은 겹치면 안됩니다많이 사용하는 태그들만 작성해 보았습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<>
<!--블럭형태의 글자 태그 >>> 박스처럼 작성한 순서대로 위에서 아래로 쌓이는 형태
01. 제목태그
h1~h6 : 숫자가 뒤로 갈수록 글자사이즈가 줄어듬, 타이틀에 사용, 볼드체
<h1>header-1</h1>
<h2>header-2</h2>
<h3>header-3</h3>
<h4>header-4</h4>
<h5>header-5</h5>
<h6>header-6</h6>-->
<!--p:단락, 본문에서 단락을 구분하거나 나타낼 떄 사용 주로 글자를 담아서 표현
br: 줄바꿈 -->
<h1>header -1</h1>
<p>
It is a long established fact that a reader will be distracted by the reada ble content of a page when looking <br/>
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as<br/>
opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages <br/>
and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites <br/>
still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br/>
</p>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking<br/>
at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as <br/>
opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages <br/>
and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites <br/>
still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).<br/>
</p>
<br/>
<br/>
<br/>
<!--hr: 수평줄을 나타내는 태그 , 단락의 구분 주제가 바뀔 떄 / 입체적-->
<hr/>
<br/>
<br/>
<br/>
<!--인묭문: 긴 인용문을 나타낼 떄 사용하는 태그, 들여쓰기-->
<h2>header -2</h2>
<p>Why do we use it?</p>
<blockquote>
and more recently with desktop publishing software like Aldus
PageMaker including versions of Lorem Ipsum.
</blockquote>
<br/>
<br/>
<br/>
<!--공백이나 줄바꿈 등이 그대로 표현되어지는 태그-->
<p>Why do we use it?</p>
<pre>
readable English. Many desktop publishing packages and web page editors
now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will
uncover many web sites still in their infancy.
Various versions have evolved over the years, sometimes by
</pre>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>글자와 같이 나열되는 태그</title>
</head>
<body>
<h1>글자와 같은 성격을 가진 글자태그(inline)</h1>
<!--<p>태그를 열고 닫으니 다음 단락으로 내려간다!</p>-->
<h2>글자를 꾸며주는 태그들!</h2>
<p>
<!--볼드체로 표현-->
<strong>경고,주의사항과 같이 중요한 내용들을 강조할 떄!</strong><br/>
<b>글자를 굵게 표현하고 싶을 때!</b>
</p>
<p>
<!--이태릭체로 표현-->
<em>주의 텍스트의 비해서 강조된 부분이나 저자의 생각 ~강조!</em><br>
<i>이탤릭체를 표현하고 싶을 떄</i>
</p>
<p>
<!--인용표현-->
<q>인용할 문구를 표현, 따움표가 나타남! 글자와 같이 나열되어지며 짧은 부분의 인용을 표현할 때 사용</q>
</p>
<!--<blockquote>긴 인용문을 담을 때 사용!, 박스와 같은 성격</blockquote>-->
<p>
<!--형관펜 효과 -->
<mark>중요한 부분을 강조할 떄 사용>>형광펜으로 줄을 그은 것처럼 노란 배경색이 나타남!</mark>
</p>
<p>
<!--span: 글자를 꾸밀 때 사용 스타일의 선택자와 함께 주로 사용-->
글자를<span>꾸밀 때 사용</span>합니다.
</p>
<p>
<!--동아시아 글자 표현, 주석: 동아시아 국가들 주석(발음)내용을 표기하기 위해 사용-->
<ruby>
韓國<rp>(</rp><rt>한국</rt><rp>)</rp>
</ruby>
</p>
<p>
<!--취소선,중간줄-->
<del>문서에서 삭제된 텍스트나 지워야 할 부분 강조!</del>
</p>
<p>
<!--밑줄-->
<ins>문서에 나타난 텍스트에 강조하거나 밑줄 표현 시 사용</ins>
</p>
<p>
<!--위첨자,아래첨자-->
글자의 위로 붙는 <sup>위첨자</sup>
글자의 아래로 붙는 <sub>아래첨자</sub>
</p>
<h1>Lorem Ipsum</h1>
<p>
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry.<br/>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br/>
when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/>
It has survived not only five centuries, <em>but also the leap</em> into electronic typesetting, remaining essentially unchanged. <br/>
It was popularised in the 1960s with the release of <mark>Letraset sheets containing Lorem Ipsum passages</mark>, <br/>
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum<br/>
</p>
<br/>
<br/>
<br/>
<h1>특수문자 표현!#@#</h1>
<p>
엔티티(entity): html에서 예약된 문자!16진수의 엔티티 숫자~<br/>
<!--< < == < (보다 작은)
> == > (보다 큰)
공백 >> &ndsp; ==   (줄 바꿈 없는 공백) -->
< 특수문자 표현 >
</p>
</body>
</html>