기본 태그들
HTML에서 기본 태그는 <body> 부분에 들어가서 본문을 구성하게 된다.
텍스트 구성
<h1> ~ <h6>, <p>, <strong>, <em>
리스트 구성
<ul>, <ol>, <li>
링크 연결
<a>
이미지 삽입
<img>
표(테이블) 작성
<table>, <thead>, <tbody>, <tr>, <td>, <th>
입력 폼 만들기
<form>, <input>, <textarea>, <select>, <button>
사용 예시
텍스트 구성 태그
제목 태그: <h1> ~ <h6>
숫자가 작을수록 제목의 크기가 커진다.
<h1>가장 큰 제목</h1>
<h2>두 번째로 큰 제목</h2>
<h3>세 번째 제목</h3>문단 태그: <p>
본문 내용을 묶을 때 사용한다.
줄 바꿈 없이 하나의 문단 단위로 출력된다.
<p>이것은 하나의 문단입니다.</p>
<p>문단은 p 태그로 구분합니다.</p>참고) 줄 바꿈을 원할 때는 <br> 태그를 사용한다.
강조 태그: <strong>, <em><strong>: 중요한 내용을 굵게 강조
<em>: 의미적으로 강조 (기울임 처리)
<p><strong>강조된 굵은 글자</strong>입니다.</p>
<p><em>중요한 강조</em>를 의미할 수 있습니다.</p>2. 리스트 구성 태그
정보를 나열할땐 리스트를 사용한다.
순서 없는 리스트: <ul>, <li>
항목들의 순서가 보장되지 않는다.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>순서 있는 리스트: <ol>, <li>
순서를 보장해준다.
항목에 순서(1, 2, 3...)를 부여할 때 사용한다.
<ol>
<li>기획</li>
<li>설계</li>
<li>구현</li>
</ol>3. 링크 연결 태그
하이퍼링크: <a>
다른 페이지나 문서, 외부 사이트로 이동할 때 사용한다.
<a href="https://www.google.com" target="_blank">구글로 이동</a>
<a href="#section1">본문 내 특정 위치로 이동</a>target="_blank"를 쓰면 새 탭에서 열린다.
href="#아이디"를 쓰면 페이지 내부 이동도 가능하다.
4. 이미지 삽입 태그
이미지: <img>
이미지를 웹페이지에 삽입할 때 사용한다.
<img src="https://via.placeholder.com/150" alt="샘플 이미지">src: 이미지 파일 경로alt: 이미지 대체 텍스트(접근성과 SEO에 중요)
alt 속성은 무조건 넣는 습관을 들이는게 좋다.
5. 표(테이블) 구성 태그
테이블 기본 구조
<table border="1">
<thead>
<tr>
<th>이름</th>
<th>직업</th>
</tr>
</thead>
<tbody>
<tr>
<td>홍길동</td>
<td>개발자</td>
</tr>
<tr>
<td>김영희</td>
<td>디자이너</td>
</tr>
</tbody>
</table>| 태그 | 역할 |
<table> |
표 전체 |
<thead> |
표의 제목 부분 |
<tbody> |
표의 본문 부분 |
<tr> |
표의 행(Row) |
<td> |
표의 일반 셀(Cell) |
<th> |
표의 제목 셀(굵게, 가운데 정렬) |
thead, tbody를 명확하게 나누는 습관을 들이면 좋다.
6. 폼(Form) 구성 태그
사용자로부터 데이터를 입력받을 때는 폼 태그를 사용한다.
<form>
<label>이름: <input type="text" name="name"></label><br>
<label>비밀번호: <input type="password" name="password"></label><br>
<label>자기소개: <textarea name="bio"></textarea></label><br>
<input type="submit" value="제출">
</form>| 태그 | 역할 |
<form> |
입력 양식 전체 |
<input> |
한 줄 입력창 (텍스트, 비밀번호 등 다양한 타입 가능) |
<textarea> |
여러 줄 입력창 |
<button> / <input type="submit"> |
제출 버튼 |
<input>은 type 속성에 따라 다양한 형태(텍스트, 비밀번호, 파일 업로드 등)로 변형할 수 있다.
'프론트' 카테고리의 다른 글
| [CSS] grid 사용해보기 (0) | 2025.04.30 |
|---|---|
| [CSS] Flexbox 활용해보기 (0) | 2025.04.30 |
| [CSS] 기본 선택자와 속성 (0) | 2025.04.29 |
| [HTML] 시맨틱 태그 (0) | 2025.04.29 |
| [HTML] html의 기본 구조 (0) | 2025.04.28 |
