HTML이란? , HTML 태그 | What is HTML? HTML TAG
HTML 이란?
- 마크업 언어 : 마크로 둘러싸인 언어(Language). 문서의 골격, 즉 구조에 대한 정보를 작성한 언어
- HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 기능)을 가진 문서를 만드는 언어(Language)
○ HTML 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>HTML 4.01 문서타입</title>
<link rel="stylesheet" type="text/css" href="css/service_name.css">
</head>
<body>
</body>
</html>
=>HTML의 기본 구조는 이렇습니다.
=> 이러한 구조를 가지고 있는 HTML의 태그에 대해 알아보겠습니다.
HTML TAG
○ Head 안의 태그와 속성들
<title> : 탭 제목 표시
<meta> : 문서에 대한 정보를 넣어주는 역할
1. 문자 인코딩 정보
<!-- 1. 문자 인코딩 정보 -->
<meta charset="utf-8">
<!-- 2. 문서 작성자 정보 -->
<meta name="author" content="choiiis">
<!-- 3. 문서의 키워드 -->
<meta name="keyword" content="velog, HTML">
<!-- 4. 문서에 대한 설명 -->
<meta name="description" content="HTML tags">
<!-- 5. viewport (디바이스에 따라 화면 fit) -->
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
○ <body> 안의 태그와 속성들
<h1>, <h2> : heading. 제목, 소제목 등 을 굵고 큰 문자로 나타낸다.
<strong> : 글자를 두껍게 강조한다.
<p> : 약간의 간격을 주어 문단을 나눠주는 역할을 한다.
<br> : 줄바꿈 문자<a> : anchor. 링크를 통해 다른 문서에 연결한다.
<ol>, <ul>, <li> : 리스트 관련 태그. <ol>은 순서가 있는, <ul>은 순서가 없는 리스트를 생성한다. 순서가 있는 리스트는 앞에 숫자를 자동 생성한다. <li>는 리스트에 속하는 모든 요소들에 대한 태그이다.img : 이미지 삽입 태그
table : 표 관련 태그
<table> <thead> <tr> <th>표의 맨 윗 부분 요소</th> </tr> </thead> <tr> <td>표의 데이터, 요소 하나하나 td로 묶어줘야 함(thead는 th)</td> <!--묶는 행/열 중 가장 처음 것에 쓰고 나머지 데이터 삭제--> <td rowspan="2"> 두 행을 묶음 (수직 방향).</td> </tr> <tfoot> <tr> <td>표의 맨 아래 부분 요소</td> <td colspan="3"> 세 열을 묶음 (수평 방향).</td> </tr> </tfoot> </table>
form : 입력 양식 전체를 감싸는 태그
form은 컨트롤 요소(control element)로 구성된다. 텍스트, 버튼, 라디오 등이 컨트롤
- name : form의 이름, 서버로 보내질 때 이름의 값으로 데이터 전송
- action : form이 전송되는 서버 url 또는 html 링크
- method : 전송 방법 설정. get은 default, post는 데이터를 url에 공개하지 않고 숨겨서 전송하는 방법
- autocomplete : 자동 완성. on으로 하면 form 전체에 자동 완성 허용
<form name="profile" action="/action_page.php" method="get" autocomplete="on"> <input type="text" name="id"> <select> <option value="blue"> </select> </form>
iframe : 웹페이지에 다른 웹페이지를 추가하는 태그
- 다른 웹페이지를 내부에 추가하거나, 유튜브 동영상 화면 추가할 때도 사용
- 위험할 수 있음 => sandox 사용해서 삽입된 웹페이지의 스크립트 실행되지 않도록 한다.
- 유튜브 동영상 추가하려면 공유 - 퍼가기에서 복사
HTML semantic tag
-문서의 정보를 전달하기 위한 의미를 가진 태그
- semantic : 내용을 명확하게 정의한 태그들 ex. <header>, <nav>, <article>
- non-semantic : 내용에 대해서 알 수 없는 태그들 ex. span, div
|
header : 문서나 section의 헤더에 오는 태그. 문서 내에 여러 개가 존재할 수 있음.
|
