220428 HTML1

달거북씨 2022. 5. 24. 23:11

2022. 5. 24. 23:11

오랜만에 돌아온 필기 정리 시간~

프론트 공부 들어가면서 강의가 너무 재미없어졌...

하지만 이제 jsp도 들어가고 프로젝트도 시작하므로 미룰 수가 없다...

프론트 공부 시작해보겠습니다~

시작 전 도움 되는 사이트

https://www.w3schools.com/html/default.asp

HTML Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

▶다양한 html 태그를 공부할 수 있다.

아, 그리고 VSCode 사용할 줄 알았는데 그냥 이클립스에서 진행해서, 정리 역시 이클립스 기준.

1. HTML

HT : Hyper Text > 문서와 문서가 링크로 연결되어 있다.

M : Markup > 태그로 이루어져 있다.

L : Language > 언어

즉, 웹사이트 틀을 만들어주는 마크업 언어

2. <h1></h1>

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>안녕하세요. HTML</h1>
	<h2>안녕하세요. HTML</h2>
	<h3>안녕하세요. HTML</h3>
	<h4>안녕하세요. HTML</h4>
	<h5>안녕하세요. HTML</h5>
	<h6>안녕하세요. HTML</h6>
</body>
</html>

▶ 위에서부터 h1~h6까지의 글씨 크기

[출력결과]

3. <a>태그

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2>오늘의 테스트</h2>
	테스트 <strong>페이지</strong>
	(<a href="http://www.naver.com" target="_blank" title="네이버에 접속해보자">네이버 접속</a>)
</body>
</html>

The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

▶ 위 w3schools에서 가져온 <a>태그 설명

▶ 주요 골자는, a태그는 하이퍼링크를 정의하는데 사용되며 링크의 목적지를 나타내는 href가 가장 중요한 속성란 얘기

▶ href : 연결할 하이퍼링크 작성

▶ target : 링크 클릭 시 어떻게 창을 열지 동작을 설정해준다.

_self : 링크를 클릭한 창에서 연다(기본값).
_black : 연결문서를 새 창에서 엶

▶ title : 링크에 마우스를 갖다 대었을 때 link에 대한 설명문구를 작성할 수 있다.

▶ 그 외, <strong>은 글씨체를 굵게 만드는 역할을 한다.

[출력결과]

4. <li>태그

[코드]

<ol>
	<li>기술소개</li> 
	<li>기본문법</li>
	<li>하이퍼텍스트와 속성</li>
	<li>리스트와 태그의 중첩</li>
</ol>

<ul>
	<li>JAVA</li> 
	<li>DBMS</li>
	<li>Git&Github</li>
	<li>HTML</li>
</ul>

▶ <li>태그는 어떠한 항목에 대한 리스트 작업

▶ 서로 다른 성질의 리스트를 나누고 싶을 때는 <ul> 태그로 감싸준다.

▶ <ul>태그가 아닌 <ol>태그를 사용하면 리스트에 숫자가 적용된다.

[출력결과]

5. 실습

[코드]

1) HTML 페이지

<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업</title>
<meta charset="utg-8">
</head>

<body>
	<h1><a href="index.html">HTML</a></h1>
	<ol>
		<li><a href="1.html">기술소개</a></li>
		<li><a href="2.html">기본문법</a></li>
		<li><a href="3.html">하이퍼텍스트와 속성</a></li>
		<li><a href="4.html">리스트와 태그 중첩</a></li>
	</ol>

	<h2> HTML 수업</h2>
	HTML수업에 오신 것을 환영합니다.
	수업에 대한 내용은 링크를 통해 접근하실 수 있습니다.
</body>
</html>

▶ <head></head> 영역의 <title>태그는 탭의 제목을 변경할 수 있다.

2) 기술소개 페이지

<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업</title>
<meta charset="utg-8">
</head>

<body>
	<h1><a href="index.html">HTML</a></h1>
	<ol>
		<li><a href="1.html">기술소개</a></li>
		<li><a href="2.html">기본문법</a></li>
		<li><a href="3.html">하이퍼텍스트와 속성</a></li>
		<li><a href="4.html">리스트와 태그 중첩</a></li>
	</ol>

	<h2> 기술소개</h2>
	HTML은 웹페이지를 만드는 HyperText Markup Language이다.
</body>
</html>

3) 기본문법 페이지

<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업</title>
<meta charset="utg-8">
</head>

<body>
	<h1><a href="index.html">HTML</a></h1>
	<ol>
		<li><a href="1.html">기술소개</a></li>
		<li><a href="2.html">기본문법</a></li>
		<li><a href="3.html">하이퍼텍스트와 속성</a></li>
		<li><a href="4.html">리스트와 태그 중첩</a></li>
	</ol>

	<h2> 기본문법</h2>
	태그를 사용합니다.
</body>
</html>

4) 하이퍼텍스트와 속성 페이지

<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업</title>
<meta charset="utg-8">
</head>

<body>
	<h1><a href="index.html">HTML</a></h1>
	<ol>
		<li><a href="1.html">기술소개</a></li>
		<li><a href="2.html">기본문법</a></li>
		<li><a href="3.html">하이퍼텍스트와 속성</a></li>
		<li><a href="4.html">리스트와 태그 중첩</a></li>
	</ol>

	<h2> 하이퍼텍스트와 속성</h2>
	하이퍼텍스트와 속성을 이용합니다.
</body>
</html>

5) 리스트와 태그 중첩 페이지

<!DOCTYPE html>
<html>
<head>
<title>HTML - 수업</title>
<meta charset="utg-8">
</head>

<body>
	<h1><a href="index.html">HTML</a></h1>
	<ol>
		<li><a href="1.html">기술소개</a></li>
		<li><a href="2.html">기본문법</a></li>
		<li><a href="3.html">하이퍼텍스트와 속성</a></li>
		<li><a href="4.html">리스트와 태그 중첩</a></li>
	</ol>

	<h2> 리스트와 태그 중첩</h2>
	리스트와 태그 중첩을 사용합니다.
</body>
</html>

[출력결과]

6. <P>태그

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- Ctrl + Shift + / : 주석처리 -->
	<P>HTML을 학습하는 중입니다.</P>
	<P>HTML은 생각보다 할만하다.</P>
	<P>HTML 다음에는 CSS를 학습한다.</P>
</body>
</html>

▶ <p>태그는 단락을 구분지어준다.

[출력결과]

7. <br>태그

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	HTML을 학습하는 중입니다.<br><br><br>
	HTML은 생각보다 할만하다.<br><br><br><br><br>
	HTML 다음에는 CSS를 학습한다.<br>
</body>
</html>

▶ <br>태그 : 줄바꿈

▶ </br> 닫아줄 필요가 없다.

[출력결과]

8. <image>태그

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<img alt="강아지이미지" src="puppy.jpg" width="300" height="200" title="강아지 이미지">
</body>
</html>

▶ alt : image 출력이 안 될 시 대체되는 문구

▶ src : 이미지 경로

상대경로
절대경로 (현재 코드는 절대경로로 작성되어 있고, 같은 폴더 안에 puppy.jpg 파일이 들어가 있다.)
웹서버경로

▶ width : 이미지 넓이 지정▶ height : 이미지 높이 지정▶ title : <a>태그에서와 동일하게 사용됨. 마우스를 가져다 대면 이미지 정보에 대한 문구가 출력됨

[출력결과]

9. 테이블 만들기

[코드1. 기본테이블]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>	
<body>	
	<table border="2">
		<tr>
			<td>이름</td>
			<td>성별</td>
			<td>주소</td>
		</tr>
		<tr>
			<td>김자바</td>
			<td>남</td>
			<td>역삼동</td>
		</tr>
		<tr>
			<td>김디비</td>
			<td>여</td>
			<td>청주</td>
		</tr>
	</table>
</body>
</html>

▶ <tr>태그 : 행 / <td>태그 : 열

▶ <table>태그 : 표를 만드는 태그

▶ <table>태그 안 border는 테이블의 테두리 굵기를 의미한다.

[출력결과]

[코드2. 심화 테이블]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table border="2">
		<thread>
			<tr align = "center">
				<th>이름</th>
				<th>성별</th>
				<th>주소</th>
				<th>나이</th>
				<th>회비</th>
			</tr>
		</thread>
		<tbody>
			<tr align = "center">
				<td>김자바</td>
				<td>남</td>
				<td rowspan = "3">역삼</td>
				<td>20</td>
				<td>5만원</td>
			</tr>
			<tr align = "center">
				<td>김디비</td>
				<td>여</td>
				<td>28</td>
				<td>5만원</td>
			</tr>
			<tr align = "center">
				<td>김이클</td>
				<td>여</td>
				<td>22</td>
				<td>5만원</td>
			</tr>
		</tbody>
		<tfoot>
			<tr align = "center">
				<td colspan = "4">합계</td>
				<td>15만원</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

▶ <thead>태그 : 테이블 상단 / <tbody>태그 : 테이블의 본문 / <tfoot>태그 : 테이블 하단

▶ <thead>, <tbody>, <tfoot>의 위치가 서로 섞여 있어도 각 해당 태그에 맞춰 테이블이 그려진다. 즉, <thead> 태그가 코드 상 맨 밑에 있어도 출력결과는 테이블 상단에 표시된다.

▶ <th>태그 : 제목

▶ <tr>태그 안 align은 정렬을 의미한다.

align = "center" : 중앙정렬
align = "left" : 왼쪽정렬
align = "right" : 오른쪽 정렬
그 외 valign을 통해 글씨를 상하 정렬 할 수 있다.

▶ <td>태그 안 rowspan은 행합치기, colspan은 열합치기를 의미한다. 주어진 숫자만큼의 칸을 합친다.

[출력결과]

10. <form>태그

[코드]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="http://localhost/Login.jsp">
		<p>아이디 : <input type = "text" name = "id"></p>
		<p>패스워드 : <input type = "password" name = "pwd"></p>
		<p>주소 : <input type="text" name = "addr"></p>
		<input type = "submit">
	</form>
</body>
</html>

▶ <form>태그 : 사용자 의견이나 정보를 입력받을 큰 틀을 만드는 데 사용되는 태그. 폼 태그 안에서 입력된 데이터를 한 번에 서버로 전송한다.

▶ <form>태그 안 action은 폼 데이터를 서버로 보낼 때 해당 데이터가 도착할 URL을 의미한다.

▶ <input>태그는 사용자로부터 입력을 받을 수 있는 칸(상자)을 생성한다.

▶ <input>태그 안 type = "text"는 사용자로부터 텍스트 타입을 입력받겠다는 뜻이고, "password"는 비밀번호 타입으로 입력받겠다는 뜻이다. 패스워드 타입으로 받을 시 사용자가 입력하는 데이터가 *로 표시되어 나온다. 그 외에도 checkbox, submit, file, email, hidden 등등 다양한 타입을 지정할 수 있다.

▶ <input>태그 안 name으로 해당 폼 데이터의 이름을 지정할 수 있다.

▶ <input type = "submit">으로 입력받은 폼데이터를 action에 지정한 url로 한 번에 전송. '제출' 버튼이 생성된다.

[출력결과]

[전송결과]

▶ url에 입력한 localhost/Login.jsp로 데이터가 전송되었지만, 서버에 연결되어 있지 않아서 사이트에 연결할 수 없다.

▶ 파란색 밑줄을 보면, 각 name별로 해당 데이터가 입력된 것을 볼 수 있다.

728x90

저작자표시 비영리 변경금지 (새창열림)

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

220503 HTML3 (0)	2022.05.28
220502 HTML2 (0)	2022.05.27
220425 데이터베이스 INDEX (0)	2022.05.04
220422 데이터베이스 뷰, 시퀀스 (0)	2022.05.02
220420~21 데이터베이스 컬럼속성 (0)	2022.05.02

달거북씨의 코딩생활

220428 HTML1

1. HTML

2. <h1></h1>

3. <a>태그

4. <li>태그

5. 실습

6. <P>태그

7. <br>태그

8. <image>태그

9. 테이블 만들기

10. <form>태그

'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글

+ Recent posts

티스토리툴바