YJWANG

0. HTML 기초 본문

99.Study/99-1.HTML

0. HTML 기초

왕영주 2021. 10. 21. 11:26

HTML5는 여러 브라우저에서 동일한 HTML Source를 표준으로 사용하기 위해 고안됐습니다.

이전에는 각 브라우저마다 지원하는 태그명이 다른 경우가 있어 동일한 코드로 서비스하기에 어려움이 있어 크로스 브라우징을 지원하는데에 많은 노력이 필요했다고합니다.

 

Tag

HTML5 태그는 소문자로 표기합니다.

ex)

<img src="test.png">

대부분의 태그는 여는 태그 닫는 태그가 있으며 여는 태그는 <p> 와 같은 형태이며 닫는 태그는 </p> 와 같은 형태이다.
단, <img> 와 <br> 태그는 닫는 태그가 없습니다.

 

들여쓰기

HTML 태그는 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식합니다.

코드 가독성을 위해 적절한 띄어쓰기를 유지하여 코드를 관리합니다.

<ul>
    <li>list1</li>
    <li>list2</li>
    <li>list3</li>
<ul>

 

Tag의 속성

태그 안에는 태그 값들을 추가로 설명하거나 설정할 수 있는 속성들이 존재합니다.

아래 예시에서는 src , width , height 들이 속성이라 할 수 있다.

<img src="test.jpg" width="150" height="150">

 

주석

주석 태그는 아래와 같습니다.

<!-- 주석 내용 -->

 

실습

첫 HTML 페이지를 만들어보겠습니다.

사용하시는 TEXT editor를 사용하여 문서를 편집합니다. 그냥 메모장이나 vim을 사용하셔도 무방합니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 0번 실습 페이지 </title>
    </head>
    <body>
        <img src="https://github.com/YoungjuWang/virt-go/blob/v2/img/virt-go2.png?raw=true">
        <p>virt-go를 사용해보세요</p>
    </body>
</html>
  • <!DOCTYPE html> 해당 문서는 HTML5로 작성된 문서임을 나타냅니다.
  • <html> , </html> 태그로 문서의 시작과 끝을 나타냅니다.
  • <head> 와 <body>는 각각 HTML 페이지 구조를 나타내는 tag입니다. 이에 대한 자세한 내용은 정리가 잘 된 https://miaow-miaow.tistory.com/14 글을 참고하시기 바랍니다.
  • <meta charset>은 해당 페이지의 인코딩 값을 나타냅니다. 한국어 영어 뿐 아닌 여러 외국어를 표기하기 위해 대부분 utf-8을 사용합니다.
  • <title>은 웹 페이지 실행 시 제목 내용입니다.
  • <img>는 외부 이미지를 불러오기 위함. <p>는 단락 구분을 위한 태그입니다.

이제 해당 파일을 index.html과 같은 이름으로 저장한 후 browser로 실행해봅니다.

반응형
저작자표시
'99.Study/99-1.HTML' Related Articles more