웹 개발에 기본적으로 사용되는 기술로는 HTML, CSS, JavaScript가 있으며, 각각의 역할로는 HTML은 웹의 구조를 만들어 CSS로 스타일링하고 JavaSctipt로 기능을 구현한다. 그 중에서 오늘은 HTML에 대해서 정리하고자 합니다.
HTML은 Hyper Text Markup Language의 약자로 'Hyper Text' 즉, 웹 페이지간의 이동을 가능하게 만드는 것으로 'Hyper link' 시스템을 가지고 있는 웹 페이지를 위한 마크업 언어입니다.
HTML의 기본 문법
HTML은 '<>' 를 이용하여 작성하며, 기본적으로 여는 태그와 닫는 태그 한 쌍으로 이루져 있으며, 태그 내부에는 속성값을 부여할 수 있습니다.
<p class='content' > Hello world </p>위의 코드에서 태그 내부에 Hello world는 내용(content)을 가지고 있으며, P 태그는 class라는 속성(atrribute)을 가지고 있음을 알 수 있습니다.
태그의 종류에 다라 다양한 속성의 이름을 가질 수 있으며, 속성의 값에 따라 사용하는 기능이 달라집니다.
태그의 종류
HTML에는 많은 태그가 존재하지만 그 중에 자주 사용되는 태그는 다음과 같습니다.
1. html
<html></html> html파일 전체를 감싸는 태그로 이 문서는 html로 작성되어 있다는 정보 제공
2.head
<head></head> 웹페이지의 정보, 문서에 사용할 외부 파일들을 연결3.body
<body></body> 실제로 표시되는 내용
4. title
<title> 웹 브라우저에서 페이지의 제목 표시줄에 표시
5. meta
<meta> 문자 인코딩 및 문서 키워드 등 정보 입력
<meta charset="utf8"> 웹 페이지의 문자 인코딩은 utf-8임을 명시6. div
<div></div> 페이지에서 역영을 의미하며, 한줄을 모두 차지하는 'block'형태
7. span
<span></span> div와 같이 일정한 영역을 의미하며, 콘텐츠의 크기에 따라 전체 크기가 달라지는 'inline'형태
8. a
<a> 링크 기능을 제공하는 태그이다.
<a href='www.google.com' target='_blank'> 새로운 탭이나 창을 열어서 연결9. img
<img src='./screenshot'> 특정 경로의 이미지 삽입10. p
<p></p> 단락을 표현하는 태그로 띄어쓰기 줄바꿈 등이 발생9. ul
<ul></ul> 순서가 없는 리스트로 자식 요소로 <li> 태그를 받음
[예시]
<ul>
<li></li>
<li></li>
</ul>10. ol
<ol> 순서가 있는 리스트로 자식 요소로 <li> 태그를 받으며, type 속성을 받을수 있습니다.
[예시]
<ol type='1'></ol> // 숫자(기본값)
<ol type='a'></ol> // 영어 소문자
<ol type='A'></ol> // 영어 대문자
<ol type='i'></ol> // 로마숫자 소문자
<ol type='I'></ol> // 로마숫자 대문자11. input
<input type='text'> // 텍스트 입력
<input type='password'> // 비밀번호 입력
<input type='email'> // e-mail 입력
<input type='color'> // 색상표
<input type='dateTime'> // 시간
<input type='date'> // 날자
<input type='file'> // 파일
<input type='checkbox'> // 여러가지 체크가능
<input type='radio'> // 하나만 체크가능(name 속성으로 묶을 경우)12. button
<button></button> 태그는 <input> 태그의 한계를 보완하기 위해 추가로 생겨난 태그
버튼의 경우 열린태그로 자식요소를 가질 수 있어 CSS에서 가상 선택자로 꾸며주는 등 다양한 활용이 가능합니다.
<button type='button'></button> // 클릭가능한 버튼
<button type='submit'></button> // form 데이터를 제출하는 버튼
<button type='reset'></button> // form 데이터를 초기값으로 리셋
13. form
<form method='get'></form> // 'get'방식으로 전송
<form method='post'></form> // 'post'방식으로 전송
<form action='#'></form> // form을 전송할 서버 쪽의 script 파일 지정
<form target='#'></form> // action에서 지정한 script 파일을 다른 위치에서 열도록 지정
새로운 것을 기록하고 복습하는 공간입니다.