-
HTML이란? , HTML 태그 | What is HTML? HTML TAGFront-End/HTML 2021. 1. 1. 11:16반응형
HTML 이란?
html 5 logo - 마크업 언어 : 마크로 둘러싸인 언어(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의 헤더에 오는 태그. 문서 내에 여러 개가 존재할 수 있음.
footer : 문서의 정보를 담고 있는 태그. ex. 문서의 저자, copyright 정보, term of use 링크
main : 해당 페이지의 메인 내용. 문서 내에서 한번만 사용
section : 관련 있는 주제들끼리 grouping 해주는 태그 (문서 구획). 보통 header를 갖음.
article : 독립적으로 의미가 있는 컨텐츠. 웹사이트의 나머지 부분과 독립적으로 읽더라도 의미를 이해할 수 있는 내용을 주로 담음.
section 과 article 서로 중첩 가능. 같은 것들끼리도 중첩 가능.
nav : navigation links. 문서의 major link들 담는 태그. ex. 메뉴, 목차, 색인
aside : 문서의 content의 옆쪽에 위치하여 내용과 관계가 적음. 광고를 추가하기도 함.
figure : 이미지와 캡션을 묶어주는 태그
html 기본 형식 반응형