HTML 이어서
태그 방식 : 줄바꿈기준
1) 인라인 방식 : 줄이 바뀌지 않는다.
2) 블럭 방식 : 자동으로 줄이 바뀐다. 한줄을 통째로 차지한다.
다양한 태그 종류
수평선 태그 (블럭 방식)
<hr>
문단 태그 PARAGRAPH
<P>
2번 이상의 뛰어쓰기는 특수문자 이용
- 뛰어쓰기 여러번은 그냥 적용되지 않는다.
개행
<br>
제목
<h1~6>
문자열 포멧 태그
<b>문자열을 진하게</b><br>
<strong>문자열 강조</strong><br>
<i>문자를 이텔릭체로</i><br>
HTML5<sub>아래첨자로</sub><br>
HTML5<sup>위 첨자로</sup><br>
<address>
서울시 강남구 역삼동 34-21 번지
</address>
<del>20000원</del>1000원<br>
<ins>밑줄 쫘악~</ins><br>ID
: 태그에 사용하는 식별자 ( 태그=엘리먼트=dom )
<태그명 id="" class="" name="" > </태그명>
식별자의 구분
1) id = 하나의 태그 선택 목적
2) class = 여러 태그 선택 목적, 클래스명이 같은 태그 다중 선택
3) name = 서버에서 폼데이터 사용시 데이터 선택 사용을 목적으로 부여
target 속성
- 링크된 문서를 어디에서 실행 시킬지를 지정할 수 있다.
"_blank" : 새로운 윈도우 창 또는 tab에 문서를 open한다.
"_self" : default설정, 현재 클릭한 창 또는 tab에 문서를 open한다.a태그의 href속성에 #id로 페이지 내에서 id위치로 이동하는 링크를 만들 수 있다.
ex) href="#test"
table 태그 (중요)
: 표 생성 태그
행 <tr>
열 <td>기본 작성 형식)
<table border="1">
<tr>
<th>1열 제목</th>
<th>2열 제목</th>
</tr>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
</table>예제1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
가 나
<table border="1">
<tr>
<th>1열 제목</th>
<th>2열 제목</th>
</tr>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<br>
<table border="1">
<caption>캡션 실습</caption>
<tr>
<th>1열 제목</th>
<th>2열 제목</th>
</tr>
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<th>
<p>첫 번째 단락입니다.</p>
<p>두 번째 단락입니다.</p>
</th>
<th>
중첩 테이블:
<table border="1">
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</th>
</tr>
<tr>
<td>
중첩 리스트:
<ul>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>
</td>
<td>
안녕하세요
</td>
</tr>
</table>
</body>
</html>예제2)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr>
<td>
<a href="test/target3.html" target="_blank">test</a>
</td>
</tr>
<tr>
<td>
<a href="http://google.com" target="_blank">구글</a>
</td>
</tr>
<tr>
<td>
<a href="http://naver.com" target="_blank"><img src="../images/001.png"></a>
</td>
</tr>
</table>
</body>
</html>테이블 셀합치기
열 합치기
<table border="1">
<tr>
<th>이름</th>
<th colspan="2">전화번호</th>
</tr>
<tr>
<td>홍길동</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>행 합치기
<table border="1">
<tr>
<th>이름</th>
<td>홍길동</td>
</tr>
<tr>
<th rowspan="2">전화번호</th>
<td>1577-1577</td>
</tr>
<tr>
<td>5698-1234</td>
</tr>
</table>리스트
ordered list
- start 속성 : 해당되는 값부터 번호가 시작
<ol start="3">
unordered list
- type 속성 : circle, square, disc
<ul>
정의 리스트 ( definition list )
<dl>
<dl>
<dt>HTML이란</dt>
<dd>홈페이지를 만드는...</dd>
<dt>WWW 이란</dt>
<dd>World Wide Web ...,,</dd>
</dl>그룹 태그 (중요)
div 태그(블럭방식), span(인라인방식) 태그는 태그들을 그룹화하는데 주로 사용되는 태그들이다.
div
- block level 태그로서 다른 HTML태그들을 그룹화하기 위한 컨테이너 역할을 한다.
- 보통 css와 같이 사용하여 레이아웃을 설정할 때 사용한다.
span
- inline level 태그로서 텍스트(text)을 위한 컨테이너 역할을 한다
- 일반적으로 CSS와 같이 사용하여 텍스트(text)의 스타일 변경시 주로 사용된다
span 태그
inline level 태그로서 텍스트(text)을 위한 컨테이너 역할을 한다.
span태그 자체는 특별한 의미는 없다.
- 일반적으로 CSS와 같이 사용하여 텍스트(text)의 스타일 변경시 주로 사용된다.
폼 태그 (form)
- 서버에 데이터를 전송하기 위해서 HTML 폼을 사용한다.
<form>
서버 프로그램 파일에 전송할 데이터 기재
</from>속성
- name : 이름
- action : 보낼 곳을 적는다.
- method : get,post 방식
get은 값이 주소창에 표시되어 전달되는 방식
post는 값이 숨겨져서 전달되는 방식
<form action="target.html" method="post">
아이디:
<input type="text" name="userid">
<br>
비밀번호:
<input type="password" name="userpasswd">
<button>전송 </button>
</form>input 태그
다양한 값을 입력할 수 있음
type 속성에서 다양한 값 입력 방식을 지정할 수 있다.
name 속성으로 값의 이름이 전달됨
placeholder, checked, value 등의 타입이 다양하게 존재함
<button>전송</button><br>
<input type="submit" value="전송2">form 태그로 묶인 input 태그와 버튼태그 밑 input submit타입으로 데이터를 원하는 곳으로 전송할 수 있음.
<input type = "reset">
폼 안의 모든 입력 데이터를 초기화하는 버튼
라디오버튼
체크박스
드롭다운 태그
<select>
<option value="apple">사과</option>
<option>배</option>value 값이 없으면 태그 사이에 입력한 값이 전송된다.
문자영역 태그
태그 내에서 문자 입력 가능
<textarea></textarea>