HTML_기본 태그

 

태그	설명
<p></p>	<p>와 </p> 는 단락을 의미하며 문단의 내용을 쓴다
</br>	줄바꿈
<img src = "이미지파일주소" , arc = "">	웹 페이지에 img 삽입 *arc: img가 표시되지 못할 경우 대신 표시할 메시지 작성
<!-->	주석
<textarea></textarea>	장문을 입력하기 위한 요소
<textarea></textarea>	긴 문장을 입력
<select></select>
<div></div>	어떠한 영역을 구분
<address></address>	카피라이트, 주소, 연락처 등을 표시하는 태그 문장을 강조하기 위해 사용한다. *주로 footer에서 사용함

 

▷P vs br 태그

 

<P>태그는 문단을 정의하고 <br>태그는 줄바꿈을 정의한다.

 

https://dasima.xyz/html-p-br/

html p br 태그 차이 및 각 태그가 서로 우위인 경우 예제 - dasima

 

또한 <p></p>와 <br/> 두개 모두 줄바꿈이 가능하지만, p는 문단을 의미하며 </p>를 사용할 경우 문단의 종료로 컴퓨터는 판단하여 <br/>보다 줄바꿈의 간격이 확연하게 크다.

 

 

▷<br>과 <br/>의 차이 

 

<br>은 break의 약자로서 열고 닫는 태그가 존재하징낳아 <br>만 써주어도 된다. 간혹 <br/>이나 <br />이 보이는데 문법상 거의 차이는 없다. 

그러나 되도록이면 동일한 문서에는 <br> 표기법을 통일하여 사용하는 것을 추천한다.

 

https://heinafantasy.com/67

줄바꿈태그 <br>과 <br/>의 차이

 

▷<div></div> 

 

상단, 메뉴, 본문, 하단 등과 같이 웹 페이지의 레이아웃에 대한 영역을 구분하기 위해 사용한다. 

서로 중첩되어 사용할 수 있으며, 다른 태그를 포함할 수 있다.

고유한 id를 부여하여 처리하며 이를 CSS 혹은 JS에서 사용한다.

 

▷<select></select> 예시

 

 

▷<textarea></textarea> 예시

 

 

▷<address></address> 예시

&lt	<
&gt	>
&amp	&
&copy	ⓒ
&nbsp	공백
&quot	" "
&#039	' (따옴표)
&#035	#(sharp)

 

▶table 옵션

 

<thead></thead>	head 부분을 의미
<tbody></tbody>	테이블 본문을 의미
<th></th>	제목
<tfoot></tfood>	표상에서 가장 아래쪽
<td rowspan = " "> </td>	" " 안의 수만큼 열병합
<td colspan = " "> </td>	" " 안의 수만큼 행병합
thead, tbody, tfoot 각각의 위치가 바껴도 head, body, foot에 맞춰 테이블이 그려진다.  즉, 구분을 하지 않아도 표를 출력하는 것에 문제가 없지만 코드의 명확성을 위해 구분하여 작성해준다.

 

▷3행 3열 테이블 예시

 

 

▷rowspan & colspan 예시

 

 

▶input 옵션

 

<input maxlength = " " />	최대 입력 가능한 글자수를 제한
<input value = " "/>	해당 요소에 기본적으로 작성되어있을 기본값을 기술
<input type = "password" />	password 입력창
<input type = "submit" value = " "/>	제출 버튼
<input type = "button" value = " "/>	버튼 *<onclick = "alert('hello world')"> 추가 가능
<input type = " " palceholder = " " />	값이 입력되기 전에 보여질 설명글을 표시
<input type ="checkbox" name = " " value = " " />	여러 항목 중 복수로 선택 가능한 체크박스
<input type = " radio" name = " " value = " "/>	여러 항목 중 한가지만 선택 가능한 체크박스 *checked: 최초의 체크 표기
<input type = " " disabled />	해당 input 사용불가
<input type = "  " hyden />	해당내용을 숨김

 

▷<input type = "button" > , <button></button>의 차이

이 둘은 버튼기능을 하는 태그들로서 가장 먼저 사용된 버튼 표현 방식이 <input type="button">이다. 이후 여러가지 폼 요소들이 추가되었고 그 중 하나가 <button>인 것이다. <button>은 태그 사이에 라벨텍스트, 이미지, 하위 태그 등 다양한 태그를 넣어 버튼을 꾸밀 수 있으나 대부분의 버튼 기능에 하위태그(이미지 등)을 넣어 꾸미는 경우는 드물고 주로 JS를 통해 이벤트 핸들러로서 동작을 정의하는 기능으로 주로 사용한다. 이것이 <button>태그를 잘 사용하지 않는 원인이다. 

 

https://blogpack.tistory.com/1086

<input type="button">, <button>, <button type="button"> 의 차이

 

▷name과 id의 차이 

name: 웹 프로그램과 연계되어 있는 속성으로 한 페이지안에서 고유한 값을 명시

id: 해당 페이지 안에서 그 요솔르 식별하기 위한 값으로 고유한 값을 명시

즉, name과 id값은 서로 동일하에 지정해도 무관하다.

 

▷placeholder와 value의 차이 

input 태그에 value와 palceholder를 적용하면, input 박스안에 미리 원하는 문구를 적어둘 수 있다. 단, value 속성은 초기값을 사용자가 지우고 입력해야하며, palceholer 속성을 사용하면 사용자가 글자를 입력할 때, 자동으로 미리 입력된 문구가 사라진다.

 

https://box-cat.tistory.com/164

CSS)input 태그에서 value와 placeholder의 차이점

 

▷input type 예시

 

 

▶Form 

<form name = " " />	form 의 이름, 서버로 보내질 때 이름의 값으로 데이터 전송
<form action = " " />	form을 전송할 script 파일을 지정  전송되는 서버 url 또는 html 링크
< input type " " required>	데이터가 서버로 전소오디기 전 반드시 채워져 있어야 하는 필드
<form method = " " />	전송방식 선택 ( get / post )
<form target = " " />	action에서 지정한 script파일을 현재 창이 아닌 다른 위치에 열도록 지정
<form autocomplete = " " />	자동완성, on으로 하면 form 전체에 자동 완성 허용

 

▷form 요소란?

사용자로부터 입력을 받을 수 있는 HTML 입력 폼(Form)을 정의할 때 사용한다.

<form></form> 태그 사이에 다른 <form> 태그가 삽입이 안됨

<form>의 이름 속성은 한 페이지에서 중복하여 사용 불가

<form>태그는 폰트가 적용되지 않음으로 CSS를 통해 font를 따로 적용해주어야한다.

 

▷Get과 Post방식

 

GET방식: 현재 사용하는 방식, url 방식으로 전송, 기본 전송 방식

POST방식: url 방식이 아닌 데이터를 숨겨서 전송

 

https://mangkyu.tistory.com/17

[Web] GET과 POST의 비교 및 차이

 

▷ fieldset

 

<fieldset></fieldset>	폼 요소를 그룹으로 묶는 태그
<legend></legend>	그룹으로 묶는 구역에 제목을 붙이는 태그
<label></label>	폼 요소에 레이블(텍스트)을 붙이는 태그

 

https://blog.naver.com/PostView.nhn?blogId=poiu3571&logNo=221313186070 

[html/css] 폼 : <label>,<fieldset>,<legend> 태그알아보기

 

▷참고사이트

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

[HTML] 📚 폼(Form) 태그 종류 💯 정리

http://www.tcpschool.com/html-tags/form

코딩교육 티씨피스쿨

https://blog.naver.com/poiu3571/221307982623

[html/css] 폼(form)만들기

 

▶semantic 

 

▷semantic 태그란?

아무런 의미는 없지만 HTML 코드의 가독성을 높혀주기위해 사용하는 의미론적 태그이다.

문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야한다.

 

▷사용이유

1)SEO(Search engine optimization)

검색을 최적화하기 위해서 제목, 부제목, .. 시멘틱 태그를 잘 활용하면 특정 키워드로 검색을 했을 때 내가만든 웹사이트가 검색창에 노출될 수있다. 

2) 유지보수

단순히, div태그로만 모든 구조를 짜는 것 보다 더 한눈에 알아볼 수 있기 때문에 유지보수에 더 편해진다.

 

▷옵션

 

article	본문
aside	광고와 같이 페이지의 내용과는 관계가 적은 내용들
details	기본적으로 표시되지 않은 정보들을 정의
figure	삽화나 다이어그램과 같은 부가적인 요소를 정의
footer	화면 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의
header	화면 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의
main	문서에서 가장 중심이 되는 컨텐츠를 정의
mark	참조나 하이라이트 표시를 필요로 하는 문자를 정의
nav	문서의 네비게이션 항목을 정의
section	문서의 구획들을 정의
time	시간을 정의

 

*Reference

https://www.w3schools.com/html/html5_semantic_elements.asp

HTML Semantic Elements

 

https://dev.w3.org/html5/html-author/charref

Character Entity Reference Chart