HTML란?
- 문서의 구조나 내용들을 다루고 있는 언어(HyperText Markup Language)
- 웹 페이지의 틀을 만드는 마크업 언어
HTML 사용법?
- HTML은 tag들의 집합
- Tag : 부등호(<>)로 묶인 HTML의 기본 구성 요소
HTML 구조
- HTML 문서 시작
-htmld은 head와 body로 나눠짐
-head에는 title(Page title)로, body에는 h1, div(안에 span)이 있다.
HTML예시
<!DOCTYPE html>
<html>
<head>
<title>문서의 제목, 브라우저의 탭에 보여짐</title>
</head>
<body>
<h1>heading을 의미하며, 크기에 따라 h1부터 h6까지 있음</h1>
<div>content division을 의마하며, 줄바꿈됨
<span>줄바꿈이 없는 content 컨테이너</span>
</div>
</body>
</html><!DOCTYPE html> : 이 문서가 HTML 문서임을 명시
<html> : html 시작 태그로, 문서 전체의 틀을 구성
</head> : </태그이름>은 해당 태그가 끝났음을 의미
<body> : body태그는 문서의 내용을 담는 곳
</div> : div태그가 끝났음을 의미
</body> : body 태그가 끝났음을 의미
</html> : html 태그가 끝났음을 의미
닫는 태그가 없는 태그(Self-Closing Tag)
- 태그 내부에 내용이 없다면(이미지 태그) -> 와 같이 표현 가능하고 /또한 생략 가능
self-closing tag 예시
<img src="banana-logo.png"></img>
<img src="banana-log.png"/>
<img src="banana-log.png">가장 많이 사용하는 HTML의 태그들
<div>: 태그는 한 줄을 차지한다.
<span>: contents크기만큼 공간을 차지한다.
<img>: 닫는태그가 없다.
src="해당url주소"인 키(src)와 값(url주소)가 들어가있다.
<a>: 링크 삽입.
다른 웹페이지로 연결되는 하이퍼링크를 HTML문서에 표시할 떄 사용.
href="해당url주소"인 키(href)와 값(url주소)가 들어가있다.
또는 target="_blank"인 키(target)와 값(_blank)를 넣어서 해당 글씨가 언더바가 추가되어 표시된다.
- ul(unordered list), li(list) : 한 쌍으로 순서가 없는 리스트 만들때 사용(메뉴로 많이 사용)
- ol(ordered list), li(list) : 한 쌍으로 순서가 있는 리스트를 만들때 사용(메뉴로 많이 사용)
- 다양한 입력 폼
- 텍스트박스 (textbox) **- id, pw로 사용
<input type="text" placeholder="type here">
<input type="password" placeholder="type here">
- 체크박스(checkbox)
<input type="checkbox">다음에 들어올때 id 기억하기`
다음에 들어올때 id 기억하기
- 라디오버튼(radiobutton) - name으로 이름을 갖게하여 group설정되어서 하나면 선택할 수 있게 만든다.
<input type="radio" name="option" value="a">옵션A
옵션A
<input type="radio" name="option" value="b">옵션B
옵션B
- 텍스트에어리어(textArea) - inputbox와 다르게 멀티라인 입력 가능.
<textarea></textarea>
- 버튼(button) - id, pw를 입력하고 누르는 버튼
<button>버튼</button>
버튼
그 밖에
- 자바스크립트를 실행하기 위한 엘리먼트
<script>
예시 :<script src='./script.js'></script>
<P>: 문단(paragraph)의 약자로 하나의 문단을 표현하기 위해서 사용. HTML 문서 작성시, 가능하면 문단이라는 목적에 맞게 사용하는것을 권장.
<section>: 웹 페이지의 큰 의미 단위가 될 수 있는 것들을 묶어서 하나의 구역을 구분하는데 사용. symantic tag중 하나다.
(symantic tag종류 :<header><main><nav><aside><footer>)
<div>가 기존에 하나의 구역을 나타나기 위해서 사용하였지만<section>이 나오고 나서 지양되고 있다.
다만, 작은 구역에서 불가피하게<div>를 사용해야 할때는 사용 가능.
<h1>: 블로그이 제목 부분을 만들때 사용.
