<p>
    이건 <b>bold</b>
    이건 <strong>strong</strong>
    이건 <i>i</i>
    이건 <em>em</em>
    이건 <mark>mark</mark>
    이건 <small>small</small>
    이건<del>del</del>
    이건 <ins>ins</ins>
    이건 <sub>sub</sub>
    이건 <sup>sup</sup>
</p>

q, blockquote, abbr,address, cite, bdo

q: 짧게 인용할때 사용
blockquote: 이것은 인용해와서 section을 정해서 그 안에 인용한 것을 쓸때 사용한다.
abbr: 유용한 정보를 주고 싶을때 사용 여기서 정보는 번역한 결과나 브라우저의 정보 같은 것이다.(마우스를 올리면 정보가 뜸)
address: document 소유자와 연결하기 위한 정보를 주고 싶을때 사용 (보통 italic체로 뜨며 정보의 앞뒤에
로 띄워준다)
cite: 중간에 제목 쓸 때 사용(italic 체로 뜬다)
bdo: 이것은 글자가 써지는 방향을 조정해주고 싶을때 사용한다. 태그 안쪽 옵션의 default 값은 dir = "ltr"로 왼쪽에서 오른쪽으로 써지는 것이고, dir="rtl"로 하면 오른쪽에서 왼쪽으로 써진다.

<p>옆에는 짧게 인용한 것. <q>웹페이지 연동하면서 써보는 글이다!!</q>->""이거도 자동으로 써진 것이다.</p>
    <p>이건 quote한 것이다. 인용한 것. 난 내 것 게시글 중에 글을 조금 가져왔다. 아래같이 된다.</p>
    <blockquote cite="https://velog.io/@ye050425/vscode-atom-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0-jwk4h40me9">
      이번에 컴퓨터 포맷하고 다시 웹페이지 연동하면서 써보는 글이다!!
      내가 사용했던 방식 그대로 쓰겠다.
    </blockquote>
    <p>abbr을 써보쟈<abbr title="Hyper Text Markup Language">HTML</abbr>태그위에 마우스를 올리면 전체 뜻이 뜬다.</p>
    <address>
      웹페이지 주소는 <br>
      https://velog.io/@ye050425<br>
      여기다.<br>
      이거는 address를 썼다
    </address>
    <p> cite를 써보자<cite>cite</cite>이렇게!!</p>
    <bdo dir="rtl">이거는 오른쪽에서 왼쪽으로 써질거다</bdo>

주석 처리

이번 것은 웹사이트에 뜨는것이 없으므로 코드만 예시를 들겠다.

<!-- 이것은 주석처리!! -->
    <!-- 길게도
      된다!! 엔터 쳐도 된다!!
      -->

link

a 태그를 쓴다.
전체 주소를 다 적어도 되고 쓰는 파일 위치와 link를 걸 파일의 위치가 같다면 파일 이름만 적어도 된다. 그리고 현재 위치에 있는 폴더 안에 있는 파일에 link를 걸고 싶다면 그냥 현재 위치부터 그 파일까지 가는 경로만 적어줘도 된다.

• a태그 안의 옵션
  href = "link 걸 주소"
  title = "link가 걸린 곳 위에 마우스 올리면 뜨는 정보"
  target = "링크가 어디에 열려야 하는지 -> _blank, _self, _parent, _top 이렇게 4가지 중 하나"
  _blank: 새로운 윈도우나 탭에 파일 열기
  _self: 링크를 누른 화면에 링크 파일 열기
  _parent: 부모창에서 열기(부모가 없으면 _self와 같음)
  _top: 가장 상위의 창에서 열기(상위 창이 없으면 _self와 같음)

<a href = "https://velog.io/@ye050425" title="go my velog!!"> 내 velog 페이지 링크!!전체 full address!!</a><br>
<a href = "stylesheet.php">이거는 웹페이지 안에 있는 local links!!</a><br>
<a href = "https://velog.io/@ye050425" target="_blank"> 내 velog 페이지 링크!!blank</a><br>
<a href = "https://velog.io/@ye050425" target="_self"> 내 velog 페이지 링크!!self!</a><br>
<a href = "https://velog.io/@ye050425" target="_parent"> 내 velog 페이지 링크!!parent</a><br>
<a href = "https://velog.io/@ye050425" target="_top"> 내 velog 페이지 링크!!top</a><br>
<p>아래는 그림이 링크</p>
<a href = "https://velog.io/@ye050425"><img src="../img/velog.png" width="100" height="100" alt="velog img"></a><br>

link colors

a:linked -> 링크로 타고간 적 있을 때 상태
a:visited -> 링크를 타고간 적 없을 때 상태
a:hover -> 마우스를 위에 올렸을때 상태
a:active -> 눌렀을때 상태

아래 예시에서 background-color: transparent는 바탕이 투명한 것을 의미하고
text-decoration: none;은 밑줄 같이 텍스트에 꾸며져 있는 것들을 없애는 것을 의미한다.

<style>
      a:link {
        color: green;
        background-color: transparent;
        text-decoration: none;
      }
      a:visited {
        color: pink;
        background-color: transparent;
        text-decoration: none;
      }
      a:hover {
        color: red;
        background-color: transparent;
        text-decoration: underline;
      }
      a:active {
        color: yellow;
        background-color: transparent;
        text-decoration: underline;
      }
    </style>

사진에 분홍색이 한 번도 안 갔을때 녹색이 한 번 이상 갔을 때이다.

link bookmarks

페이지에서 원하는 곳으로 옮겨갈때 사용한다
원하는 곳에 id를 지정하고 아래에서 이런 식으로 태그를 주면 된다

<a href = "https://velog.io/@ye050425" id="here"> 내 velog 페이지 링크!!</a><br>


<a href="#here">id가 here인 곳으로!!</a>

<map name="workmap">
	<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
</map>

<style>
body {
  background-image: url('img_girl.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style>

or

<div style="background-image: url('img_girl.jpg');"></div>

table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
}
th, td{
	padding: 15px;
}

<table style="width:100%">
     <tr>
        <th>이름</th>
        <th>나이</th>
        <th>거주지</th>
     </tr>
     <tr>
        <td>mary</td>
        <td>23</td>
        <td>서울</td>
      </tr>
     <tr>
        <td>Eve</td>
        <td>25</td>
        <td>광주</td>
    </tr>
</table>

<p> disc</p>
    <ul style="list-style-type:disc;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <p> disc</p>
    <ul style="list-style-type:none;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <p>circle</p>
    <ul style="list-style-type:circle;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <p>square</p>
    <ul style="list-style-type:square;">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ul>
    <p>ordered list: type: 1</p>
    <ol type="1">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
    </ol>

-

---

이중에 
는 필수적으로 요구되는 attributes는 없고 style, id, class attributes를 사용할 수는 있다.

inline elements: 새로운 line에서 시작하지 않고 전체 너비를 가지지 않는다. 필요한 만큼만 가진다.

Inline elements 종류:



이중에 은 필수적으로 요구되는 attributes는 없고 style, id, class attributes를 사용할 수는 있다.

<div style="background-color:black;color:white;padding:20px;">
      <h2>이렇게</h2>
      <p>이런식으로 되는 것이 div이다!!!</p>
</div>
<p>span은 이런식으로 <span style="color:red">중간에 쓰여서</span> 특성을 줄 수 있다!!</p>


class, id
class: 여러개의 태그에 같은 attributes나 움직임을 주기 위해 쓴다.

id: 한 개에 특별하게 attributes나 움직임을 주기 위해 쓴다.

아까 bookmark 줬을때 옮길 곳에 id걸었던 것 처럼 주면 된다.
.this{
<!--여기에 attributes 쓰기 class는 .(name)이다,-->
}
#here{
<!--여기에 attributes 쓰기, id는 #(name)이다.-->
}
<a href = "https://velog.io/@ye050425" id="here" class="this"> 내 velog 페이지 링크!!</a>

iframe
웹사이트 안에 웹사이트를 보여줄때 사용한다

크기, border 등은 img와 같이 height, width나 style=""으로 조절 가능하다.
<iframe src="https://velog.io/@ye050425" height="300" width="500"></iframe>
<iframe src="https://velog.io/@ye050425" style="height:300px;width:500px;border:none;"></iframe>


meta
 문서가 어떤 내용을 담고 있고, 그 문서의 핵심 키워드, 만든 사람, 언어설정 등의 정보를 담고 있는 태그

아래는 순서대로

언어설정

웹페이지 설명

검색할때 키워드

만든 사람

30초마다 refresh 하기

view port element: 어떻게 페이지의 공간을 조절할 것인지 적어놓은 것

이다.
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="John Doe">
<meta http-equiv="refresh" content="30">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML Layouts
 
 
 
 
 
 

code, kbd, samp, var
컴퓨터 코드를 쓸때 -> code 사용

키보드 input 표시할 때 -> kbd 사용

program output 출력할 때 -> samp 사용

수학적 표현에서 변수 쓸 때 -> var 사용
<code>
      x = 5;<br>
      y = 6;<br>
      z = x + y;
</code>
<p>키보드 input 표시할 때 -> <kbd>Ctrl + S</kbd></p>
<p>program output 표시할 때 -> <samp>error!!</samp></p>
<p>수학적 표현에서 변수 쓸 때-><var>y</var> = <var>x</var><sup>2</sup></p>


HTML Entities
아래 그려진 표의 entity name과 entity number 앞에 &를 넣어서 사용하면 된다. 표 아래 예시 코드를 적어두었다.



















































































Result
Description
Entity Name
Entity Number
non-breaking space
nbsp;
#160;
<
less than
lt;
#60;
>
greater than
gt;
#62;
&
ampersand
amp;
#38;
"
double quotation mark
quot;
#34;
'
single quotation mark (apostrophe)
apos;
#39;
¢
cent
cent;
#162;
£
pound
pound;
#163;
¥
yen
yen;
#165;
€
euro
euro;
#8364;
©
copyright
copy;
#169;
®
registered trademark
reg;
#174;
<p>space&nbsp;space</p>
<p>less than	&lt;	&#60;<br>
   greater than	&gt;	&#62;<br>
   ampersand	&amp;	&#38;<br>
   double quotation mark	&quot;	&#34;<br>
   single quotation mark (apostrophe)	&apos;	&#39;<br>
   cent	&cent;	&#162;<br>
   pound	&pound;	&#163;<br>
   yen	&yen;	&#165;<br>
   euro	&euro;	&#8364;<br>
   copyright	&copy;	&#169;<br>
   registered trademark	&reg;	&#174;</p>

diacritical mark를 문자와 함께 결합해서 사용이 가능하다. 문자와 #~ 가운데 공백에 &을 넣고 쓰면 된다



























































Mark
Character
Construct
Result
̀
a
a #768;
à
́
a
a #769;
á
̂
a
a #770;
â
̃
a
a #771;
ã
̀
O
O #768;
Ò
́
O
O #769;
Ó
̂
O
O #770;
Ô
̃
O
O #771;
Õ
<p> ̀	a	a&#768;	à<br>
 ́	a	a&#769;	á<br>
̂	a	a&#770;	â<br>
 ̃	a	a&#771;	ã<br>
 ̀	b	b&#768;	<br>
́	b	b&#769;	<br>
̂	b	b&#770;	<br>
̃	b	b&#771;	<br>
 ̀	O	O&#768;	Ò<br>
 ́	O	O&#769;	Ó<br>
̂	O	O&#770;	Ô<br>
 ̃	O	O&#771;	Õ</p>

수학 문자, 그리스 문자, 기타 기호들도 표현 가능하다.

XHTML
EXtensible HyperText Markup Language의 약자이다.

HTML과 같은 표현 능력을 지닌 마크업 언어

HTML보다 엄격하다.

예를 들어 HTML은 태그 안에 color=red; 이런 식으로 써도 허용해주지만

XHTML은 color="red"; 이런 식으로 써야 허용해준다.

여기까지 하고 form에 관한 것은 다음 포스팅에서 정리하겠다.