- <!DOCTYPE> 태그 : 현재의 문서를 HTML 문서로 선언
- <html></html> 태그 : <html>과 </html> 사이에 html 문서를 작성한다.
- <head></heda> 태그 : <head>과 </head> 사이에 인코딩, 키워드, 뷰포트 등의 문서에 대한 정보를 제공한다.
- <title></title> 태그 : <title>과 </title> 사이에는 문서의 제목을 쓴다.
- <body></body> 태그 : <body>과 </body> 사이에는 화면에 표시되는 문서의 내용을 쓴다.
- <h1></h1> 태그 : <h1>과 </h1>에는 제목 또는 주제를 쓴다.
- <p></p> 태그 : <p>과 </p> 사이에는 문단의 내용을 쓴다.
HTML 태그는 태그 이름을 <,>(angle bracket : 앵글 브라켓)으로 둘러싸서 표현한다.
<태그 이름>내용</태그 이름>
<태그 이름>을 시작 태그, </태그 이름>을 종료 태그라 부른다.
| 글로벌 속성 | 설명 |
| class | 태그에 적용할 스타일의 이름 지정 <div class="u_c1"> |
| dir | 내용의 텍스트 방향을 지정. 왼쪽에서 오른쪽으로(기본 값, Itr) 또는 오른쪽에서 왼쪽으로 (rtl) 등과 같이 사용되어 왼쪽 맞춤, 오른쪽 맞춤과 유사한 형태로 표현 <p dir="rtl"> 내용이 오른쪽에서 왼쪽으로 표시됨. 오른쪽 맞춤<p> |
| id | 태그에 유일한 ID를 부여함. 자바스크립트 제어에서 주로 사용 <div id="d1"> |
| style | 인라인 스타일시를 적용하기 위해 사용 <p style="color:red;text-align:center">하하하<p> |
<head> 태그
html 문서에 대한 정보를 써 놓은 곳으로 이 정도는 메타데이터로 표현한다. html 메타데이터는 실행 시 화면에 표시되지 않는다. html 문서에 대한 데이터로 일반적으로 문서 제목, 스타일, 스크립트 그리고 다른 메타 정보로 정의되며 <title>, <style>, <meta>, <link>, <script>, <base> 태그를 사용해서 작성한다.
<body> 태그
html 문서의 본문의 시작과 종료를 알려주며, 웹 브라우저의 화면에 보이는 내용은 이곳에서 작성된다. 여러 속성들이 있으나 <body> 태그에서 사용하는 속성 중 태그의 표현과 관련된 것으로 html5에서는 이런 속성들은 CSS 파일에서 지정하는 것을 권장한다.
<p> 태그
문단과 문단 사이를 구분할 때 사용하며 html 문서에서는 특별한 지시를 해주지 않으면 문단을 구분하지 않고 한 문장으로 취급한다. 화면에는 줄 바꿈과 한 줄 띄우기가 합쳐진 형태로 보인다. 속성 중 태그와 표현과 관련된 것은 CSS 파일에서 지정하는 것을 권장한다.
<br> 태그
줄 바꿈을 하는 태그이다. 한 문장을 끝내고 다음 줄부터 시작하며, 종료 태그 없이 단독으로 사용하는 태그이다.
글꼴 속성 태그 <i>, <b>
<i>, <b> 태그는 글자를 강조할 때 사용하는 것으로 <i> 태그는 글꼴을 기울임으로 표시하고, <b> 태그는 글꼴을 진하게 표시한다.
<img> 태그
웹 페이지에 이미지를 삽입할 떄 사용한다. 속성 중 태그의 표현과 관련된 것은 CS 파일에서 지정하는 것을 권장한다.
리스트 태그
순서 없는 리스트는 <ul> 태그를 사용하고 순서 있는 리스트는 <ol> 태그를 사용한다. 목록의 내용인 아이템은 <li> 태그에 기술한다.
<a> 태그
하이퍼링크(또는 링크)를 사용해서 이동할 페이지 또는 이동할 위치를 지정할 때 사용한다. 속성 중 태그의 표현과 관련된 것은 CSS 파일에서 지정하는 것을 권장한다.
<table> 태그
표를 작성하는 태그이다. <table> 태그는 표 영역만을 설정하는 태그이며 표를 이루려면 행, 열을 표시하는 <tr>, <td> 태그를 사용해야 한다. <table> 태그는 고정 크기의 웹 사이트를 개발하는 경우 사용하는 것이 권장되며, 반응형 웹 사이트와 같이 유동형 구조의 표현에는 거의 사용되지 않는다. 속성 중 태그의 표현과 관련된 것은 CSS 파일에서 지정하는 것을 권장한다.
<tr> 태그
표의 행을 정의하는 태그이다. 정의하지 않은 속성은 상위 태그인 <table> 태그에서 지정한 것을 그대로 이어 받는다. 속성 중 태그의 표현과 관련된 것은 CSS 파일에서 지정하는 것을 권장한다.
<td> 태그
표의 열 즉, 하나의 셀을 정의하는 태그이다. 정의하지 않은 속성은 상위 태그인 <table> 또는 <tr> 태그에서 상속 받는다. 속성 중 태그의 표현과 관련된 것은 CSS 파일에서 지정하는 것을 권장한다.
<div> 태그
html 문서에서 영역 또는 구역을 정의한다. <div> 태그는 주로 문서를 구역 별로 나누거나, 스타일시트를 적용할 그룹 영역으로 사용하거나 문서 전체에 스타일시트 적용을 초기화할 떄 사용한다. 각 <div> 태그는 id 속성을 사용해서 구분하며, 스타일시트는 id 속성 또는 class 속성을 사용해 적용한다.
<header> 태그 : 사이트의 소개나 내비게이션 등을 표시
<nav> 태그 : 사이트의 내비게이션(메뉴) 항목을 표시, 주로 <header> 태그에 넣어서 사용한다.
<article> 태그 : 문서의 내용(글)을 표시하는 태그로, 주로 블로그의 그링나 기사와 같이 독립적인 콘텐츠를 표시
<section> 태그 : 문서의 내용을 표시하는 태그로, 주로 문서의 영역적인 의미로 사용됨.
<aside> 태그 : 본문의 내용과는 독립적인 내용(주로 광고나 부 메뉴 등)인 사이드바 콘텐츠를 표시
<footer> 태그 : 사이트의 제작자, 주소, 저작권 정보 등을 주로 표시
<form> 태그 - 웹 폼 영역 설정
html에서 폼은 사용자 입력을 받기 위해 사용하며 폼은 <form> 태그를 사용해서 정의한다.
<input> 태그 - 인풋 태그
웹 폼 태그들 중 가장 많이 사용되는 것으로 텍스트 필드, 패스워드 필드, 체크 박스, 라디오 버튼, 파일 선택기, submit/reset/button 등의 각종 버튼을 만들 때 사용한다.
<textarea> 태그 - 여러 줄 입력 항목
<textarea> 태그는 여러 줄을 입력할 수 있는 필드를 제공한다. name 속성을 사용해서 이름을 정의하고 rows 속성을 사용해서 화면에 보이는 줄 수, cols 속성을 사용해서 화면에 보이는 열 수를 지정할 수 있다. 지정한 줄 수 이상 입력한 경우에는 자동으로 스크롤바가 표시된다.
<button> 태그 - 버튼
<button> 태그는 버튼을 만들 때 사용한다. name 또는 id 속성을 사용해서 이름 또는 ID를 정의한다. <button> 태그와 같은 일반 버튼은 주로 자바스크립트 제어를 사용하기 때문에 id 속성을 부여해서 자바스크립트에서 사용한다.
'BOOK' 카테고리의 다른 글
| [CSS] Chapter 4-1 (1) | 2025.02.24 |
|---|---|
| [HTML]Chapter3-2 (1) | 2025.02.23 |
| [HTML] Chapter 1 (1) | 2025.02.19 |
| [JAVA] MENTOR JAVA SECTION 19 (1) | 2025.01.26 |
| [JAVA] MENTOR JAVA SECTION 18 (1) | 2025.01.25 |