티스토리 뷰

개발자교육

2024_06_19 오늘의 수업내용

regnator 2024. 6. 19. 13:19
728x90
반응형

수업요약 - 새로운 이클립스 설치 및 Html실습

구성도

클라이언트 언어 / 서버 언어 / 데이터베이스

--------------------------------------------------------------------------------

이클립스 다운로드 및 설치

  1. 크롬에서 이클립스 다운로드
    • 크롬 브라우저에서 "이클립스 다운로드" 검색
    • download_x86_64 선택
    • 다운받은 파일 실행
  2. 이클립스 설치
    • 선택: Eclipse IDE for Enterprise Java and Web Developers
    • 설치 경로: D:\ksmartHtml (폴더 생성)
    • 작업 공간 폴더 생성: D:\ksmartHtml\workspace
  3. 이클립스 실행
    • 이클립스 실행 후 폴더 경로 workspace 선택

--------------------------------------------------------------------------

이클립스 브라우저 단축키 설정

  1. 메뉴 > Windows > Preferences > General
  2. 브라우저: Chrome 선택
  3. Apply and Close

마지막 아이콘의 화살표중 3번째 (External Tool~)선택

 

메뉴>windows>generals>keys

 

 

Html예제

WEB-INF>index.html생성

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

 

 

1.Html의 개념 및 설명

-Hyper text Markup Language - 문서를 연결해 주는 링크를 표시하다

 

HTML 문서 트리 구조

 

 

HTML 노드 개요

문서 노드 (Document Node)

  • 정의: HTML 문서의 최상위 노드.
  • 특징: HTML 문서 전체를 나타내며, 모든 다른 요소들은 이 문서 노드의 자식으로 구성됨.

요소 노드 (Element Node)

  • 정의: HTML 문서의 각 요소(태그).
  • 특징: 다른 요소 노드나 텍스트 노드를 자식으로 가질 수 있음.

속성 노드 (Attribute Node)

  • 정의: HTML 요소의 속성을 나타냄.
  • 특징: 요소에 추가 정보를 제공하며, 요소 노드의 일부로 포함됨.

텍스트 노드 (Text Node)

  • 정의: HTML 문서의 텍스트 내용을 나타냄.
  • 특징: 요소 노드의 자식으로 포함되며, 실제 텍스트 내용을 표시함.

------------------------------------------------------------------------------

요약:

  • 문서 노드: HTML 문서 전체.
  • 요소 노드: HTML 태그.
  • 속성 노드: HTML 태그의 속성.
  • 텍스트 노드: HTML 태그 안의 텍스트.

 

HTML 여러 스타일 예제

모든 html 코드 공통으로

1. 블럭 태그 = 태그를 생성하게 되면 한줄을 다 차지함

2. 인라인 태그 = 태그를 생성하게 되면 해당 태그의 너비만큼만 차지하기 때문에 가로 너비를 다 차지하지 않는 이상 한줄로 출력

1. 제목 태그

  • h1 / h2 / h3 / h4 / h5 / h6

<section>

<span class="font3">제목 태그</span>

<h1>h1</h1>

<h2>h2</h2>

<h3>h3</h3>

<h4>h4</h4>

<h5>h5</h5>

<h6>h6</h6>

</section>

2. 글씨체 관련 태그

  • 이텔릭체: <i>이텔릭체</i>
  • 굵은 글씨: <b>굵은 글씨</b> 또는 <span style="font-weight: bold">굵은 글씨</span>
  • 중요한 내용: <strong>중요한 내용</strong>
  • 강조된 내용: <em>강조된 내용</em>

----------------------------------------------------------------------------------

HTML 문서에서 택스트를 강조하는데 사용되는 태그

이 문장은 이텔릭체로 표시됩니다

이 문장은 1.굵은 글씨로 표시됩니다

이 문장은 2.굵은 글씨로 표시됩니다이 

이 문장은 중요한 내용을 담고 있습니다.

문장은 강조된 내용을 포함하고 있습니다

 

<section>

<span class="font3">글씨체 관련 태그</span>

<div>

<div>

<span class="font1"> HTML 문서에서 택스트를 강조하는데 사용되는 태그 </span>

</div>

<p>이 문장은 <i>이텔릭체</i>로 표시됩니다

</p>

<p>이 문장은 1.<b>굵은 글씨</b>로 표시됩니다

</p>

<p>이 문장은 2.<span style="font-weight: bold">굵은 글씨</span>로 표시됩니다

</p>

<p>이 문장은 <strong>중요한 내용</strong>을 담고 있습니다.

</p>

<p>이 문장은 <em>강조된 내용</em>을 포함하고 있습니다

</p>

</div>

</section>

3. 띄어쓰기

  • HTML에서 공백은 여러 개를 입력하더라도 하나로 인식됨.
  • 여러 개의 공백을 유지하려면 &nbsp; 사용.

---------------------------------------------------------------------------------------------------------------------------

HTML에서 공백은 여러 개를 입력하더라도 하나로 인식되고, 필요에 따라 줄 바꿈이 일어난다.

하지만 때로는 공백을 여러개 유지하면서 줄 바꿈을 방지해야 할 때가 있다

이때  &nbsp;를 사용하면 된다

이 문장은 한개의 공백을 유지합니다.

이 문장은         여러개의 공백을 유지합니다

<section>

<span class="font3">띄어쓰기</span>

<div>

<div>

<span class="font1"> HTML에서 공백은 여러 개를 입력하더라도 하나로 인식되고, 필요에 따라 줄 바꿈이 일어난다. <br>하지만 때로는 공백을 여러개 유지하면서 줄 바꿈을 방지해야 할 때가 있다<br> 이때 &nbsp;&amp;nbsp;를 사용하면 된다

</span>

</div>

<p>이 문장은 한개의 공백을 유지합니다.</p>

<p>이 문장은 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;여러개의 공백을 유지합니다</p>

</div>

</section>

4. 개행문자

  • 줄 바꿈을 위해 <br> 태그 사용.

---------------------------------------------------------------------------------------------------------------------------

이 문장은 br태그를 적용하지 않은 문자입니다

이 문장은 br태그를
적용한 문자입니다

<section>

<span class="font3">개행문자</span>

<div>

<div>

<span class="font1"> 새로운 줄을 시작하는데 사용되는 문자 </span>

</div>

<p>이 문장은 br태그를 적용하지 않은 문자입니다</p>

<p>이 문장은 br태그를 <br>적용한 문자입니다

</p>

</div>

</section>

5. 미디어 태그

<section>

<span class="font3">미디어 태그</span>

<div class="align_cont">

<div>

<span class="font1"> 미디어(이미지, 오디오, 비디오 등)를 표시하거나 재생하기 위해 사용되는 몇 가지 주요한 HTML 태그 </span>

</div>

<p><img src="https://img.freepik.com/free-photo/ultra-detailed-nebula-abstract-wallpaper-4_1562-749.jpg?size=626&ext=jpg&ga=GA1.1.632798143.1705881600&semt=sph" alt="이미지 태그" /></p>

<p><audio src="C:\Users\ECS\Downloads\sample.mp3" alt="오디오 태그" controls></audio></p>

<p><video src="C:\Users\ECS\Downloads\sample2.mp4" controls alt="비디오 태그" style="width: 300px; height: 300px" loop=""></video></p>

<p><iframe width="560" height="315" src="https://www.youtube.com/embed/m6pTbEz4w3o?si=fDMcXtrfkReV43Vm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>

</div>

</section>

6. 목록 태그

  • Unordered List (순서가 없는 목록)
    • <ul><li>항목</li></ul>
  • Ordered List (순서가 있는 목록)
    • <ol><li>항목</li></ol>
  • Definition List (용어와 정의 목록)
    • <dl><dt>용어</dt><dd>정의</dd></dl>

---------------------------------------------------------------------------------------------------------------------------

Unordered List (순서가 없는 목록)
  • 항목 1
  • 항목 2
  • 항목 3
Ordered List (순서가 있는 목록)
  1. 항목 1
  2. 항목 2
  3. 항목 3
Definition List (용어와 정의 목록)
용어 1
       정의 1
용어 2
        정의 2

<section>

<span class="font3">목록 태그</span>

<div>

<span class="font1"> 목록을 생성하는 데 사용되는 태그 </span>

</div>

<div>

Unordered List (순서가 없는 목록)

<ul>

<li>항목 1</li>

<li>항목 2</li>

<li>항목 3</li>

</ul>

</div>

<div>

Ordered List (순서가 있는 목록)

<ol>

<li>항목 1</li>

<li>항목 2</li>

<li>항목 3</li>

</ol>

</div>

<div>

Definition List (용어와 정의 목록)

<dl>

<dt>용어 1</dt>

<dd>정의 1</dd>

<dt>용어 2</dt>

<dd>정의 2</dd>

</dl>

</div>

</section>

7. 링크 태그

  • <a href="URL">이동</a>

---------------------------------------------------------------------------------------------------------------------------

클릭하게 되면 연결된 곳으로 이동

이동

<section>

<span class="font3">링크 태그</span>

<div>

<span class="font1"> 클릭하게 되면 연결된 곳으로 이동 </span>

</div>

<a href="http://ksmart.or.kr/">이동</a>

</section>

8. 문단 태그

  • div: 레이아웃을 구성하거나 스타일을 적용하는 태그.
    • <div>내용</div>
  • span: 특정 부분을 감싸는 인라인 요소.
    • <span>내용</span>

---------------------------------------------------------------------------------------------------------------------------

div : 레이아웃을 구성하거나 스타일을 적용하기 위해 일반적으로 사용되는 태그
1
2
3
div 요소 내에 있는 문장입니다.
span : 특정 부분을 감싸는 인라인 요소로, 텍스트 스타일링이나 특정 부분에 스크립트를 적용할 때 사용되는 태그
1 2 3

span 요소 내에 있는 문장입니다.

<section>

<span class="font3">문단 태그</span>

<div>

<span class="font1"> div : 레이아웃을 구성하거나 스타일을 적용하기 위해 일반적으로 사용되는 태그 </span>

<div style="background-color: yellow">1</div>

<div>2</div>

<div>3</div>

</div>

<div>div 요소 내에 있는 문장입니다.</div>

<div>

<span class="font1"> span : 특정 부분을 감싸는 인라인 요소로, 텍스트 스타일링이나 특정 부분에 스크립트를 적용할 때 사용되는 태그 </span> <br> <span style="background-color: yellow">1</span> <span>2</span> <span>3</span>

</div>

<span>span 요소 내에 있는 문장입니다.</span>

</section>

9. 테이블 태그

  • thead: 표 상단
  • th: 표의 헤더 셀, 표 상단 thead의 칸을 나타낼 때 사용. 또한, td(데이터들)의 제목이 되는 부분에는 th를 사용가능.
  • tbody: 표 본문
  • tfoot: 표 하단
  • tr: 행 (Row) 을 지정, tr(Table Row). 한 줄
  • td: 데이터 셀,열(Column) 표현
  • tr이 한 줄을 표현, td는 줄의 칸 수

---------------------------------------------------------------------------------------------------------------------------

             이름                      나이             성별          키

A 31세 남자 193cm
B 27세 188cm
C 31세 178cm
D 32세 195cm
E 미상

<section>

<span class="font3">테이블 태그</span>

<div class="align_cont_img">

<span class="font1"> thead = 는 표 상단을 담당합니다.<br> th = 표 상단 thead의 칸을 나타낼 때 사용합니다. 또한, td(데이터들)의 제목이 되는 부분에는 th를 사용할 수 있습니다.<br> tbody = 는 표 본문을 담당합니다.<br> tfoot은 tbody뒤에 위치합니다.<br> 행(Row)을 지정하는 요소 : tr(Table Row). 한 줄<br> 열(Column)을 지정하는 요소 : td(Table Data)는 한 칸의 cell data를 표현합니다. 한 줄 안에 들어가는 데이터<br> :전구: tr이 한 줄을 표현, td는 줄의 칸 수

</span>

<p><img src="../../img/그림1.png"></p>

</div>

<caption>

<span>신상카드</span>

</caption>

<table border="1">

<thead>

<tr>

<th>이름</th>

<!-- 웹표준때문에 th를 두는거지 td를 사용해도 됨 -->

<th>나이</th>

<th>성별</th>

<th>키</th>

</tr>

</thead>

<tbody>

<tr>

<td>A</td>

<td>31세</td>

<td rowspan="4" style="background-color: blue; color: white;">남자</td>

<td>193cm</td>

</tr>

<tr>

<td> B</td>

<td>27세</td>

<td>188cm</td>

</tr>

<tr>

<td>C</td>

<td>31세</td>

<td>178cm</td>

</tr>

<tr>

<td>D</td>

<td>32세</td>

<td>195cm</td>

</tr>

<tr>

<td>E</td>

<td colspan="3" style="background-color: gray; color: white; text-align: center">미상</td>

</tr>

</tbody>

</table>

</section>

10. input 태그

  • 사용자로부터 정보를 입력받는 요소.
  • 속성: type, required, placeholder, name, readonly, disabled, value

---------------------------------------------------------------------------------------------------------------------------

<section>

<div class="align_cont">

<span class="font1">input 태그</span>

<div>

웹 페이지에서 사용자로부터 정보를 입력받을 수 있는 요소<br> 이 태그를 사용하여 텍스트, 숫자, 날짜, 이메일 등 다양한 형식의 데이터를 입력받을 수 있다.<br><br>

input 태그의 속성

 

type = 입력받을 데이터 유형 (text, number, email, date, time, hidden, file)<br>

required = 입력받는 데이터가 필수인 것들<br>

placeholder = 작성 예시 문구<br>

name = 프로그래밍 언어에서 데이터를 가져올때 사용되는 네임<br>

readonly = 입력된 데이터의 값을 변경 못하게 방지<br>

disabled = 요소를 비활성화

value = 입력된 데이터

</div><br>

<!-- <input type="text" name="username" placeholder="사용자 이름을 입력해주세요."><br>

<input type="number" name="age" placeholder="나이를 입력해주세요."><br>

<input type="email" name="email" placeholder="이메일 주소를 입력해주세요."><br>

<input type="date" name="date" placeholder="날짜를 입력해주세요."><br>

<input type="time" name="time" placeholder="시간 입력해주세요."><br>

<input type="file" name="file"><br> -->

<form action="" method="get">

이름 : <input type="text" name="st_name" required><br>

<input type="text" readonly="readonly" value="성별을 선택해주세요"><br>

<input type="radio" id="option1" name="option" value="1" required>

<label for="option1">남성</label></br>

<input type="radio" id="option2" name="option" value="2" required>

<label for="option2">여성</label></br>

<input type="radio" id="option3" name="option" value="3" disabled="disabled">

<label for="option3">중성</label></br>

<input type="text" placeholder="하고싶은 말을 적어주세요"><br>

<input type="submit">

</form>

</div>

</section>

11. label 태그

  • 입력 필드와 해당 필드의 설명을 제공하는 태그.

---------------------------------------------------------------------------------------------------------------------------

<section>

<div class="align_cont">

<span class="font1">label 태그</span>

<div>

입력 필드와 해당 필드의 설명을 제공하기 위해 사용되는 태그이며, 요소의 id와 label의 for 데이터가 일치해야함

</div><br>

<label for="username">사용자 이름:</label>

<input type="text" id="username" name="username" required>

<label for="age">사용자 나이:</label>

<input type="number" name="age" placeholder="나이를 입력해주세요">

</div>

</section>

12. radio 태그

  • 여러 개의 선택지 중 하나를 선택할 수 있는 요소. name을 일치시켜야 중복 선택이 안됨

---------------------------------------------------------------------------------------------------------------------------

<section>

<div class="align_cont">

<span class="font1">radio 태그</span>

<div>

<span>여러 개의 선택지 중에서 단 하나의 선택을 할 수 있는 요소, 주의할점은 name을 일치시켜야 중복 선택이 안됨</span>

</div><br>

<input type="radio" id="option1" name="radioGroup" value="Y">

<label for="option1">동의</label>

 

<input type="radio" id="option2" name="radioGroup" value="N">

<label for="option2">비동의</label>

</div>

</section>

13. 체크박스 태그

  • 여러 개의 선택지 중에서 다중 선택이 가능한 체크박스. name을 일치시켜야 함.

---------------------------------------------------------------------------------------------------------------------------

<section>

<div class="align_cont">

<span class="font1">check box 태그</span>

<div>

여러 개의 선택지 중에서 다중 선택이 가능한 체크박스를 생성하는 태그, radio와 마찬가지로 name을 일치시켜야함

</div><br>

<input type="checkbox" name="checkGroup" value="Y">

<label for="option1">동의</label>

 

<input type="checkbox" name="checkGroup" value="N">

<label for="option2">비동의</label>

</div>

</section>

14. textarea 태그

 여러 줄의 텍스트를 입력할 수 있는 입력란을 생성하는 태그.

  • rows: 입력란의 높이를 지정.
  • cols: 입력란의 너비를 지정.

---------------------------------------------------------------------------------------------------------------------------

<section>

<div class="align_cont">

<span class="font1">textarea 태그</span>

<div>

여러 줄의 텍스트를 입력할 수 있는 입력란을 생성하는 태그<br><br>

rows = 입력란의 높이를 지정<br>

cols = 입력란의 너비<br>

</div><br>

<label for="message">메시지:</label>

<textarea id="message" name="message" rows="10" cols="50"></textarea>

</div>

</section>

15. select 태그

선택 목록을 생성하는 태그입니다. option 태그를 사용하여 선택 가능한 각 옵션을 정의할 수 있음.

---------------------------------------------------------------------------------------------------------------------------

<section>

<div class="align_cont">

<span class="font1">select 태그</span>

<div>

선택 목록을 생성하는 태그, option 태그를 사용하여 선택 가능한 각 옵션을 정의<br><br>

</div><br>

<select id="country" name="country">

<!-- 여기서 중요한 것은 value값이다 -->

<option value="korea">대한민국</option>

<option value="usa">미국</option>

<option value="japan">일본</option>

<option value="china">중국</option>

</select>

</div>

</section>

 

16. form 태그

사용자 입력을 받는 부분을 정의하고, 해당 입력을 서버로 제출하는 역할을 함.

  • action: 데이터가 전송될 URL을 지정함.
  • method: 데이터를 서버로 전송하는 HTTP 메서드를 지정함.
    • GET: 폼 데이터를 URL 매개변수로 첨부하여 전송함. 주로 데이터를 조회하는 용도로 사용되며, URL에 데이터가 노출.
    • POST: 폼 데이터를 HTTP 요청 본문에 담아 전송함. 주로 데이터를 생성하거나 수정하는 용도로 사용되며, URL에 데이터가 노출되지 않음.
  • enctype: 데이터가 서버로 전송될 때 인코딩 방식을 지정함. 파일 업로드와 같은 이진 데이터를 전송해야 할 경우 multipart/form-data로 설정.

---------------------------------------------------------------------------------------------------------------------------

<section>

<div class="align_cont">

<span class="font1">form 태그</span>

<div>

사용자 입력을 받는 부분을 정의하고, 해당 입력을 서버로 제출하는 역할<br><br>

 

action = 데이터가 전송될 URL을 지정<br>

method = 데이터를 서버로 전송하는 HTTP 메서드를 지정<br>

- GET: 폼 데이터를 URL 매개변수로 첨부하여 전송, 주로 데이터를 조회하는 용도로 사용되며, URL에 데이터가 노출<br>

- POST: 폼 데이터를 HTTP 요청 본문에 담아 전송, 주로 데이터를 생성하거나 수정하는 용도로 사용되며, URL에 데이터가 노출되지 않음<br>

enctype = 데이터가 서버로 전송될 때 인코딩 방식을 지정, 파일 업로드와 같은 이진 데이터를 전송해야 할 경우 multipart/form-data로 설정<br>

</div><br>

<form action="file:///D:\ksmartHtml\workspace\edu\src\main\webapp\WEB-INF\index2.html" method="get" enctype="multipart/form-data">

<label for="name">이름:</label>

<input type="text" id="name" name="name" placeholder="이름을 입력하세요">

 

<label for="email">이메일:</label>

<input type="email" id="email" name="email" placeholder="이메일을 입력하세요">

 

<input type="file" id="file" name="file">

<button type="submit">제출</button>

</form>

</div>

</section>

전체코드

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>HTML여러 스타일 예제</title>

</head>

<body>

Hello, Html

<section>

<span class="font3">제목 태그</span>

<h1>h1</h1>

<h2>h2</h2>

<h3>h3</h3>

<h4>h4</h4>

<h5>h5</h5>

<h6>h6</h6>

</section>

<section>

<span class="font3">글씨체 관련 태그</span>

<div>

<div>

<span class="font1"> HTML 문서에서 택스트를 강조하는데 사용되는 태그 </span>

</div>

<p>이 문장은 <i>이텔릭체</i>로 표시됩니다

</p>

<p>이 문장은 1.<b>굵은 글씨</b>로 표시됩니다

</p>

<p>이 문장은 2.<span style="font-weight: bold">굵은 글씨</span>로 표시됩니다

</p>

<p>이 문장은 <strong>중요한 내용</strong>을 담고 있습니다.

</p>

<p>이 문장은 <em>강조된 내용</em>을 포함하고 있습니다

</p>

</div>

</section>

<!-- 띄어쓰기 코드 작성예시입니다. ctrl + shift +/ -->

=========================================================

<section>

<span class="font3">띄어쓰기</span>

<div>

<div>

<span class="font1"> HTML에서 공백은 여러 개를 입력하더라도 하나로 인식되고, 필요에 따라 줄 바꿈이 일어난다. <br>하지만 때로는 공백을 여러개 유지하면서 줄 바꿈을 방지해야 할 때가 있다<br> 이때 &nbsp;&amp;nbsp;를 사용하면 된다

</span>

</div>

<p>이 문장은 한개의 공백을 유지합니다.</p>

<p>이 문장은 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;여러개의 공백을 유지합니다</p>

</div>

</section>

<!-- 줄바꿈 관련 코드 작성 예시입니다 -->

=========================================================

<section>

<span class="font3">개행문자</span>

<div>

<div>

<span class="font1"> 새로운 줄을 시작하는데 사용되는 문자 </span>

</div>

<p>이 문장은 br태그를 적용하지 않은 문자입니다</p>

<p>이 문장은 br태그를 <br>적용한 문자입니다

</p>

</div>

</section>

=========================================================

<section>

<span class="font3">미디어 태그</span>

<div class="align_cont">

<div>

<span class="font1"> 미디어(이미지, 오디오, 비디오 등)를 표시하거나 재생하기 위해 사용되는 몇 가지 주요한 HTML 태그 </span>

</div>

<p><img src="https://img.freepik.com/free-photo/ultra-detailed-nebula-abstract-wallpaper-4_1562-749.jpg?size=626&ext=jpg&ga=GA1.1.632798143.1705881600&semt=sph" alt="이미지 태그" /></p>

<p><audio src="C:\Users\ECS\Downloads\sample.mp3" alt="오디오 태그" controls></audio></p>

<p><video src="C:\Users\ECS\Downloads\sample2.mp4" controls alt="비디오 태그" style="width: 300px; height: 300px" loop=""></video></p>

<p><iframe width="560" height="315" src="https://www.youtube.com/embed/m6pTbEz4w3o?si=fDMcXtrfkReV43Vm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>

</div>

</section>

<section>

<span class="font3">목록 태그</span>

<div>

<span class="font1"> 목록을 생성하는 데 사용되는 태그 </span>

</div>

<div>

Unordered List (순서가 없는 목록)

<ul>

<li>항목 1</li>

<li>항목 2</li>

<li>항목 3</li>

</ul>

</div>

<div>

Ordered List (순서가 있는 목록)

<ol>

<li>항목 1</li>

<li>항목 2</li>

<li>항목 3</li>

</ol>

</div>

<div>

Definition List (용어와 정의 목록)

<dl>

<dt>용어 1</dt>

<dd>정의 1</dd>

<dt>용어 2</dt>

<dd>정의 2</dd>

</dl>

</div>

</section>

<section>

<span class="font3">링크 태그</span>

<div>

<span class="font1"> 클릭하게 되면 연결된 곳으로 이동 </span>

</div>

<a href="http://ksmart.or.kr/">이동</a>

</section>

<section>

<span class="font3">문단 태그</span>

<div>

<span class="font1"> div : 레이아웃을 구성하거나 스타일을 적용하기 위해 일반적으로 사용되는 태그 </span>

<div style="background-color: yellow">1</div>

<div>2</div>

<div>3</div>

</div>

<div>div 요소 내에 있는 문장입니다.</div>

<div>

<span class="font1"> span : 특정 부분을 감싸는 인라인 요소로, 텍스트 스타일링이나 특정 부분에 스크립트를 적용할 때 사용되는 태그 </span> <br> <span style="background-color: yellow">1</span> <span>2</span> <span>3</span>

</div>

<span>span 요소 내에 있는 문장입니다.</span>

</section>

======================================================================================================================================

<section>

<span class="font3">테이블 태그</span>

<div class="align_cont_img">

<span class="font1"> thead = 는 표 상단을 담당합니다.<br> th = 표 상단 thead의 칸을 나타낼 때 사용합니다. 또한, td(데이터들)의 제목이 되는 부분에는 th를 사용할 수 있습니다.<br> tbody = 는 표 본문을 담당합니다.<br> tfoot은 tbody뒤에 위치합니다.<br> 행(Row)을 지정하는 요소 : tr(Table Row). 한 줄<br> 열(Column)을 지정하는 요소 : td(Table Data)는 한 칸의 cell data를 표현합니다. 한 줄 안에 들어가는 데이터<br> :전구: tr이 한 줄을 표현, td는 줄의 칸 수

</span>

<p><img src="D:\51기한국스마트정보교육원\51기한국스마트정보교육원\04_조근형선생님\image.png"></p>

</div>

<caption>

<span>교육관련 목록 테이블 입니다.</span>

</caption>

<table class="add_table">

<thead>

<th>번호</th>

<th>제목</th>

<th>조회수</th>

<th>작성일시</th>

<th>작성자</th>

</thead>

<tbody>

<tr>

<!-- tr : 가로 한줄 -->

<td>1</td>

<!-- td : 가로에 들어가는 셀 -->

<td><a href="#">제목1</a></td>

<td><a href="#">제목1</a></td>

<td><a href="#">제목1</a></td>

<td><a href="#">제목1</a></td>

<!-- <td colspan="2">4</td>

<td rowspan="2">ksmart</td> -->

</tr>

<tr>

<td>2</td>

<td><a href="#">제목2</a></td>

<td>100</td>

<td colspan="2">2024-02-21</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="5">총 검색된 게시글 : 2</td>

</tr>

</tfoot>

</table>

</section>

<section>

<span class="font3">테이블 태그</span>

<div class="align_cont_img">

<span class="font1"> thead = 는 표 상단을 담당합니다.<br> th = 표 상단 thead의 칸을 나타낼 때 사용합니다. 또한, td(데이터들)의 제목이 되는 부분에는 th를 사용할 수 있습니다.<br> tbody = 는 표 본문을 담당합니다.<br> tfoot은 tbody뒤에 위치합니다.<br> 행(Row)을 지정하는 요소 : tr(Table Row). 한 줄<br> 열(Column)을 지정하는 요소 : td(Table Data)는 한 칸의 cell data를 표현합니다. 한 줄 안에 들어가는 데이터<br> :전구: tr이 한 줄을 표현, td는 줄의 칸 수

</span>

<p><img src="../../img/그림1.png"></p>

</div>

<caption>

<span>신상카드</span>

</caption>

<table border="1">

<thead>

<tr>

<th>이름</th>

<!-- 웹표준때문에 th를 두는거지 td를 사용해도 됨 -->

<th>나이</th>

<th>성별</th>

<th>키</th>

</tr>

</thead>

<tbody>

<tr>

<td>A</td>

<td>31세</td>

<td rowspan="4" style="background-color: blue; color: white;">남자</td>

<td>193cm</td>

</tr>

<tr>

<td>B</td>

<td>27세</td>

<td>188cm</td>

</tr>

<tr>

<td>C</td>

<td>31세</td>

<td>178cm</td>

</tr>

<tr>

<td>D</td>

<td>32세</td>

<td>195cm</td>

</tr>

<tr>

<td>E</td>

<td colspan="3" style="background-color: gray; color: white; text-align: center">미상</td>

</tr>

</tbody>

</table>

</section>

=========================================================================================================

<section>

<div class="align_cont">

<span class="font1">input 태그</span>

<div>

웹 페이지에서 사용자로부터 정보를 입력받을 수 있는 요소<br> 이 태그를 사용하여 텍스트, 숫자, 날짜, 이메일 등 다양한 형식의 데이터를 입력받을 수 있다.<br><br>

input 태그의 속성

 

type = 입력받을 데이터 유형 (text, number, email, date, time, hidden, file)<br>

required = 입력받는 데이터가 필수인 것들<br>

placeholder = 작성 예시 문구<br>

name = 프로그래밍 언어에서 데이터를 가져올때 사용되는 네임<br>

readonly = 입력된 데이터의 값을 변경 못하게 방지<br>

disabled = 요소를 비활성화

value = 입력된 데이터

</div><br>

<!-- <input type="text" name="username" placeholder="사용자 이름을 입력해주세요."><br>

<input type="number" name="age" placeholder="나이를 입력해주세요."><br>

<input type="email" name="email" placeholder="이메일 주소를 입력해주세요."><br>

<input type="date" name="date" placeholder="날짜를 입력해주세요."><br>

<input type="time" name="time" placeholder="시간 입력해주세요."><br>

<input type="file" name="file"><br> -->

<form action="" method="get">

이름 : <input type="text" name="st_name" required><br>

<input type="text" readonly="readonly" value="성별을 선택해주세요"><br>

<input type="radio" id="option1" name="option" value="1" required>

<label for="option1">남성</label></br>

<input type="radio" id="option2" name="option" value="2" required>

<label for="option2">여성</label></br>

<input type="radio" id="option3" name="option" value="3" disabled="disabled">

<label for="option3">중성</label></br>

<input type="text" placeholder="하고싶은 말을 적어주세요"><br>

<input type="submit">

</form>

</div>

</section>

===========================================================================================

<section>

<div class="align_cont">

<span class="font1">label 태그</span>

<div>

입력 필드와 해당 필드의 설명을 제공하기 위해 사용되는 태그이며, 요소의 id와 label의 for 데이터가 일치해야함

</div><br>

<label for="username">사용자 이름:</label>

<input type="text" id="username" name="username" required>

<label for="age">사용자 나이:</label>

<input type="number" name="age" placeholder="나이를 입력해주세요">

</div>

</section>

============================================================================================

<section>

<div class="align_cont">

<span class="font1">radio 태그</span>

<div>

<span>여러 개의 선택지 중에서 단 하나의 선택을 할 수 있는 요소, 주의할점은 name을 일치시켜야 중복 선택이 안됨</span>

</div><br>

<input type="radio" id="option1" name="radioGroup" value="Y">

<label for="option1">동의</label>

 

<input type="radio" id="option2" name="radioGroup" value="N">

<label for="option2">비동의</label>

</div>

</section>

<section>

<div class="align_cont">

<span class="font1">check box 태그</span>

<div>

여러 개의 선택지 중에서 다중 선택이 가능한 체크박스를 생성하는 태그, radio와 마찬가지로 name을 일치시켜야함

</div><br>

<input type="checkbox" name="checkGroup" value="Y">

<label for="option1">동의</label>

 

<input type="checkbox" name="checkGroup" value="N">

<label for="option2">비동의</label>

</div>

</section>

===============================================================================================================

<section>

<div class="align_cont">

<span class="font1">textarea 태그</span>

<div>

여러 줄의 텍스트를 입력할 수 있는 입력란을 생성하는 태그<br><br>

rows = 입력란의 높이를 지정<br>

cols = 입력란의 너비<br>

</div><br>

<label for="message">메시지:</label>

<textarea id="message" name="message" rows="10" cols="50"></textarea>

</div>

</section>

<section>

<div class="align_cont">

<span class="font1">select 태그</span>

<div>

선택 목록을 생성하는 태그, option 태그를 사용하여 선택 가능한 각 옵션을 정의<br><br>

</div><br>

<select id="country" name="country">

<!-- 여기서 중요한 것은 value값이다 -->

<option value="korea">대한민국</option>

<option value="usa">미국</option>

<option value="japan">일본</option>

<option value="china">중국</option>

</select>

</div>

</section>

=============================================================================================

<section>

<div class="align_cont">

<span class="font1">form 태그</span>

<div>

사용자 입력을 받는 부분을 정의하고, 해당 입력을 서버로 제출하는 역할<br><br>

 

action = 데이터가 전송될 URL을 지정<br>

method = 데이터를 서버로 전송하는 HTTP 메서드를 지정<br>

- GET: 폼 데이터를 URL 매개변수로 첨부하여 전송, 주로 데이터를 조회하는 용도로 사용되며, URL에 데이터가 노출<br>

- POST: 폼 데이터를 HTTP 요청 본문에 담아 전송, 주로 데이터를 생성하거나 수정하는 용도로 사용되며, URL에 데이터가 노출되지 않음<br>

enctype = 데이터가 서버로 전송될 때 인코딩 방식을 지정, 파일 업로드와 같은 이진 데이터를 전송해야 할 경우 multipart/form-data로 설정<br>

</div><br>

<form action="file:///D:\ksmartHtml\workspace\edu\src\main\webapp\WEB-INF\index2.html" method="get" enctype="multipart/form-data">

<label for="name">이름:</label>

<input type="text" id="name" name="name" placeholder="이름을 입력하세요">

 

<label for="email">이메일:</label>

<input type="email" id="email" name="email" placeholder="이메일을 입력하세요">

 

<input type="file" id="file" name="file">

<button type="submit">제출</button>

</form>

</div>

</section>

</body>

</html>

중요사항

개발자는 웹표준을 준수하여 코드를 작성해야함

1. 웹표준

2. 웹에 표현되는 형태가 동일하더라도 내용에 따라서 strong, span, b등 태그를 개별로 작성 - 웹표준

 

참고사이트

https://caniuse.com/ - 태그들이 브라우저에서 사용가능한지 확인하는 사이트, css, html 브라우저 호환성 검사 사이트

https://www.curioustore.com/#!/  - 변수명 참고 사이트       

  

728x90
반응형

'개발자교육' 카테고리의 다른 글

24_06_24 오늘의 수업내용  (0) 2024.06.24
24_06_21 오늘의 수업내용  (0) 2024.06.21
2024_06_20 오늘의 수업내용  (0) 2024.06.20
2024_06_18_오늘의 수업내용  (0) 2024.06.18
2024_06_17 오늘 학습내용  (0) 2024.06.17