< HTML 5 > ( HTML 4 + CSS + JS )
- 기본구조
< 태그 속성 = " 속성값 " >
< input type = " text " >
- html은 대소문자 구분 X
< 태그 모음 >
[ 1.Text | 2.Link | 3.Input | 4.Table | 5.List | 6.Media ]
1. Text 태그
<h1> <p> <br> <hr> <b> <i> <small> <sub> <sup>
 
[영역 구분]
<div> 블록형식 (전체영역) </div>
-한줄 바꿔가면서 구분
<span>인라인형식(해당되는 영역만)</span>
- 줄바꿈 X
- 왼쪽 오른쪽으로 구분하고자 할 때 사용
[semantic 의미적 구분]
<html5> - 이건 종류 정하는 의미있는 태그
<header> 검색창 부분 </header>
<nav> 카테고리바 </nav>
<body>section본문/article요소/aside광고/</body>
<footer> 정책이나 저작권 회사 </footer>
- 의미적으로만 구분 (실제적 효과 X)
- 영역표시 용도
2. Link 태그
<a href="">구글</a>
<a href="/member.html">여기</a>
[ id ="x" | a href = "#x" ]
<h1 id = "first"> 그 사건은 바로 625전쟁이다. </h1>
<a href = "#first">"그 사건"</a>이 터졌다.
=> 드래그 하기 귀찮을 때 그 파일내의 id 걸어둔 위치로 이동 (나무위키에서 많이 사용하는 그 기능)
# : 파일내의 위치
- id 속성으로 원하는 데 위치를 걸어두고 사용
< HTML Link 거는 법 두가지 >
(1). <a href = "링크" > 구글 </a>
(2). <form action = "링크" >
<button type = "submit" class = "btn btn-primary"> 구글 </btton>
</form>
3. Input 태그
(1) <input type="text" > : 기본 한 줄 입력
(2) <textarea row="5" col="50"></textarea> : 여러줄
- 모든 input 태그는 기본적으로 <form> 태그와 같이 써서 데이터 전달
<form action = "전송위치" method = "전송방식" ></form>
mehtod = "get" / "post" => @GetMapping @PostMapping
(1) input
<input type = "text" name = "" value = "" >
type = "text" : 기본 text 타입 (한줄)
type = "password" : **** 이런형식 가려서 입력
<input type="password" name="pw" value="">
- value : 아무것도 안넣었을 때 default로 넣어주는 값
< name = 연결고리 >
name = "입력받은 값을 받아올 DTO 변수 명"
< size = "5" >
- 그냥 입력box 크기
< maxlength = "5">
- 입력 글자수 제한 (언어불문)
type = "checkbox" : 다중선택 가능 ( 마우스 입력 체크 인식 )
<input type = checkbox name="hobby" value="movie">영화보기
<input type = checkbox name="hobby" value="bike"> 자전거
check="checked" : 기본 default로 체크
tpye = "radio" : 하나만 선택가능
- name 연결고리 변수에 보낼값을 하나만 선택 가능
- 만약 name을 다르게 주고 radio 만들어놓으면 여러개 선택 됨
<input type=radio name="gender" value="man">male
<input type=radio name="gender" value="woman">female
check="checked" : 기본 default로 체크
<select> 드랍박스
- 출생년도등 드랍박스로 공간절약
- 기본 단일선택
<select name="menu" multiple="multiple">
<optgroup label="목록이름">
<option>짜장</option>
<option>짜장</option>
</optgroup>
<optgroup label="목록이름">
<option>짜장</option>
<option>짜장</option>
<option selected>없음</option>
</optgroup>
</select>
selected="selected" : 기본 default 맨 위 표시
multiple = "multiple" : 복수선택 가능 (드랍박스로 안나옴)
- 컨트롤키 누르고 클릭등으로 복수 값 전송
<optgroup label="목록이름"> : 구분해서 표시
(표시상 구분만 해주고 선택은 기본 하나)
< form 태그 사용해야 내장기능 동작 >
<Button>
<input type = "button" value= "버튼이름" >
( 내장기능 X / 사용자정의 동작 )
<Submit>
**<input type = "submit" : 클릭버튼 동작 내장 value = "버튼이름">**
(내장기능 => form 태그에서 걸어둔 action 위치로 입력값 보냄)
- <form> 태그안에 input 등으로 이것저것 입력하고
마지막에 input submit 으로 form 태그의 action 위치로 보내는 것
<Reset>
<input type = "reset" value = "버튼이름 >"
(내장기능 => input한 입력내용 지우고 현재 위치에 머무르기 : 취소기능 )
( 다음 검색창에 x 자 표시로 해둔 거 누르면 써놓은거 지우는 기능 )
---
[기본구조]
< form action="url"...>
<input type = text
<input ~...>
<input type = submit
input type = reset ( 제출하는데 옆에 붙여놓는다 편하라고.)
</form>
---
<image>
<input type = "image"> : 버튼이다. 이미지모양 버튼
<input type="image" src="/.jpg" >
<hidden>
<input type = "hidden" value = "넣어둘변수값" name="연결고리" >
- value 값이 필수 ("true")
- 숨겨서 전송 (브라우저 노출 X )
type = "file" : 파일업로드
<input type="file" name="uploadfile">
(자동으로 파일업로드 버튼 기능 생김)
이건 서버단까지 만들고 마지막에 실제로 파일을 옮기는 기능
[양식 (html5추가 - 아직 모두 적용 안됨)] - 크롬 가능
< 시각적 효과 구현 및 양식 자동적용 >
<input type="color" name="co">
type = "date" : 날짜선택 (달력제공)
type = "number" : 숫자 (max min step(이동단위)제공/string반환)
type = "color" : 색상선택 (rgb)
type = "ranger" : 범위 ( 드래그형식 제공 )
datetime/tel/email/url : 양식 어느정도 지키게끔 제공
<url 보는법>
http://localhost:8080/board/board.jsp
? 이후로 전송한 데이터
da=2022-04-02
& 구분자
co=%230000
&
ra=100
(2)textarea
<textarea class = "form-control" rows="5" name="" ></textarea>
rows="5" : 한번에 5줄만 보여준다 ( 밑으로는 계속 감 )
cols="50" : width 설정
4. Table 태그
기본구조
<table> <thead> <tr> <th> 컬럼 </th> </tr></thead>
<tbody> <tr> <td> 데이터 </td></tr></tbody></table>
( thead / tbody 구분은 보기 편하라고 사용한다.)
tr : table row 줄 생성
th : 굵은글씨 + 가운데정렬 td : 얇은글씨 + 왼쪽정렬
<table border="5"> 선 그어줘야 테이블
<td colspan="2"> LosAngelus </td> (가로합치기)
-테이블 데이터 행에서 다음 컬럼자리 차지하기 (2개)
<td rowspan ="3"> coding </td> (세로합치기)
-테이블 데이터 열에서 다음 행자리 차지하기 (3개)
<caption> 테이블제목 </caption>
5. List 태그
기본구조
<ul><li>내용</li></ul>
ul / ol / li
( unorderedlist / orderedlist / listitem )
<ul type = "disc(기본)/circle(빈원)/square">
<ol type = "1(기본)/a/A/i/I">
6. Media 태그
[이미지]
<img src="https://i.imgur.com/fNghUYC.png" height="200px">
- width = "100" height = "100"
- alt="그림이 존재하지 않습니다"
-style="border:2px solid blue"
[오디오]
<audio src="music.mp3" controls="controls"></audio>
- controls : 오디오 컨트롤 바 (controls 만 써줘도 됨)
- autoplay="autoplay" : 브라우저 들어가자마자 자동시작 ( 크롬 X )
- loop : 반복
- cross 브라우징 기능 (html5) 모든 브라우저 동일 태그
- audio 파일은 아직 browser 별로 지원하는 확장자(mp3) 다름
- 확장자 : mp3 ogg wav
[비디오]
<video src="hoho.mp4" controls="controls"></video>
- width height
- poster="대체할 이미지파일.jpg"
( 없을 때도 대체/ 있을 때도 첫 화면으로 썸네일 )
- 확장자 : mp4 ogv webm wemv
< URL 절대경로 상대경로 >
<static 안에 있을때> => "../static " 부터 시작
(상대경로)
src="/coffee.gif" (아예 파일이 static 에 있을때)
(static 안에 shop 폴더안에 있을때)
src="/shop/coffe.gif"
(절대경로)
src="http://localhost:8080/shop/coffee.gif"
< static 밖에 있을때 >
../ 상위폴더로 이동
src = "../shop2/bread.gif"
상위 폴더로 이동한 뒤,
다시 해당 폴더로 들어가 파일 선택
[ 기타 잡기술들 ]
<!--주석-->
1칸   4칸
<br> 한줄 엔터
[줄구분 포함태그]
<h1> / <p> /<li> 태그는 자동으로 한줄엔터
<nav> 네비게이션
<link> 외부 스타일시트 추가
<p> 단락 </p>
<hr> 선긋기 ---- horizen>
[특수분자구분]
& = &엠퍼센드 기호자체 (구분)
&nbsp; =>
> = ">" / < = "<"
<b> 굵게 </b>
<i> 기울임</i>
'Back to the HTML' 카테고리의 다른 글
| HTML name속성, value속성 => MVC 패턴 DB 올리기 (0) | 2022.07.25 |
|---|---|
| HTML => 웹서버, Intelli J 에서 동적 환경으로 HTML 만들기 (0) | 2022.07.22 |
| WS / WAS 차이 (0) | 2022.07.22 |