이와 같이 작성하면 href의 주소값과(반드시 #을 주소 가장 앞에 써야한다.)해당 문서의 id값과 일치하는 부분으로 이동 할 수 있다. 마치 웹의 맨위로 같은 버튼과 같은 것이다.
2.<p> : 문단을 지원하는 태그
위 코드를 작성하면 아래와 같은 결과를 볼 수 있는데
‘이것’에는 p태그가 없으나 앞뒤로 개행이 되어있는것을 볼 수 있다.
이처럼 p태그는 문자열을 문단으로 만들어주고 해당 태그 앞뒤로 개행문자가 포함되어있다.
title : 툴 팁이 표시되게 하는 태그로 <p title=”I’m a tooltip”>This is a paragraph.</p> 와 같이 적으면 title내부 값이 툴팁으로 표시된다.
<!DOCTYPE html>
<html>
<body>
<p title="I'm a tooltip">This is a paragraph.</p>
<p title=about w3schools>this is a ex</p>
이것
<p title="jhon 'sg'">p tag
pp tag
ppp tag</p>
</body>
</html>
3.<h1> : 제목을 작성할 때 규격화된 크기로 지정하는 태그로 숫자가 커질수록 크기는 작아진다. 제목인 header를 지정하는 태그이므로 p태그 처럼 앞뒤로 개행 문자가 존재한다.
style : CSS 속성중 하나로 꼭 h1태그가 아닌 다른 태그에서 해당 태그에 스타일 즉, 색상(color:blue), 글꼴(font-family:굴림), 크기(font-size:40px) 등과 같은 요소에 스타일을 추가할 때 사용하는 속성이다. h태그는 글자의 크기를 조절 할 수 있다. 여기에 style 속성으로 글씨 크기를 조절 한다면 어떻게 될까?
<h1 style=”font-size:40px;”>heading</h1> 이와 같이 작성하면 글씨의 기본 크기가 증가하여 더 큰 h1태그를 볼 수 있다. *여기서 px는 픽셀을 의미한다.
4.서식 : 문자의 상태를 나타내는 태그
<!DOCTYPE html>
<html>
<body>
<b>굵은체 텍스트</b><br>
<strong>강조 텍스트</strong><br>
<i>이탤릭체 텍스트</i><br>
<em>중요한 텍스트</em><br>
<small> 작은 텍스트</small><br>
<mark> 강조 텍스트</mark><br>
이것은 <del>삭제될</del>텍스트<br>
이것은 <ins>추가될</ins>텍스트<br>
이것은 <sub>아래첨자</sub>텍스트<br>
이것은 <sup>위첨자</sup>텍스트<br>
</body>
</html>
17. <article> : 이 태그는 독립적이고 독자적인 컨텐츠를 지정한다. 이 태그를 사용할 수 있는 분야는 포럼 게시물, 블로그 포스트, 신문기사 등이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
여기는 일반 영역
<article>
여기서 부터는 article 영역
<h2>오늘의 주제</h2>
<p>
article 태그는 왜 필요한가?
이 전까지는 주로 보여주는 부분에 의미를
둔 태그가 많지만 이처럼 해당 부분이 가지는
의미를 나타내는 태그도 있다.
</p>
</article>
</body>
</html>
18. <header> : 해당 문서의 헤더를 지정한다.
19.<footer> : 해당 문서, 영역의 바닥 글을 지정한다. 일반적으로 작정자, 저작권, 연락처 등이 해당 태그 내에 기재된다.
태그는 <괄호 안에 들어가는 명령어를 뜻한다.> 얼핏 들으면 요소와 같아 보이지만 요소의 하위 개념이다.
대개 태그는 시작태그와 종료태그로 이루어져 있다.
ex) <title>title<title> : <title> 타이틀 태그, <p> 문단태그
3.속성
속성은 설정 값으로 태그의 세부 설정 기능을 담당한다.
ex) <p align=””> : p태그에 align이라는 속성(세부설정)을 가진다.
4.변수(Argument)
속성이 가지는 값을 의미한다.
즉, 종합하자면 <p align=”center”></p> : 여러가지 요소 중 p태그는 align이라는 속성에 center라는 변수를 가지고 있다. 라고 말 할 수 있다.
자 그럼 위 코드를 하나씩 해석해 보자
<!DOCTYPE html> : html5에서 부터 적용되는 것으로 현재 문서가 html이라는 것을 명시해 주고 있다.
<html> : 모든 태그들은 <html> 태그 안에 작성 되어야 한다.
<meta> :해당 html 파일의 구성요소를 설정하는 태그라고 생각하면 된다. 해당 html파일은 charset(캐릭터셋)으로 utf-8을 가진다.
<title> : 해당 문서 상단의 타이틀을 성정하는 태그이다.
<head> : 해당 문서의 제목, 제작자, 설정등 문서에 대한 설명이 들어가 있는 부분으로 해당 문서에 대한 참고사항들이 들어있는 태그이다.
<body> : html에서 가장 의미있고 중요한 태그로 실제 사용자에게 보여지는 태그이다. 따라서 <body>태그 안에 있는 명령어와 글자들은 웹에 보여지게 된다.
주석
html 주석은 <! —주석 — > 이런 식으로 작성하게 된다.
특징
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>title</title>
</head>
<body>
html 언어의 특징
1. 개행이 되지 않는다.
이렇게 말 이 다
. 참
신
기 하 다.
2. <!--주석 처리 한 것은 보이면서 보이지 않는다. -->
3. 사실 태그를 안해도 된다. 그럼 왜하는가? 설정을 하지 않는다면
이렇게 사실 그냥 메모장과 다름이 없다.
태그 설정을 하여 이 부분이 정확히 무엇인지를 명시하는것이 훨씬 효율적이기 때문이다.
</body>
</html>
위 코드 실행 결과
위 코드 실행 결과는 흰 배경이고 메모장은 해당 문서에서 소스보기를 한 결과이다.
여기서 html주석의 문제점이 나타나게 된다.
html주석은 실행결과에서 나오지 않지만 실제로 소스 보기를 통해서 확인하면 볼 수 있으므로 보안이 좋지 않다.
그리고 두 번째 문제점은 그럼 어떻게 개행을 해야 하는가 이다. 이는 아래 태그에서 학습할 수 있다.
태그
모든 태그를 다 언급할 수 없지만 자주 사용하는 태그들을 몇 개 알아보자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>title</title>
<writer></writer>
</head>
<body>
<header>
<h1>여기는 header 영역입니다.</h1>
</header>
<nav>
<ul>
<li><h1>리스트1</h1></li>
<li><h2>리스트2</h2></li>
<li><h3>리스트3</h3></li>
<li><h4>리스트4</h0></li>
<li><a href="apple.co.kr"> apple홈페이지</a></li>
</ul>
</nav>
<main>
여기는 main입니다. <br>
개행이 됩니다.
이것은 개행이 안됩니다.  
이것은 띄어쓰기 입니다.
<p>여기는 1문단 입니다.</p>
따라서 1문단이 끝나므로 뒤 아래로 개행이 됩니다.
<pre>
pre 태그 안의 이곳에 작성하는 모든 것은 전부 그대로 나타나게 됩니다.
개행 태그 없이 그냥 작성해도 되고 <br>개행태그 해서 작성해도 됩니다.
</pre>
</main>
<footer>
<h2>여기는 footer 영역입니다.</h2>
</footer>
</body>
</html>
위 코드 실행 결과
먼저 레이아웃이다.
레이아웃은 말 그대로 틀을 잡아주는 것인데 아래 그림과 같이 html레이아웃이 정해져있다. 이에 맞춰 위치에 작성 해 주면 된다.
http://tcpschool.com/html/html_space_layouts
여기서 레이아웃 외에 다른 태그들을 볼 수 있는데
<ul> unordered list : 순서 없는 목록을 만들 때 사용하게 된다.
<li> list item : 리스트 목록을 작성할 때 사용하게 된다.
<h?> heading : 표제로 정의된다. h뒤의 숫자가 작을수록 큰고 굵은 문자가 나오게 된다.
<a> anchor : 링크를 만들 때 사용하게 된다. 속성으로 href를 가지고 뒤에 경로를 작성하면 클릭시에 해당 경로로 이동하게 된다.
<br> line break : 개행시에 사용하게 된다.
  : 띄어쓰기를 할 때 사용하게 된다. 여러번 쓰면 여러면 띄어쓰기 할 수 있다.
<p> paragraph : 문단을 형성할 때 사용하게 된다. br태그로 개행하여 문단을 나눌 수 있지만 br태그를 남용하게 되면 가독성이 떨어지기 때문에 p태그를 사용하는것을 권장한다.
<pre> : 해당 태그 안에 적은 문자는 태그를 제외하고 전부 작성한 형식과 똑같이 나오게 된다.
이렇게 기본적인 태그가 있다. 이 외에 table 태그나, img 태그 등 여러가지 태그가 더 있지만 이는 사용하면서 필요할 때 마다 더 찾아보도록 하자. 이는 프로젝트 부분에서 더 볼 수 있을 것이다.
