[front-end]/HTML

HTML 테그

broship 2021. 1. 5. 14:20

HTML은 형식이 비교적 자유로움, 하지만 xml은 형식이 엄격함, 여는 태그가 있으면 반드시 닫아줘야됨, 그래서 환경설정 파일 작성하는데 많이 사용됨

 

1. 줄바꿈

<br> : 한줄 바꿈

<p> : 두줄 바꿈

 

2. 기호

띄어&nbsp;쓰기<br>
&기호: &amp;<br>
>: &gt; <: &lt<br>
파운드: &pound; 센트: &cent; 유로: &euro;<br>
저작권마크: &reg; 카피라이트: &copy;<br>

<pre></pre> 이렇게 하면 <br>이나 &nbsp; 를 사용하지 않아도 해당 테그 안에서 쓴 줄바꿈과 띄어쓰기가 적용됨

 

 

3. 글씨체

<b>BOLD</b> 굵은 글씨
<i>itatlic</i> 눕힌 글씨
<strike>취소선</strike>
<u>밑줄긋기</u>
y=X<sup>2</sup><br> 글씨 올리기
y=log<sub>10</sub>x<br> 글씨 내리기
<font color="red" size="10">글씨 크기, 색상 조정</font>

새로운 html5 태그<br>
	<small>small은 작은 글자</small><br>
	<mark>형광펜 효과</mark><br>
	<strong>강조</strong><br>
	<del>취소선</del><br>
	<ins>밑줄선</ins><br>
	아래글자<sub>3</sub> 윗글자<sup>3</sup><br>

 

3. 제목

<h1>제목1</h1> 
<h2>제목2</h2> 
<h3>제목3</h3> 
<h4>제목4</h4> 
<h5>제목5</h5> 
<h6>제목6</h6>

 

4. 위치 조정

<p align="center">안녕하세요<br>nihaoma</p> 
<p align="right">안녕하세요<br>nihaoma</p> 
<p align="left">안녕하세요<br>nihaoma</p> 
<p>테그가 적용되면서 두칸씩 줄바꿈됨



<center>안녕하세요<br>nihaoma<br></center>

 

5. 지나가는 글씨

<marquee></marquee>

direction 옵션: 지나가는 방향 정하기  ex) direction="left"

behavior 옵션: 움직이는 방법 ex) behavior="alternate" (왔다 갔다) "scroll" (한 방향 반복)  "slide" (한번 가서 멈춤)

scrollamount 옵션: 숫자가 클수록 속도 빨라짐

scrolldelay 옵션: 숫자가 클수록 느려짐

 

6. 이미지

<img src="경로명" width="300" height="180">

원본 사진 이미지로 나옴, 필요시 크기 조정

경로 설정 시 현재 위치는 WebContent

alt 옵션: 이미지 불러오기 실패시 표시되는 문자

align 옵션: 정렬

 

 

7. 테이블

- tr: 행 추가

- td: 열 추가(tr: 열 제목)

- colspan: 차지할 열 개수

- rowspan: 차지할 행 개수

- caption: 테이블 설명란

<table border="2">
 	<caption align="bottom">테이블 설명란</caption>
 	<tr>
    	<!--rowspan: 3행 차지 -->
 		<td rowspan="3" bgcolor="orange">우리반 명단</td>
 		<td>일길동</td>
 		<td>29</td>
 	</tr>
 	<tr>
 		<td>이길동</td>
 		<td>33</td>
 	</tr>
 	<tr>
 		<td>삼길동</td>
 		<td>35</td>
 	</tr>
 	<tr>
    	<!--colspan: 3열 차지 -->
 		<td colspan="3">총 3명!</td>
 	</tr>
 </table>

 

8. a 테그

하이퍼링크

- "#" 은 임시태그, 해당 페이지 맨 위로 올라감

- "#tmp" 하면 a테그 중 name 속성이 tmp인 곳으로 이동

<a href="https://www.naver.com">네이버</a>

 

9. 그룹 테그

- span, div

- span은 줄바꿈 없고 div는 줄바꿈 있음

- 태그 자체는 아무 효과 없으나 css, dom 적용시 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //객체.이벤트=이벤트 처리 함수  //onmousemove이벤트가 발생할때 해당 함수 사용
	document.onmousemove=function(){
		document.getElementById("f1").style.left=(event.clientX-10)+"px"
		document.getElementById("f1").style.top=(event.clientY-10)+"px"
		//마우스 움직이는 이벤트가 발생할 때마다
		//id가 f1인 그룹의 왼쪽 좌표를 이벤트가 발생한 X좌표로 변경
		//id가 f1인 그룹의 위쪽 좌표를 이벤트가 발생한 Y좌표로 변경
		//dom: Document Object Model 모든 테그에 접근할 수 있게 해줌
	}
	/*
    IE에선 document.all.f1 사용
	document.all.f1.style.top=event.clientY+"px";
	*/
</script>
</head>
<body>
	<span id="f1" style="position:absolute;">
		<img src="img/ball.jpg" border="0" name="image" />
	</span>
</body>
</html>

 

10. 음악파일

<audio controls="controls" preload autoplay loop>
<!-- 화면에 오디오 출력, 미리 오디오를 로드, 자동연주, 반복재생 -->
	<source src="경로명" type="audio/mp3" />
</audio>

 

11. 비디오파일

<video width="400" controls="controls" autoplay="autoplay">
	<source src="경로명" type="video/mp4">
</video>

 

12. 리스트

<ul>
	<li>첫번째</li>
	<li>두번째</li>
	<li>세번째</li>
</ul>

<!-- ordered list: 순서있는 리스트 -->
<ol type="A">
	<li>첫번째</li>
	<li>두번째</li>
	<li>세번째</li>
</ol>

<ol type="i">
	<li>첫번째</li>
	<li>두번째</li>
	<li>세번째</li>
</ol>

<ol start="100">
	<li>첫번째</li>
	<li>두번째</li>
	<li>세번째</li>
</ol>

 

13. form 테그

<form action="hello.jsp" method="get">

- 서버에 있는 hello.jsp 찾아감(자바 파일도 찾아갈 수 있음)

- get: 전송할 때 데이터를 head에 담아서 보냄, 길이가 고정(128byte~2k) 되있고 속도가 빠름, 데이터가 url에 노출됨

- post: 전송할때 데이터를 body에 담아서 보냄, 길이가 유동적이고 상대적으로 느림, 데이터가 노출 안되므로 보안에 강함

 

14. input 테그

type

- text: 입력칸

- password: 비밀번호

- email: 이메일

- submit: 제출(클릭 시 form의 action 처리됨)

- reset: 다시 작성

- tel: 전화번호

- hidden: 화면에 안보이게 데이터 서버로 전송 가능(다른 페이지로 갈때 같은 값을 계속 넘겨주어야 할때 사용)

- date: 날짜

autofocus: 자동으로 선택되어 있음

required: 반드시 작성

placeholder: 샘플값

value: 초기값(값이 들어가 있음)

name: 입력한 값의 변수 이름

<body bgcolor="black" text="gray" >
	<h1>회원가입란</h1>
	이름<input type="text" name="name" value="홍길동" readonly /><br>
	<!-- readonly: 수정불가 -->
	비밀번호 <input type="password" name="pw" size="15" maxlength="15" /><br>
	<!-- size:입력란에 한번에 보여지는 최대길이 maxlength: 입력란에 넣을 수 있는 최대 문자 길이 -->
	전화번호 <input type="tel" name="tel" /><br>
	이메일 <input type="email" name="email" /><br>
	생년월 <input type="month" name="month" /><br>
	<!-- month: 년,월만 선택 가능 -->
	생년월일(2000년 이상만) <input type="date" min="1900-01-01" max="1999-12-31" name="date"  /><br>
	<!-- min,max로 최소최대값 설정 가능 -->
	생일은 몇번째 주? <input type="week" name="week" /><br>
	<!-- week: 년,주 선택 가능 -->
	태어난시간? <input type="time" name="time" /><br>
	<!-- time: 시간설정 가능 -->
	현재시간? <input type="datetime-local" name="local" /><br>
	<!-- datetime-local: 년,월,일, 시간 설정 가능 -->
	좋아하는색? <input type="color" name="color" onchange="document.body.style.backgroundColor=this.value" /><br>
	<!-- 스크립트, 객채.속성 = 값 (대입) -->
	좋아하는 숫자?(0~100, 10단위) <input type="number" min="0" max="100" step="10" name="number" /><br>
	<!-- step으로 단위 설정 가능 -->
	성격?   내성적<input type="range" name="range" min="1" max="100" step="10" />외향적<br>
	내 홈페이지: <input type="url" name="url" /><br>
	<!-- http:// 필수 작성 -->
	검색: <input type="search" placeholder="검색할 단어 입력" name="search" /><br>
	<!-- 크롬,사파리에서 뒤에 x자 표시 생김 -->
	<input type="submit" value="검색!"/><br>
</body>

 

체크박스

<form action="ex12hello.jsp" method="get">
	메일 전송 여부를 결정하세요<br><!-- yes or no -->
	<input type="checkbox" name="mailhow" checked /><br><br>
	
	좋아하는 운동은?<br><br><!-- 다중선택 가능, 같은 항목끼리 같은 name -->
	<input type="checkbox" name="exercise" value="soccer" />축구<br>
	<input type="checkbox" name="exercise" value="tennis" />테니스<br>
	<input type="checkbox" name="exercise" value="golf" />골프<br>
	<br><br>
	
	좋아하는 음식은?<br><br>
	<input type="checkbox" name="food" value="bread" />빵<br>
	<input type="checkbox" name="food" value="milk" />우유<br>
	<input type="checkbox" name="food" value="lamen" />라면<br>
	<br><br>
	
	구매하고 싶은 물품은?<br><!-- 하나만 선택 가능 -->
	<input type="radio" name="cloth" value="dress" />드레스<br>
	<input type="radio" name="cloth" value="hill" />구두<br>
	<input type="radio" name="cloth" value="bag" checked />가방<br>
	<br><br>
	
	기타 의견을 적어주세요<br>
	<textarea cols="30" rows="10">작성해주세요</textarea>
	<textarea cols="30" rows="10" onfocus="this.select()">작성해주세요</textarea>
	<!-- 칸 클릭시 글자 선택됨 -->
	<br><br>
	
	도시 선택<br><!-- 콤보박스, 하나만 선택 가능 size는 화면에 보여지는 칸 수 -->
	<select name="select" size="2">
		<option value="베이징">베이징</option>
		<option value="서울" selected>서울</option>
		<option value="도쿄">도쿄</option>
	</select>
	<br><br>
	
	취미 선택<br><!-- 리스트박스, 다중 선택 가능 multiple이면 size의 default가 4 -->
	<select name="select2" multiple>
		<option value="travel">여행</option>
		<option value="pingpong">탁구</option>
		<option value="fish">낚시</option>
		<option value="soccer">축구</option>
		<option value="baseball">야구</option>
	</select>
	<br><br>
	<input type="submit" value="서버로 이동" />
	<input type="reset" value="다시 작성" />
	
</form>

- select의 option 태그에서 value 옵션이 있으면 value에 정해진 값이(travel) 없으면 태그 안에 적혀진 값(여행)이 전달됨

- option의 name을 따로따로 주면 각각 다른걸로 인식해서 여러개 선택되게 됨, 제대로 사용하려면 무조건 name을 같게 해야됨

 

 

 

파일전송

<form action="ex12hello.jsp" enctype="multipart/form-data" method="post">
	내이름: <input type="text" name="name" /><br><br>
	보낼 파일명: <input type="file" name="file" /><br><br>
	<input type="submit" value="서버로이동" />
	<input type="reset" value="다시작성" />
</form>

multipart/form-data는 전송 data type의 일종으로 
file 및 image 전송 시 사용, post방식을 사용하며
이것 안쓰면 전송파일 경로만 서버로 가고 내용은 안간다

저작자표시

'[front-end] > HTML' 카테고리의 다른 글

.js 파일, .css 파일 가져오기  (0) 2021.01.27
emmet 플러그인  (0) 2021.01.05
HTML  (0) 2021.01.05

'[front-end]/HTML'의 다른글

  • 현재글HTML 테그

관련글

댓글

티스토리툴바