HTML 기본 예제

JavaScript & HTML/HTML

by husks 2017. 12. 20. 10:31

HTML Documents

HTML을 작성할때는 문서의 제일 앞에 문서 유형을 선언해야 합니다.

이 문서는 어떠한 문서인지 브라우저에게 알려주는 역할을 하는것이 <!DOCTYPE> 입니다. (<!DOCTYPE>은 HTML 문서의 구성 요소는 아닙니다.)

웹표준의 필수 사항이므로 꼭 선언(작성)을 해주셔야 합니다.

선언은 아래와 같이 해 줍니다.

<!DOCTYPE html>

<!DOCTYPE>은 HTML 문서의 구성 요소는 아닙니다.

HTML 문서 자체는 <html>로 시작하고 </html>로 끝납니다.

HTML 문서에서 브라우저에 보이는 부분은 <body> 와 </body> 사이에 있습니다.

1
2
3
4
5
6
7
<!doctype html>
<html>
  <body>
    <h1>여기는 제목 입니다.</h1>
    <p>여기는 내용 입니다.</p>
  </body>
</html>

HTML 표제

HTML 표제는 <h1> ~ <h6> 태그로 정의 됩니다.

<h1>은 가장 텍스트의 크기가 크며 숫자가 증가할 수록 작아집니다.

1
2
3
4
5
6
<h1>제목입니다.</h1>
<h2>제목입니다.</h2>
<h3>제목입니다.</h3>
<h4>제목입니다.</h4>
<h5>제목입니다.</h5>
<h6>제목입니다.</h6>

HTML 단락

HTML 단락은 <p> 태그 로 정의됩니다 .

paragraph(단락, 절) 의 약자 입니다.

하나의 단락을 구성하는 태그 입니다.

1
2
3
4
5
6
7
8
9
<!doctype html>
<html>
  <body>
    <p>여기는 P태그 부분입니다.
    확인해 보시죠</p>
    <p>여기는 P태그 부분입니다.<br>
    확인해 보시죠</p>
  </body>
</html>

위 예제를 보시면 <p>태그는 개행(줄바꿈)을 인식하지 못합니다.

그래서 <br> 태그를 사용하여 개행을 해주어야 합니다.

HTML 링크

HTML 링크는 <a> 태그 로 정의됩니다 .

anchor(닻) 의 약자 입니다.

HTML 문서에서 링크 이동을 위해 사용하는 태그 입니다.

링크 대상은 href 속성에 지정됩니다. (Hypertext REFerence)

1
<a href="http://huskdoll.tistory.com" target="_blank">Husk's repository</a>

target 은 링크 이동시 새창(_blank) 또는 현재창(_self)에서 이동할지 결정하는 속성입니다.

HTML 이미지

HTML 이미지는 <img> 태그 로 정의됩니다 .

소스 파일 (src), 대체 텍스트 (alt), 너비 및 높이가 속성으로 제공됩니다.

1
<img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" alt="이미지" width="320" height="214">

Husk's repository