HTML의 기본 태그

: 주석(comment)

주석으로 처리함

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <!--가나다라마바사-->
    <p>ABCDEFG<p>
</body>
</html>

결과

<h1> ~ <h6> : 제목(headings)

각 섹션의 제목을 나타냄

각 숫자들은 제목의 등급을 나타내며, 숫자가 클수록 높은 등급

계층 구조에 맞게 순서대로 작성되어지는것이 좋음

원칙적으로 h1요소는 하나의 문서에 한번만 지정하는 것이 좋음

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <h1>제목1</h1>
    <h2>제목2</h2>
    <h3>제목3</h3>
    <h4>제목4</h4>
    <h5>제목5</h5>
    <h6>제목6</h6>
</body>
</html>

결과

<p></p>: 단락(paragraphs)

텍스트를 단락으로 정의 함

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <p>문단1</p>
    <p>문단2</p>
</body>
</html>

결과

<div></div> : 영역 지정

특별한 의미가 없고, 문서의 영역을 지정함

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <p>가나다</p>
    <div style="background-color: aquamarine">
        <h3>div태그 영역</h3>
        <p>ABC</p>
    </div>
    <p>123</p>
</body>
</html>

결과

<hr> : 주제의 분리(horizontal rule)

문단레벨에서 주제의 분리를 나타냄

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <h2>HTML</h2>
    <p>HTML : Hypertext Markup Language</p>
    
    <hr>
    
    <h2>CSS</h2>
    <p>CSS : Cascading Style Sheets</p>
</body>
</html>

결과

<br> : 줄바꿈(A forced line-break)

새로운 행에서부터 입력이 시작되도록 함

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    새로운 행에서부터<br>입력이 시작되도록 함
</body>
</html>

결과

<a href="주소"></a> : 링크(anchor)

하이퍼링크로 설정함

속성

href

href="주소"

링크 주소를 지정

외부 경로 : <a href="https://www.naver.com/">
현재 페이지의 같은 폴더에 있는 index.html : <a href="html_1.html>
현재 폴더의 html폴더에 있는 html_2.html : <a href="html/html_2.html>
현재 웹의 루트 폴더에 있는 index.html : <a href="/index.html>
현재 폴더의 상위 폴더에 있는 html_3.html : <a href="../html_3.html>
책갈피 top으로 이동 : <a href="#top>

target

target="속성"

링크를 어떤 프레임에 열것인지 정함

속성

_blank: 새창
_parent: 부모창
_self: 자신의 창
_top: 모든 프레임을 지우고 전체 창
프레임이름: 지정된 프레임

title

title="설명"

링크에 대한 간단한 설명

id

id="값"

책갈피 이름을 지정함

제목, 부제목 같은것에 지정하여 한번에 이동하는데 씀

상태 (CSS에서 처리함)

상태들은 순서대로 정의 해야 의도한 대로 스타일을 적용할 수 있음

link: 기본적인 링크 상태
visited: 방문한 적이 있는 상태
hover: 마우스 커서가 링크 위에 올라가 있는 상태
focus: 링크에 키보드등을 이용해서 포커스가 위치해있는 상태
active: 마우스를 눌렀다가 놓는 동안의 상태

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <p><a href="https://www.naver.com/" title="네이버" target="_blank">네이버</a></p>
    <p><a href="/index.html">Programming</a></p>
</body>
</html>

결과

<img src="주소"> : 이미지(images)

이미지를 넣음

속성

src

src="주소"

alt

alt="텍스트"

이미지가 정상적으로 나오지 않을 때 대체되는 텍스트

title

title="텍스트"

이미지 파일에 마우스를 올리면 나오는 도움말의 내용

width, height

width="값", height="값"

폭, 높이를 지정함

직접 속성값으로 주는 것보단 style 속성안에 지정해주는 것이 좋음

style 속성안에 지정해주면 CSS로 크기를 변경해도 영향을 받지 않음

style="width: 값; height: 값;"

코드


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        img {
            height: 200px;
        }
    </style>
</head>

<body>
    <img src="image.png" alt="TF2 로고" title="TF2 로고" style="width: 100px; height: 100px;">
    <img src="image.png" alt="TF2 로고" title="TF2 로고" width="100">
    <img src="wrongname.jpg" alt="대체 텍스트">
</body>
</html>

결과

<iframe src="주소"></iframe> : 웹 페이지 표시

웹 페이지 안에 웹 페이지를 표시함

속성

src: src="주소"; 프레임 안에 불러올 문서의 주소를 지정함
name: name="이름"; 프레임의 이름을 지정함
width, height: width="값", height="값"; 폭, 높이를 지정함

코드


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>

<body>
    <iframe src="https://sammy310.github.io/" width="100%" height="200"></iframe>
    <p>https://sammy310.github.io/</p>
    
    <iframe src="https://sammy310.github.io/" width="100%" height="300" name="iframe_ex"></iframe>
    <a href="https://sammy310.github.io/web/html/html_index.html" target="iframe_ex">HTML Index</a>
</body>
</html>