HTML 이란?
HTML의 기본 6가지 태그에 대해서 알아보자.
1. 텍스트 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 텍스트 태그-->
<!-- h1 : 머릿글 -->
<h1>홈페이지 만들기</h1>
<!-- h2: 부주제 -->
<h2>뭐부터 시작?</h2>
<!-- 단락 -->
<p>프론트엔드 언어를 배워야 함!</p>
</body>
</html>머릿글
<h1> 머릿글 </h1>
부주제
<h2> 부주제 </h2>
단락
<p> 단락 </p>
2. 미디어 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 미디어 태그 -->
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR-DQV2YDekQnmBT6yeTXP24FljSCoHBPpMzg&usqp=CAU"
height = "200px" />
</body>
</html>이미지 삽입
<img = "이미지 주소" height="이미지 세로길이 px" />
3. 링크 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 링크 태그 -->
<a href = "http://google.com">구글링</a>하기
</body>
</html>링크 삽입
<a href = "링크 주소"> 링크표시할 단어 </a> 링크표시않을 단어
4. 리스트 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 리스트 태그 -->
<h2>언어의 종류</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>ol 리스트 (ordered list)- 순서가 있는 목록
<ol> 내용 <ol>
ul 리스트 (unordered list)- 순서가 필요 없는 목록
<ul> 내용 <ul>
dl 리스트 (definition list)- 사전처럼 용어를 설명하는 목록
<dl> 내용 <dl>
li리스트 (list item)- 사<ol>과 <ul>의 각 항목들을 나열할 때 쓰는 태그
<li> 내용 <li>
5. 테이블 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--- 테이블 태그-->
<h2>언어의 역할</h2>
<table border = "1">
<tr>
<td>언어</td>
<td>역할</td>
</tr>
<tr>
<td>HTML</td>
<td>문서 내용을 작성</td>
</tr>
<tr>
<td>CSS</td>
<td>문서 디자인을 담당</td>
</tr>
<tr>
<td>JS</td>
<td>문서 기능을 부여</td>
</tr>
</table>
</body>
</html>테이블 삽입
<table> 테이블 구조 </table>
경계선 삽입
<table border = "1">테이블 구조</table>
th(table head)
<th>테이블의 제목</th>
tr(table row)
<tr>테이블의 가로줄</tr>
td(table data)
<td>테이블의 원소</td>
6. 입력 태그
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 입력 태그 -->
<h2>질문하기</h2>
작성자 : <input type="text" />
질문내용 : <textarea></textarea>
</body>
</html>입력받기
<input type = "입력받을 타입" />
여러줄의 문자열 입력받기
<textarea></textarea>
반응형
'➰ Library > 기타' 카테고리의 다른 글
| 간단하게 leak 검사하기 (0) | 2021.06.02 |
|---|---|
| Fullcalendar에서 event 잘림 현상 해결하기 (0) | 2021.03.23 |
| Fullcalendar 날짜 색 변경 & 일정 배경없이 넣기 (0) | 2021.03.23 |
| memleak(메모리 누수) 있는지 확인하기 (0) | 2021.01.17 |
| HTML, CSS 웹개발 환경 만들기 (0) | 2020.09.09 |