웹응용프로그래밍 중간 대비 복습
기본
<! DOCHTML html>- 문서가 HTML5 문서임을 나타낸다.
- 브라우저에게 HTML5 표준에 따라 페이지를 렌더링하라고 지시한다.
<html lang="en">- HTML 문서의 루트 요소이다.
- 페이지의 주요 언어가 영어라는 것을 나타낸다.
- 이것은 접근성과 SEO에 도움을 준다.
<head>- 문서의 메타 정보를 포함한다.
- 이 태그 내부에는 title, meta, link 등의 태그가 위치할 수 있다.
<meta charset="UTF-8">- 문자 인토딩이 UTF-8임을 명시한다.
- 이로 인해 다양한 언어와 문자가 올바르게 표시된다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 뷰포트의 설정을 제어한다.
width=device-width는 디바이스의 스크린 너비에 따라 뷰포트의 크기를 설정한다.initial-scale=1.0은 초기 확대/축소 비율을 설정한다.
<title>Document</title>- 브라우저 탭에 표시되는 문서의 제목을 설정한다.
<body>- 실제로 브라우저에 표시되는 내용을 담는다.
- 텍스트, 이미지, 링크, 버튼, 폼 등의 요소를 이 태그 내에 배치한다.
body에서 자주 사용되는 태그
<p>- 단락을 표현한다. 텍스트가 이 태그에 포함되면 새로운 줄에서 시작하고 종료한다.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>- 제목을 표현한다.
<h1>이 가장 큰 제목이고,<h6>까지 점차 작아진다.
- 제목을 표현한다.
<a href="URL">- 하이퍼링크를 생성한다.
href속성에 URL을 지정하여 클릭시 해당 위치로 이동하게 한다.
- 하이퍼링크를 생성한다.
<img src="URL" alt="설명">- 이미지를 삽입한다.
src에 이미지의 URL을,alt에 이미지 설명을 작성한다.
- 이미지를 삽입한다.
<ul>- 순서 없는 리스트를 생성한다. 보통
<li>태그와 함께 사용된다.
- 순서 없는 리스트를 생성한다. 보통
<ol>- 순서 있는 리스트를 생성한다. 역시
<li>태그와 함께 사용된다.
- 순서 있는 리스트를 생성한다. 역시
<li>- 리스트 아이템을 표현한다.
<ul>이나<ol>내부에서 사용한다.
- 리스트 아이템을 표현한다.
<div>- 블록 수준 컨테이너를 생성한다. CSS와 함께 사용하여 레이아웃을 구성한다.
<span>- 인라인 수준 컨테이너를 생성한다. 텍스트나 작은 요소들을 묶는데 사용한다.
<table>- 테이블을 생성한다.
<tr>,<td>,<th>등과 함께 사용한다.
- 테이블을 생성한다.
<tr>- 테이블의 행을 생성한다.
<table>내부에서 사용한다.
- 테이블의 행을 생성한다.
<td>- 테이블의 데이터 셀을 생성한다.
<tr>내부에서 사용한다.
- 테이블의 데이터 셀을 생성한다.
<th>- 테이블의 헤더 셀을 생성한다.
<tr>내부에서 사용하며 보통 굵은 글씨로 표시된다.
- 테이블의 헤더 셀을 생성한다.
<form>- 폼을 생성한다.
<input>,<textarea>,<button>등과 함께 사용한다.
- 폼을 생성한다.
<input>- 입력 필드를 생성한다.
type속성으로 여러 형태의 입력 필드를 만들 수 있다.
- 입력 필드를 생성한다.
<textarea>- 여러 줄의 텍스트 입력 필드를 생성한다.
<button>- 버튼을 생성한다. 클릭 이벤트를 처리하는 데 사용한다.
<br>- 줄바꿈을 수행한다. 단락 내에서 사용한다.
<hr>- 수평선을 그린다. 섹션 구분 등에 사용한다.
이러한 태그들은 HTML 문서의 <body> 내에서 주로 사용되며, 각각 특별한 목적과 특성을 가진다. CSS와 자바스크립트와 결합하여 더 복잡한 동작과 스타일을 적용할 수 있다.
'IT > Front-End' 카테고리의 다른 글
| [React] useEffect와 클린업 함수 (3) | 2023.10.28 |
|---|---|
| [CSS] 스타일 우선순위 (1) | 2023.10.19 |
| [React] vite + react로 github.io 배포하기 (0) | 2023.10.15 |
| [React] createPortal (1) | 2023.10.10 |
| [React] 자주 사용하는 Eslint Rules (0) | 2023.09.26 |
