<h> 태그
<body>
<h1>나의 첫번째 웹 페이지 입니다....</h1>
<h2>나의 첫번째 웹 페이지 입니다....</h2>
<h3>나의 첫번째 웹 페이지 입니다....</h3>
<h4>나의 첫번째 웹 페이지 입니다....</h4>
<h5>나의 첫번째 웹 페이지 입니다....</h5>
<h6>나의 첫번째 웹 페이지 입니다....</h6>
<p>안녕하세요 제가 만든 첫번째 문단입니다.<br>잘부탁드립니다.</p>
</body>나의 첫번째 웹 페이지 입니다....
나의 첫번째 웹 페이지 입니다....
나의 첫번째 웹 페이지 입니다....
나의 첫번째 웹 페이지 입니다....
나의 첫번째 웹 페이지 입니다....
나의 첫번째 웹 페이지 입니다....
안녕하세요 제가 만든 첫번째 문단입니다.
잘부탁드립니다.
1. 제목은 h1~h6 태그로 만든다.
2. 문단은 <p>태그로 만들고 </p> 닫아주는 태그를 꼭사용해줘야한다.
3. 문단내 줄바꿈을 하고싶으면 <br>태그를 쓰면된다.
<ul>,<ol>,<li>태그
<ul type="square">
<li>자바 프로그래밍</li>
<li>html,css</li>
<li>serclet,JSP</li>
</ul>- ul은 순서가없는 목록를 나타낸다.
- type="square"는 목록을 네모로 나타낸다.
- type="circle"는 목록을 원으로 나타낸다.
<ol type="A">
<li>자바 프로그래밍</li>
<li>html,css</li>
<li>serclet,JSP</li>
</ol>- ol은 순서가 있는 목록을 나타낸다
- type="A"는 순서를 대문자알파벳으로 나타낸다
- type="a"는 순서를 소문자알파벳으로 나타낸다
- type="I"는 순서를 로마숫자로 나타낸다
- type="i"는 순서를 소문자로마숫자로 나타낸다
- type="1"는 순서를 숫자로 나타낸다
<img> 태그
<img src="이미지경로/이름.확장자" alt="이미지의 대한 설명">이미지 파일을 삽입할때 사용한다. alt는 이미지가 안나올때 이미지의 대한 내용을 알 수 있다.
<a> 태그
<a href="링크">링크 페이지로 이동</a>
<a href="링크" target="_blank">새창에서 링크 페이지로 이동</a>차이점은 현재페이지에서 링크페이지로 이동하는것과 새창을 띄워서 링크페이지로 가는것이다.
<form> 태그
1.form은 웹에서의 입력양식이다.
2.백엔드 서버에 양식이 전달됨
form태그의 속성
- name:폼의이름
- action:폼의데이터가 전송되는 서버주소
- method:폼전송방식(GET/POST)
<form>내부의 태그와 속성
<input>태그
type 속성으로 종류를 나타내고 name으로 이름 지정, value로 기본값을 지정한다.
type
- text=문자
- button=버튼
- radio=한개만 선택 가능한 컴포넌트
- checkbox=다수를 선택 가능한 컴포넌트
- submit=양식 제출용 버튼
- password=비밀번호
- file=파일업로드
- reset=양식 초기화 버튼
- hidden=사용자에게 보이지 않는 숨은 요소
예시
<form action="전송할 서버주소">
<label for="id">아이디 입력</label>
<input type="text" name="id" id="id"><br>
<label for="password">비밀번호 입력</label>
<input type="text" name="password" id="password"><br>
<label for="gender">성별</label>
<input type="radio" name="gender" id="m">남자
<input type="radio" name="gender" id="f">여자<br>
<label for="subject">응시분야</label>
<input type="checkbox" name="subject" id="eng">영어
<input type="checkbox" name="subject" id="math">수학<br>
<input type="submit" value="제출">
</form>출력결과
아이디 입력비밀번호 입력
성별 남자 여자
응시분야 영어 수학
이렇게도쓸수가있지만 fieldset을 이용하면 form양식에서 관계된 요소끼리 묶어준다.
fieldset을이용한 예시
<form action="전송할 서버주소">
<label for="id">아이디 입력</label>
<input type="text" name="id" id="id"><br>
<label for="password">비밀번호 입력</label>
<input type="text" name="password" id="password"><br>
<fieldset>
<legend>성별</legend>
<label for="m1">남자</label>
<input type="radio" name="gender" id="m1">
<label for="f1">여자</label>
<input type="radio" name="gender" id="f1">
</fieldset>
<fieldset>
<legend>응시분야</legend>
<label for="eng1">영어</label>
<input type="checkbox" name="subject" id="eng1">
<label for="math1">수학</label>
<input type="checkbox" name="subject" id="math1">
</fieldset>
<input type="submit" value="제출">
</form>출력결과
아이디 입력비밀번호 입력
성별 남자 여자 응시분야 영어 수학
사용자가 텍스트를 클릭하면 label요소와 연결된 요소가 선택되므로 사용자의 편의성을 높인다.
fieldset은 form을 효과적으로 여러개로 분리시킬수있다.
<div> 태그
<div> 태그는 CSS와 연동하여 쓰이고 레이아웃을 설계할때 쓰인다.
<div> 태그의 속성
- style: div태그의 스타일을 지정해주고 다른속성들을 사용할수 있다.
- width: div태그의 가로크기를 px또는 %로 지정한다.
- height: div태그의 세로크기를 px또는 %로 지정한다.
- background-color: div태그의 배경색상 지정한다.
- border: div태그의 테두리 굵기를 지정한다.
- float: div태그의 좌,우 정렬을 하는 속성이다. 하지만 가운데 정렬은 안된다.
- margin: div태그의 정렬기준 끝부터 여백을 지정한다.
<table>태그
- th: table태그의 제목
- tr: 가로줄을 만드는 역할
- td: 셀을 만드는 역할
<table> 태그의 속성
- colspan: 가로 셀을 합치는 개수를 지정
- rowspan: 세로 셀을 합치는 개수를 지정
- border: table 경계선 굵기 지정
- bgcolor : 배경색 지정
- align : 셀의 가로줄을 오른쪽, 왼쪽, 중앙 등으로 정렬
- width : 너비를 지정
- height : 높이를 지정
예시
<table border="1">
<tr>
<th colspan="3">이력서</th>
</tr>
<tr>
<td rowspan="2"><img src="이미지 경로/이름/확장자" alt="이미지 설명"></td>
<td>이름</td>
<td>홍길동</td>
</tr>
<tr>
<td>전화</td>
<td>0109915****</td><br>
</tr>
<tr>
<th colspan="3">학력</th>
</tr>
<tr>
<td>1</td>
<td colspan="2">고등학교</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">대학교</td>
</tr>
</table>출력결과
| 이력서 | ||
|---|---|---|
| 이름 | 홍길동 | |
| 전화 | 0109915**** | |
| 학력 | ||
| 1 | 고등학교 | |
| 2 | 대학교 |
