기본적인 HTML 구조
See the Pen Untitled by seulgi (@SeulgiGu) on CodePen.
<!DOCTYPE>은 문서의 타입을 정의하는 내용으로, HTML 문서에서 <html> 태그를 정의하기 전, 가장 먼저 선언되어야 함.
<head> 문서에 대한 정보인 메타데이터의 정의 영역 </head>
<body> 문서의 컨텐츠 영역 </body>
- HTML은 Element의 조합이다.
Element (요소)
- 태그 사이에 컨텐츠가 들어가는 경우 : <태그명> 컨텐츠 </태그명>
- 컨텐츠가 필요없는 경우 : <태그명 ... />
Attribute (속성)
- 태그 사이에 넣어주는 옵션
- Element의 추가적인 속성을 관리
- ex. <img width="300px" src="........." />
- 속성 사이의 구분자는 공백임
자주 사용되는 Element 종류
참고자료 : http://www.tcpschool.com/html-tags/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
1. 버튼
<button type="button" onclick=" ..."> 버튼 </button>
2. 인풋필드
<input type="text" ... /> <input type="number" .../>
3. 드롭다운
<select>
<option> 옵션1 </option>
<option> 옵션2 </option>
</select>
4. 테이블
<table>
<thead>
<tr> //행
<td> 열1( = 셀) </td>
<td> 열2 </tb>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
| thead 열1 | thead 열2 |
| tbody | tbody |
5. 하이퍼링크
<a href="url" target="_blank"> 이동하기 </a>
- 아직 방문하지 않은 링크: 밑줄, 파란색(blue)
- 방문했던 링크: 밑줄, 보라색(purple)
- 활성화된(현재 마우스가 클릭하고 있는) 링크: 밑줄, 빨간색(red)
6. 줄바꿈
<br>
7. 단락(paragraph)
<p> 내용 </p>
** 웹페이지에 정보를 남기는 것에 중점을 둔다면 <br>보다 <p>를 쓰는 것이 좋지만 <p>는 단락과 단락 사이 간격이 고정되어 자유도가 떨어져서 <br>을 사용하는 경우가 있음. 다만 css를 사용하면 <p>의 자유도가 더 높아짐 ------> 즉, HTML은 정보를 표현하는 용도로 css는 그 정보를 꾸미는 용도로 사용하는 것이 옳음
단락간의 간격은 css의 margin 속성으로 조정하여 사용한다
8. 목차
<ul> //순서가 없는 목차
<li> 리스트 </li>
<li> 리스트 </li>
</ui>
<ol> //순서가 있는 목차, 자동 넘버링 됨
<li> 1.리스트 </li>
<li> 2.리스트 </li>
</ol>
9. 해당 문서에 대한 정보, 즉 메타데이터 정의
<meta ...>
인코딩 방식(charset)이나 이름(name), content, http-equiv에 대한 정보를 나타냄
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10. 특정 영역이나 구획을 정의하는 블록 타입 컨테이너 태그
HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 하기 위한 일종의 컨테이너, 또는 레이아웃을 설정하기 위해 사용됨
<div> </div>
11. 문서의 제목, 숫자가 작을수록 큼
<h1> </h1> ~ <h6> </h6>
12. 외부 소스 연결
<link rel="stylesheet" href="css파일"/>
13. 네비게이션 링크들의 집합
메뉴, 목차, 인덱스 등
<nav>
<a href=""> 1로 이동 </a>
<a href=""> 2로 이동 </a>
</nav>
14. 독립적인 섹션 정의
<section> </section>
<h>태그를 자식 태그로 포함 시키는 경우가 잦음
15. 인라인 요소를 하나로 묶을 때 사용
<span> </span>
class나 id 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하기 위해 사용
**<div>는 블록 타입 요소며 <span>은 인라인 타입 요소로 두 태그는 매우 비슷하게 사용됨
그밖에 HTML 태그 종류
<title>
<form>
<header> <footer>
<script>
<span>
<i>
<iframe>
<source>
<ins>
<param>
<del>
<option>
<object>
<label>
<summary>
<template>
<detail>
<content>
<element>
<svg>
<dialog>
<textarea>
<fieldset>
<menu> <menuitem>
<path>
<use>
<g>
<defs>
...
'학원에서 배운 것 > HTML' 카테고리의 다른 글
| 사용자 입력, form 태그에 대해 (0) | 2023.03.16 |
|---|---|
| KDT 5th 웹개발자 입문 수업 2일차 -1 (0) | 2023.01.27 |
| KDT 5th 웹개발자 입문 수업 1일차 (0) | 2023.01.26 |
