[실습] HTML태그 - 종합
HTML 태그 | 2024.12.23 - [프론트엔드 (Frontend)/HTML] - HTML 태그
결과 확인
[실습] HTML태그 - 종합
제목
태그
h1~h6 은
숫자가 클수록
글씨는 작아진다
p태그는 문단을 정의할때 사용된다
br태그는 줄바꿈을해준다
hr태그는
구분선을 생성한다
텍스트를 굵게 강조하는 strong 태그
텍스트를 기울이는 em태그
밑줄을 표시하는 u태그
추가된 텍스트는 ins태그
특정 텍스트에 스타일을 지정할 때 사용하는 span 태그
인용문을 표시하는 blockquote태그
코드클록을 표시하는code태그 작성한 그대로 출력해주는 pre 태그
링크를 생성하는 a태그
a태그를 이용하면 같은페이지에서도 이동할 수 있다
h6태그로 이동하기(a href="#태그의ID")
테이블태그로 이동하기
순서없는 목록을 정의하는 ul-li 태그
- 버스
- 택시
- 자전거
순서가 있는 목록을 정의하는 ol-li 태그
- 강아지
- 고양이
- 너구리
표를 생성하는 table 태그
| thead-th태그1 | thead-th태그2 | thead-th태그3 |
|---|---|---|
| tbody-td태그1 | tbody-td태그2 | tbody-td태그3 |
| tfoot-td태그1 | tfoot-td태그2 | tfoot-td태그3 |
데이터를 전송할 폼을 생성하는 form태그
실습 코드
더보기
<!-- HTML5 문서임을 선언하는 태그, 문서의 가장 상단에 위치 -->
<!DOCTYPE html>
<!-- HTML 문서의 시작을 나타내는 태그 -->
<html>
<!-- 문서의 메타데이터(제목, 문자인코딩 등..)를 포함하는 부분 -->
<head>
<!-- 문서의 문자 인코딩 선언 -->
<meta charset="UTF-8">
<!-- 다양한 단말에서 화면 최적화 즉 단말 크기에 맞춰서 화면에 맞게 렌더링됨 -->
<meta name="viewport" content="width = device-width,initial-scale = 1.0" />
<!-- 문서의 제목을 정의 -->
<title>[실습] HTML태그 - 종합</title>
<!--
외부 리소스를 연결하는 태그
주로 스타일시트(CSS파일), 아이콘, 폰트 등을 연결하는데 사용
href : 외부 리소스의 경로
rel : 관계(relationship)를 뜻함, 현재 문서와 연결한 리소스의 관계를 정의
아래 예제는 'main.css'경로의 'stylesheet' 라는 관계를 정의
-->
<link href="main.css" rel="stylesheet" />
<!-- 문서 내에서 직접 스타일을 정의하는 태그 -->
<style>
h1 { /* h1 태그의 스타일을 정의 */
color: blue; /* h1 태그로 작성된 글씨를 파란색으로 지정 */
}
span {
color: green;
}
</style>
<!--
닫는태그, <head>태그의 종료를 나타내는 태그
HTML 태그는 여는태그 <> 와 닫는태그 </> 로 구성
태그에 따라 닫는 태그를 생략할 수 있음
-->
</head>
<!-- 실제 웹 페이지의 내용을 포함하는 부분 -->
<body>
<h1>[실습] HTML태그 - 종합</h1>
<h2>제목</h2>
<h3>태그</h3>
<h4>h1~h6 은</h4>
<h5>숫자가 클수록</h5>
<h6 id="h6">글씨는 작아진다</h6>
<p> p태그는 문단을 정의할때 사용된다 </p>
br태그는 줄바꿈을<br> 해준다
<br><br>
hr태그는<hr>구분선을 생성한다
<br><br>
텍스트를 <strong>굵게</strong> 강조하는 strong 태그
<br><br>
텍스트를 <em>기울이는</em> em태그
<br><br>
<u>밑줄을 표시하는</u> u태그
<br><br>
<del>삭제된 텍스트</del>는 del태그
<br><br>
<ins>추가된 텍스트</ins>는 ins태그
<br><br>
특정 텍스트에 <span>스타일을 지정할 때</span> 사용하는 span 태그
<br><br>
<blockquote>인용문을 표시하는 blockquote태그</blockquote>
<br><br>
<code>코드클록을 표시하는code태그</code>
<br><br>
<pre>
작성한 그대로
출력해주는 pre 태그
</pre>
<br><br>
링크를 생성하는 <a href=#>a태그</a>
<br><br>
a태그를 이용하면 같은페이지에서도 이동할 수 있다
<br>
<a href="#h6">h6태그로 이동하기(a href="#태그의ID")</a><br>
<a href="#table">테이블태그로 이동하기</a>
<br><br>
<hr>
순서없는 목록을 정의하는 ul-li 태그
<ul>
<li>버스</li>
<li>택시</li>
<li>자전거</li>
</ul>
<br><br>
순서가 있는 목록을 정의하는 ol-li 태그
<ol>
<li>강아지</li>
<li>고양이</li>
<li>너구리</li>
</ol>
<hr>
표를 생성하는 table 태그
<table border=1 id="table">
<thead>
<tr>
<th>thead-th태그1</th>
<th>thead-th태그2</th>
<th>thead-th태그3</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody-td태그1</td>
<td>tbody-td태그2</td>
<td>tbody-td태그3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>tfoot-td태그1</td>
<td>tfoot-td태그2</td>
<td>tfoot-td태그3</td>
</tr>
</tfoot>
</table>
<br><br>
데이터를 전송할 폼을 생성하는 form태그
<form action="#" mathod="get">
<fieldset> <!-- form태그의 요소들을 그룹화하는 태그, fieldset으로 그룹화한 요소들 주변에 테두리가 생김 -->
<legend>fieldset의 제목을 정의하는 legend태그</legend>
<label for="Itext">폼요소에 이름표를 추가 lable for="요소의ID' 로 사용</label>
<input type="text" id="Itext">
</fieldset>
<fieldset>
<legend>버튼타입</legend>
<label for="Ibutton">버튼의 글자는 value="내용"</label>
<input type="button" id="Ibutton" value="버튼">
</fieldset>
<fieldset>
<legend>체크박스</legend>
<label for="Icheckbox">체크박스타입</label>
<input type="checkbox" id="Icheckbox">
</fieldset>
<fieldset>
<legend>비밀번호</legend>
<label for="Ipassword">입력값이 숨겨진다</label>
<input type="password" id="Ipassword">
</fieldset>
<fieldset>
<legend>라디오버튼</legend>
name="이름" 라디오버튼의 이름을 동일하게하면 하나의 그룹으로 인식 즉 3개의 버튼 중 1개만 클릭된다
<label for="Iradio">하나만 클릭가능</label>
<input type="radio" id="Iradio" name="Iradio">
<input type="radio" name="Iradio">
<input type="radio" name="Iradio">
</fieldset>
<fieldset>
<legend>파일버튼</legend>
<label for="Ifile">파일선택</label>
<input type="file" id="Ifile">
</fieldset>
<fieldset>
<legend>select 태그</legend>
<select>
<option>옵션1</option>
<option>옵션2</option>
<option>옵션3</option>
</select>
</fieldset>
<fieldset>
<legend>textarea 태그</legend>
<label for="textarea">텍스트박스</label><br>
<textarea rows="5" cols="40" id="textarea"></textarea>
</fieldset>
</form>
</body>
</html>
'프론트엔드 (Frontend) > HTML' 카테고리의 다른 글
| [실습] HTML태그 - <hr> 태그 (1) | 2025.01.02 |
|---|---|
| [실습] HTML태그 - <p> 태그 (2) | 2025.01.02 |
| [실습] HTML태그 - 제목 태그 (2) | 2025.01.02 |
| [실습] HTML태그 - HTML 기본 구조 (0) | 2025.01.02 |
| HTML 태그 (1) | 2024.12.23 |