부스트 코스로 html을 다시 공부하던 중 이전에 배웠는데 잊었던 내용을 위주로 기록하며 공부해 보려 합니다.
기록해 놨다가 사전처럼 기본적인 태그가 헷갈릴 때 많은 도움이 되었으면 좋겠습니다.
문서의 기본 구조
<!DOCTYPE html> //형식
<html lang="ko">//언어
<head>//페이지에 표기되지 않는 기본 설정
<meta charset="UTF-8"> // 인코딩 방식
<title>HTML</title> // 제목
</head>
<body>// 페이지 주요 내용
<h1>Hello, HTML</h1>
</body>
</html>기초 태그
<h1> ~ <h6> : 제목 태그가 있습니다. 숫자가 작을수록 크기가 큽니다.
<p> : 단락 태그 입니다. 단락태그 내부에 글을 한 단락으로 합니다.
<br> : 줄바꿈 태그 입니다. 빈태그, 즉 닫기 태그가 필요하지 않은 태그 입니다.
일반적으로 태그가 바뀔 때 원래 줄바꿈이 일어나지만 태그 내부에서 줄바꿈이 필요할 때 주로 사용합니다.
텍스트 관련 태그
<b> : bold 굵게 나타냅니다.
<i> : italic 기울여 나타냅니다.
<u> : underline 밑줄을 나타냅니다.
<s> : strike 중간선을 나타냅니다.
앵커 태그
<a> : 주로 사용되며 링크를 만듭니다.
href : 링크의 주소(목적지)를 나타냅니다.
target : _self 는 현재 탭에 추가합니다. _blank는 새로운 창에 표시합니다.
앵커 태그는 외부 사이트로만 이동 가능한 것이 아니라 현재 페이지의 특정 위치로 이동할 수 있는데 이를 "내부 링크" 라고 합니다. 아이디 앞에 #을 붙이면 id 값이 있는 위치로 이동하는 내부 링크를 만들 수 있습니다.
<a href="http://www.naver.com/" target="_blank">네이버</a>
<a href="#jeho">쩨이호로 이동</a>
<h1 id="jeho">쩨이호</h1>
의미가 없는 태그
<div> : 블록 자체인 태그 (블록 레벨 태그)입니다.
<span> : 블록 안에 들어가는 의미 없는 태그(인라인 레벨 태그) 입니다.
리스트를 표현 하는 태그
<ul> : 순서가 없는 리스트
<ol> : 순서가 있는 리스트
<li> : 리스트 내부 요소를 표현할 때 사용합니다.
<dl> : 용어를 설명하는 리스트 (definition / description list)
<dt> : 용어를 적는 태그입니다. 여러 번 연속해서 쓸 수 없습니다.
<dd> : 용어의 정의 또는 용어를 설명하는 내용입니다. 이 태그는 여러 번 쓰일 수 있습니다.
이미지 관련 태그
<img src = "./ ~~~~", alt = "설명">
src는 이미지의 위치 , alt는 이미지에 대한 보조 설명을 나타냅니다.
width, height 속성으로 크기를 나타내기도 하지만 일반적으로 css 로 이미지의 크기를 조절합니다.
테이블 관련 태그
<table> : 표 전체를 나타냅니다.
<tr> : 행을 나타냅니다.
<th> : 제목 셀을 나타냅니다.
<td> : 셀을 나타냅니다.
<caption> : 표의 제목입니다.
<thead> : 제목 행을 나타냅니다.
<tfoot> : 마지막 행을 나타냅니다.
<tbody> : 본문 행을 나타냅니다.
<td colspan = "2"> 셀을 가로 방향으로 결합합니다.
<td rowspan = "2"> 셀을 세로 방향으로 결합합니다.
폼 요소
폼 요소는 서버에 데이터를 전달하기 위해 입력받는 것을 뜻합니다.
<input> : 내용이 없는 빈 요소 입니다.
<type>
<type ="text"> : 문자를 입력 받는 속성 입니다.
<type = "password"> : 공개할 수 없는 내용을 입력 받는 속성 입니다.
<type = "radio"> : 라디오 버튼을 만드는 속성입니다. 하나만 선택해야하는 경우에 유리합니다. ex) 남 , 여
<type = "checkbox"> : 체크박스 버튼을 만드는 속성입니다. 라디오와 달리 여러 개를 선택 할 수 있습니다.
<type = "file"> : 파일을 서버에 올릴 때 사용하는 속성입니다.
<type = "submit"> : 입력한 내용을 서버로 전송하는 속성입니다.
<type ="reset"> : 입력한 내용을 초기화 하는 속성입니다.
<type = "image"> : 이미지가 삽입된 버튼을 만드는 속성입니다.
<type = "button"> : 기본 동작이 주어지지 않은 버튼입니다. 기능을 직접 만들어서 사용할 수 있습니다.
<placeholder=""> : 입력하기 전에 나타나는 글자를 지정하는 속성 입니다.
<select> : 선택 목록을 만드는 태그 입니다.
<option> : option을 select 내부에 만들 수 있습니다.
<textarea rows="", cols = ""> : 여러 줄을 입력 받을 수 있는 옵션입니다.
<button> : 버튼을 만드는 태그입니다. input을 사용하지 않고 바로 button 으로 버튼을 만들 수 있습니다.
submit, reset, button 3가지 속성을 가지고 있고 input 에서의 속성과 동일한 기능을 합니다.
다만 빈 태그가 아니며 내용을 태그 사이에 직접 넣을 수 있으므로 자유롭게 사용 가능합니다.
<label> : 폼 이름과 폼 요소를 연결하는 태그 입니다. for과 id 값이 일치하는 것을 연결 시켜 줍니다.
<label for="name">이름</label>: <input type="text" id="name"><br><fieldset> : 여러 개의 폼을 구조화 시키는 태그입니다.
<legend> : 폼 요소 제목으로 fieldset 내부에 사용합니다.
<form> : 폼 데이터를 그룹화 하여 서버에 전송합니다.
<action> : 폼 데이터를 처리하기 위한 서버의 주소 입니다.
<method> : 데이터를 전송하는 방식을 지정합니다. (get, post)
'프론트 엔드' 카테고리의 다른 글
| Javascript의 적용과 DOM (2) | 2021.08.10 |
|---|---|
| CSS 기초 (0) | 2021.07.22 |
