기본 HTML 구조
<html>
<head>
<!-- 문서 정보 -->
<meta charset="UTF-8">
<title>html문서구조</title>
<style>
/*스타일 정의*/
</style>
<script>
<!-- 스크립트 정의 -->
</script>
</head>
<body>
<!-- 문서의 내용 -->
</body>
</html>
<html> 태그로 시작
<head>문서정보</head>
<body>컨텐츠</body>
</html> 태그로 문서 끝
Block Element VS Inline Element
블록태그는 위에서 아래로 배치되는 태그이다.
블록 태그의 다음 태그는 블록태그의 아래 위치한다.
ex) div, p, h1~6, ul, li, table, form
인라인태그는 옆으로 배치되는 태그이다.
인라인태그는 같은 줄의 옆으로 배치된다.
ex) img, span, a
<div> 태그
영역을 표시하는 마크업
float:left >>블록 태그라 옆으로 배치되지 않지만 스타일에서 float 속성을 left로 주어 좌측 영역 차지
<div style="border:solid 1px;width:250px;height:350px;float:left">
<p> 태그
문단을 표시하는 마크업
<div>영역</div>
<p>문단</p>
<ul>, <ol>, <li> 태그
<ul> : 순서가 없는 태그, 리스트의 머리말에 모양을 정할 수 있다.
<ol> : 순서가 있는 태그, 순서의 표시 형식을 정할 수 있다.
<li> : 리스트의 요소 태그
<ol type="A">
<li>로보캅</li>
<li>300</li>
<li>수상한 그녀</li>
<li>수상한 그남</li>
</ol>
<ul type="circle">
<li>한화-기아</li>
<li>NC-삼성</li>
<li>두산-롯데</li>
</ul>
<li style="display: inline;"><a href = "#">회원</a>
<li style="display: inline;"><a href = "#">주문</a>
style="display: inline"으로 인라인으로 출력할 수 있다.
<table>태그
<tr> 태그 : 행
<td> 태그 : 열
colspan = " column (열) 을 합친다."
rowspan = " row () 을 합친다."
<table border="1">
<tr>
<td>번호</td>
<td>이름</td>
<td colspan="2">전화번호</td>
<td>비고</td>
</tr>
<tr>
<td>1</td>
<td>KIM</td>
<td>010-899-5656</td>
<td>011-899-5656</td>
<td rowspan='3'>X</td>
</tr>
<tr>
<td>2</td>
<td>LEE</td>
<td>018-959-8989</td>
<td>017-959-8989</td>
</tr>
<tr>
<td>3</td>
<td>SIM</td>
<td>012-959-8989</td>
<td>019-959-8989</td>
</tr>
</table>
<span>태그
컨텐츠를 표시하는 액자 역할, 컨텐츠이 표시 방법 제어하는 인라인 태그
<span style="color: red;font-size: large;font-weight: bold;border: 1px solid;">
테스트 문자열
</span>
을 <span style="font-style: italic;border: 1px solid;">span태그</span>를 이용해서 표시합니다.
<iframe>태그
윈도우 안에 frame을 생성하는 태그
<iframe src="http://www.daum.net"
width="800px" height="200px"></iframe>
<form> 태그
form 에서 데이터를 입력받아 url로 데이터를 보낼 수 있다.
action = "url"
method= "requestMethod"
<input> 태그
<form action="#" method="post">
<!-- 한 줄 짜리 키보드 입력 요소 -->
<input type="text" style="width:400px" />
<!-- 비밀번호 입력 요소 : 입력하는 동안 입력 문자가 표시되지 X -->
<input type="password" style="width:400px" />
<!-- 배타적 단일 선택 입력 요소 (radio button) -->
<!-- 배타적 단일 선택이 되려면 각 radio가 같은 name을 가져야 합니다. -->
<input type="radio" name="gender" />남
<input type="radio" name="gender" checked="checked" />여
<!-- 다중 선택 입력 요소 (checkbox) -->
<input type="checkbox" />IT
<input type="checkbox" />경제
<input type="checkbox" />정치
<input type="checkbox" />문화
<input type="checkbox" />연예
<!-- button : 버튼 모양, 자바스크립트와 연결을 위해 사용 -->
<input type="button" value="눌러주세요" />
<!-- reset : 초기화, 최초 페이지 로딩할 때 상태로 전환 -->
<input type="reset" value="초기화" />
<!-- image : 이미지 입힌 버튼 모양, 서버로 데이터 전송 -->
<input type="image" src="../image/btn.jpg" />
<!-- submit : 버튼 모양, 서버로 데이터 전송 -->
<input type="submit" value="서버로 전송" />
</form>
type : text, password, radio, checkbox, button, reset, image, submit
radio = > name 이 같은 radio 끼리는 1개만 선택할 수 있다.
checkbox = > 다중 선택
button = > 자바스크립트로 action 처리 가능한 버튼
reset = > input의 모든 데이터를 reset하는 버튼
submit = > input의 모든 데이터를 서버로 전송하는 버튼, 클릭시 submit 이벤트 발생
image = > 이미지를 입힌 submit 버튼
<textarea> 태그
여러줄의 텍스트 input
<!-- 여러 줄 키보드 자유 입력 요소 -->
<!-- 반드시 시작 태그와 종료 태그 쌍으로 작성 -->
<textarea rows="10" cols="55"></textarea>
<select> 태그
select 태그 내 <option> 태그에 선택사항을 입
<select style="width:170px">
<option>도메인을 선택하세요</option>
<option>naver.com</option>
<option>daum.net</option>
<option>gmail.com</option>
<option>nate.com</option>
<option>dreamwiz.com</option>
<option>직접입력</option>
</select>
<a> 태그
다른 페이지로 이동하는 태그
href = "url"
target = "페이지를 이동할 타겟 윈도우"
- _blank : 새창
- _self : 현재창
절대경로 http://*
<a href="http://www.google.com" target="_blank">
상대경로
기준경로==> 현재 리소스 url 중 리소스 이름을 제외한 주
>> 다른 위치의 리소스
<a href="../images/penguin1.gif">
>> 동일한 위치의 리소스 ./생략가능
<a href="./02.head.html">
페이지 내 지정 위치
<a href="http://www.naver.com#top">
naver의 #top 위치
<a href="#top">
현재 페이지의 #top 위치
<a href="#">
현재 페이지의 최상단으로 이동
<img> 태그
src = "url"
<img src="../tomcat.gif" width="50" height="50">
html 문서 내에서 여러개의 공백, 탭, 줄바꿈 실제론 하나의 공백으로 출력된다.
<br> 내려쓰기
내려쓰기로 출력하려면 <br> 태그를 사용해야한다.
문장<br>
띄어쓰기
명시적으로 띄어쓰기 출력하려면 사용
<, > == < &rt;
<, &rt;
<pre>태그
공백, 탭, 줄바꿈 등 태그 내의 내용을 모두 그대로 출력한다.
<h1~6>태그
제목 마크업, h1이 가장 크다. h6이 가장 작고 그 이상 존재하지 않는다.
<h1>제목 표시 마크업</h1>
<h2>제목 표시 마크업</h2>
<h3>제목 표시 마크업</h3>
<h4>제목 표시 마크업</h4>
<h5>제목 표시 마크업</h5>
<h6>제목 표시 마크업</h6>
<hr> 태그
수평가로선
보통 제목 밑에 혹은 컨텐츠가 바뀌는 부분을 구분하기 위해 사용
'Web' 카테고리의 다른 글
| YAML Converter (0) | 2023.10.11 |
|---|---|
| SPA(single page application) Handlebars 활용하기 (1) | 2023.09.21 |
| Mybatis Mapper (0) | 2023.09.19 |
| MyBatis Config (0) | 2023.09.19 |
| AJAX Asynchronous Javascript And XML (0) | 2023.09.18 |