Recent Comments
Recent Posts
Notice
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
관리 메뉴

Up There

HTML 태그와 문서구조 본문

Web/Html

HTML 태그와 문서구조

J2Hong2 2022. 2. 9. 15:45

HTML 의 구성요소

  • 요소(Elements), 태그(Tag), 속성(Attributes), 변수(Arguments)

HTML 작성

HTML 문서는 윈도우의 메모장, 리눅스의 vi와 같은 기본 에디터로도 작성할 수 있습니다. HTML 문서의 작성을 마친 후에 확장자를 .html로 저장하면 웹 브라우저에서 바로 확인할 수 있습니다.

HTML 태그(tag)

HTML 태그는 태그 이름을 꺾쇠 괄호(<>)로 감싸서 표현합니다.

문법

1. <태그이름>  // 시작 태그

2. </태그이름> // 종료 태그

HTML 태그는 보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성됩니다.

종료 태그는 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시(/)가 존재합니다.

태그에 따라 시작 태그만 있고 종료 태그가 없는 태그도 존재합니다.

<img> <br> <hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그를 빈 태그(empty tag)라고 합니다.

  • <h1> hello world </h1>처럼 쌍으로 태그를 사용해 데이터를 표현합니다.
  • 태그 안에 다른 태그가 들어 갈 수 있으나 연 순서대로 닫아야 한다.
  • 일부 태그는 닫는 태그가 없는 경우도 있습니다.
  • 주석은 <!-- comment -->의 형식으로 사용합니다.
<!-- 주석 입니다. -->
<body>
<h2>Hello World</h2>
<hr>
</body>

HTML 요소 구조

속성(Attribute)

속성은 HTML 태그에 부가적인 정보를 제공하는 방법 입니다. 예를 들어 그림을 넣기 위해 사용하는 <img> 태그의 경우 그림파일의 위치를 지정하기 위한 src 속성이 있습니다.

<img src="/img/smile.jpg" width="500" height="300">
  • 항상 시작 태그에 작성하며 이름=값 으로 구성.
  • 태그에 따라 지원되는 속성이 다르며 여러 속성을 나열해 지정하는 것이 가능함.
  • html5 에서 부터는 디자인적인 표현을 위한 속성들은 css 로 이전되어 태그에서 사용할 수 있는 속성은 그리 많지 않음.

태그 바디(Tag Body)

태그와 태그 사에의 콘텐츠를 의미 합니다. 태그 바디에는 다른 태그를 포함할 수 있으며 단순 텍스트만 올수도 있습니다.

<h2>Hello World</h2>
<ul>
    <li>item1</li>
    <li>item2</li>
</ul>
  • h2 는 태그바디로 텍스트를 가짐.
  • ul 은 태그바디로 li 요소를 가짐.
  • 태그마다 사용가능한 태그바디 요소가 정해져 있음.

참고자료

https://dinfree.com/lecture/frontend/121_html_1.html#m3

http://www.tcpschool.com/html/html_intro_basicStructure

https://blog.naver.com/niopr2001/222612191878

https://sangyeon96.gitbooks.io/do-it-html5-css3/content/Chapter01.html

'Web/Html' Related Articles more
Comments