✿∘˚˳°∘°
32일차 : 테이블 / 영역분할 / 하이퍼링크 / 폼 본문
20230110
1. 테이블태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블태그</title>
</head>
<body>
<!-- 구조를 유지해서 만들어야함! table태그안에 tr, tr태그안에 td -->
<table border="1"> <!--border:윤곽선-->
<tr>
<!-- 한 열의 넓이는 우리가 작성한 글씨 만큼-->
<!-- 열의 크기는 같은 열의 데이터중 가장 긴 길이를 기준으로 만들어짐 -->
<!-- 행별로 열의 개수는 동일해야 함 -->
<td>내용11111111111</td>
<td>내용2</td>
<td>내용3</td>
</tr>
<tr>
<td>내용4</td>
<td>내용5</td>
<td>내용6</td>
</tr>
</table>
<hr>
<table border="1">
<!-- caption : 테이블을 설명하는 내용 작성-->
<caption>브라우저 종류</caption>
<tr>
<!-- th : td와 같은 역할이지만 1.볼드체 2.가운데정렬 행의 대표를 의미한다(타이틀로 이용)-->
<th>브라우저 이름</th>
<th>개발회사</th>
<th>홈페이지</th>
</tr>
<tr>
<td>크롬</td>
<td>google</td>
<td>https://www.google.com</td>
</tr>
<tr>
<td>사파리</td>
<td>apple</td>
<td>https://www.apple.com</td>
</tr>
<tr>
<td>파이어폭스</td>
<td>Mozilla</td>
<td>https://www.mozilla.org</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<!-- th 3개 합쳐서 사용(컬럼을 합침) -->
<!-- 기본적으로 같은 열의 개수를 맞춰두고 합쳐서 사용 -->
<!-- 세칸짜리이기 때문에 th(또는td)를 또 만들면 네번째 칸에 생성됨 -->
<th colspan="3">회원정보</th>
</tr>
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
<tr>
<td>이름1</td>
<td>20</td>
<td>서울시 영등포구</td>
</tr>
<tr>
<td>이름2</td>
<td>21</td>
<td>서울시 강남구</td>
</tr>
<tr>
<td>이름3</td>
<td>22</td>
<td>서울시 동작구</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<!-- 행(row)를 합침 -->
<th rowspan="3">이름</th>
<td>이름1</td>
</tr>
<tr>
<td>이름2</td>
</tr>
<tr>
<td>이름3</td>
</tr>
<tr>
<!--이름4에는 rowspan의 영향이 미치지 못하므로 4행1열에 생성된다-->
<td>이름4</td>
</tr>
</table>
<hr>
<table border="1">
<tr>
<!-- 사이즈 지정 가능(단, 같은 열(넓이)/행(높이)도 영향을 받는다.) -->
<th width="200px">제목1</th>
<th height="50px">제목2</th>
<th>제목3</th>
</tr>
<tr>
<td>내용1</td>
<!-- 같이 지정 가능 -->
<!-- 다른 열/행도 영향을 받는다는 것만 기억하면된다 -->
<td width="100px" height="100px">내용2</td>
<td>내용3</td>
</tr>
<tr>
<td>내용4</td>
<td>내용5</td>
<td>내용6</td>
</tr>
</table>
<hr>
<table border="1">
<thead>
<!-- thead/tbody/tfoot : 구조를 나눠주는 코드(표에 직접적인 영향이 있는건 아니다) -->
<tr>
<th>이름</th>
<th>나이</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>유저1</td>
<td>21</td>
<td>서울시 영등포구</td>
</tr>
<tr>
<td>유저2</td>
<td>22</td>
<td>서울시 강서구</td>
</tr>
<tr>
<td>유저1</td>
<td>23</td>
<td>서울시 마포구</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">총 인원</th>
<td>3명</td>
</tr>
</tfoot>
</table>
<!-- 구조를 지정해주지 않은 코드는 모두 tbody가 자동으로 적용된다. -->
<!-- 디자인을 위해 thead tbody tfoot을 지정해 주는 것 -->
<style>
thead{
background-color:pink;
}
tbody{
background-color: antiquewhite;
}
tfoot{
background-color: cornflowerblue;
}
</style>
</body>
</html>
2. 영역분할태그
2 - 1 ) 영역분할태그 기본 - 블록 / 인라인
div : block형식의 송간을 분할(수직으로 공간분할)
span : inline 형식의 공간을 분할(수평으로 공간분할)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영역분할태그</title>
</head>
<body>
<h2>iframe</h2>
<!-- 가져올 youtube영상의 소스코드를 복사 -->
<iframe>소스코드를 복붙해서 넣으면 알아서 들어간다</iframe>
<hr>
<!-- h2태그 : 한줄전체를 차지하는 블록요소이기 때문에 안녕하세요만 따로 줄로 빠짐 -->
abc<h2>안녕하세요</h2>가나다라
<hr>
<!-- b태그 : 인라인 요소이기 때문에 여전히 한줄로 나옴-->
abc<b>안녕하세요</b>가나다라
<hr>
<!-- div태그 : 영역분할태그 좌우에 아무것도 못오게(수직형태로 공간을 분할) 영역을 끝까지차지 -->
<!-- div는 영역을 끝까지 차지하기 때문에 색을 입히면 한줄전체에 적용된다. -->
<!-- 단, 크기를 지정해주면 지정한 만큼만 사용(옆에 아무것도 못오는건 동일함) -->
abc<div style="background-color: antiquewhite; width: 100px;height: 100px;">안녕하세요</div>가나다라
<hr>
<!-- span : 공간만 분할해주고 싶을 때 사용-->
<!-- 한줄로 보이게 하면서 특정부분(안녕하세요)에만 다른 효과를 주고싶은 경우 사용 -->
<!-- 인라인태그는 크기변경이 불가능하므로 크기지정을 해줘도 콘텐츠내용까지만 지정됨 -->
abc<span style="background-color: antiquewhite;">안녕하세요</span>가나다라
</body>
</html>
2 - 2 ) 멀티미디어 태그
<img> : 웹페이지에 사진이나 그림을 삽입할 때 사용하는 태그(닫는 태그가 존재하지 않음)
- 이미지를 가져오고 싶을 때
복붙, 다운로드 X
개발자 도구에서 이미지를 선택해보면 경로가 나와있다 이걸받으면 안깨지는 파일로 받을 수 있음!
iconmonstr.com 등에서 로고 이미지 다운
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>멀티미디어태그</title>
</head>
<body>
<!-- 폴더를 생성해서 사용할 이미지/음악/비디오파일을 넣기 -->
<!-- 이미지크기도 지정할 수 있지만 작은이미지를 키우면 화소가 깨짐 -->
<img src="img/HTML_logo.png" alt="html로고" width="200px" height="200px">
<img src="img/like.png" width="100px" height="100px">
<hr>
<!-- controls를 사용하면 재생바가 생성됨 / preload 파일의 어느정도까지 가져올건지(음악분) -->
<audio src="파일경로" controls loop preload="auto"></audio>
<hr>
<!-- poster로 썸네일지정이 가능 -->
<video src="파일경로" controls width="500px" height="500px" poster="img/like.png"></video>
</body>
</html>
3. 하이퍼링크
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>하이퍼링크</title>
</head>
<body>
<h1 id="top">문서 시작위치 </h1>
<!-- 클릭 시 시스템 내부에 있는 페이지로 이동할 때 -->
<!-- 같은 폴더에 있으면 이름만 작성하면 되지만, 다른폴더에 있을경우 경로입력 -->
<a href="01_글자태그.html" target="_self"> 01.글자태그 페이지로 이동</a><br>
<a href="02_목록태그.html" target="_blank">02.목록태그 페이지로 이동</a><br>
<a href="img/dog.jpg">03.이미지로 이동</a><br>
<!--
taget : href경로에 지정된 파일이 열리는 위치 지정
_self : 현재창을 변경
_blank : 새창을 띄워서 문서 열기
_parent : 부모창에서 문서열기( 부모창 -> 현재창을 열어준 창 )
_top : 최상위 창
-->
<!-- 클릭 시 시스템 외보에 있는 페이지로 이동할 때 -->
<!-- 웹페이지 주소를 작성해 주면 된다. -->
<a href="http://www.naver.com">네이버로 이동</a><br>
<!-- href 뒤에 http가 붙어있으면 링크를 전체를 받아서 이동 / 아니라면 맨뒤에만 입력한 해당링크로 입력되어 이동-->
<a href="http://www.naver.com"><img src=img/like.png width="50px"></a>
<!-- a태그 사이에 있는걸 눌렀을 때 이동, 위의경우 이미지를 클릭하면 이동된다. -->
<hr>
<!-- 이미지에서 영역을 나눠서 특정영역을 클릭했을 때 이동 -->
<img src="img/dog.jpg" usemap="#dog"> <!--usemap으로 img와 map을 연결-->
<map name="dog">
<!-- 좌표 계산 사이트 : http://maschek.hu/imagemap/imgmap/ -->
<area shape="circle" coords="272,100,57" href="img/head.jpg" target="_self">
<area shape="circle" coords="447,277,38" href="img/disk.jpg" target="_self">
<area shape="circle" coords="539,374,36" href="img/leg.jpg" target="_self">
</map>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 해당문서 내부로 이동 href="#아이디"-->
<a href="#top">제일위로</a>
</body>
</html>
4. 폼태그
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼태그</title>
</head>
<body>
<!-- 데이터를 주소창(url)을 이용해서 이동하는 방식 : get -->
<!-- 데이터 크기 제한 O / 보내는 데이터를 볼 수 있음 -->
<!-- test.html페이지에 get방식으로 데이터를 전송하는 form태그 -->
<form action="test.html" method="get">
<fieldset> <!-- 눈에보이게 영역을 잡아주기 위함 -->
<legend>로그인</legend><!--이름붙여주는 것-->
<!--input : 입력을 받는 태그 / type과 name은 반드시 작성해줘야한다.-->
아이디 : <input type="text" name="userId"><br>
비밀번호 : <input type="password" name="userPw"><br>
<input type="submit" value="로그인"><br>
<!-- input이 속해있는 form태그를 action에 작성한 test.html에 제출 -->
<!--
input type = "submit"은 전송버튼으로 submit이 속해있는 form태그를 전송하는 기능
해당하는 form태그 내부의 input에 입력된 값을 name속성으로 구분하여 전송
-->
<!-- 상단의 주소창 확인 -->
<!-- http://127.0.0.1:5500/front/01_html/test.html?userId=user01&userPw=1234 -->
<!-- action?userId=입력값userPw=입력값 이동할 때 [ 지정해준name = 입력값 ] 으로 전송된다. -->
<!--
test.html : action에 적은 페이지(데이터를 받아서 처리할 페이지)
? : 파라미터 구분자(왼쪽-페이지/오른쪽-전달값)
userId=user01&userPw=1234 : 파라미터(지정한name = 입력값)
-->
<!-- input 태그가 submit아래에 있어도 같은 form태그 안에있으므로 같이 전송된다. -->
<!-- form범위를 넘어가게되면 데이터가 넘어가지 않는다.-->
<input type="text" name="aaa">
<!-- 데이터가 전송되려면 반드시 input태그필요 / form태그 내부에 있지만 div이기때문에 111은 전송되지 않는다. -->
<div name="ccc">111</div>
</fieldset>
</form>
<input type="text" name="bbb"><br><!-- form태그영역의 외부에 있기 때문에 위의 로그인과 함께 전송되지 않는다. -->
<br>
<!-- http헤더에 데이터를 넣어보내는 방식 : post-->
<!-- 데이터 크기 제한 X / 보내는 데이터를 볼 수 없음-->
<!-- test.html페이지에 post방식으로 데이터를 전송하는 form태그 -->
<form action="test.html" method="post">
<fieldset>
<legend>로그인</legend>
아이디 : <input type="text" name="memberId"><br>
비밀번호 : <input type="password" name="memberPw"><br>
<input type="submit" value="로그인">
<input type="reset" value="취소">
</fieldset>
</form>
<br><hr><br>
<form action="test2.html" method="get">
<fieldset>
<legend>input 태그 속성 테스트</legend>
value 속성 : <input type="text" name="input1" value="기본으로대입되는 값"><br><!-- 입력되어있는 값 -->
placeholder : <input type="text" name="input2" placeholder="아이디"><br><!-- 입력에대한 가이드적용 -->
<!--http://127.0.0.1:5500/front/01_html/test2.html?input1=%EA%B8%B0%EB%B3%B8%EC%9C%BC%EB%A1%9C%EB%8C%80%EC%9E%85%EB%90%98%EB%8A%94+%EA%B0%92&input2=-->
<!-- input1은 전송되는 데이터가 있고, input2는 전송되는 데이터가 없다-->
<!-- readonly : 주소처럼 특정행동을 통해 값을 보낼 때 -->
readonly : <input type="text" name="input3" value="읽기전용" readonly><br>
<!-- disabled : 보여주기만하고 값을 전송하지 않을 때 -->
disabled : <input type="text" name="input4" value="비활성화" disabled><br>
required : <input type="text" name="input5" required><br><!-- 반드시입력해야함(필수값) -->
<input type="submit" value="전송">
</fieldset>
</form>
<br><hr><br>
<form action="test3.html" method="get">
<fieldset>
<legend>input type의 종류</legend>
text : <input type="text" name="a"><br><!--글자입력-->
password : <input type="password" name="b"><br><!--text와 동일하나 글자를 마스킹처리-->
hidden : <input type="hidden" name="c" value="숨겨진 값"><br><!-- input이 안보임-->
<!-- hidden : 값을 숨겨서 전송하고싶을 때(사용자에게 보여주고싶지 않을 때) 사용 -->
button : <input type="button" value="클릭" onclick="alert('짠')"><br>
<!-- 기능을 부여할 때 button사용 onclick기능으로 버튼을 누르면 '짠'팝업창이 출력됨-->
<button onclick="alert('짠')">클릭</button><br><!-- input type의 버튼과 동일한 기능 -->
<!--
button태그를 통해서도 기능부여가 가능
단, form태그 내부에서 button을 사용하는 경우 기본적으로 submit 동작
submit이 아닌 기능용 버튼이면 type="button" 속성을 반드시 부여해야 함
기능만 사용하고 submit을 사용하고 싶지 않을 경우 input type = button을 사용해야한다.
-->
<!--
input type="file"은 기본적으로 파일1개
만약, 파일을 여러개 선택하고 싶은 경우 multiple옵션이 필요
-->
file : <input type="file" name="d" multiple><br> <!-- 파일선택 -->
<!-- name속성값이 '동일한' radio중 1개만 선택이 가능 -->
<!-- name속성이 다르면 중복선택이 가능해진다.-->
<!-- 주의점 : 전송되는건 일이삼사오라는 눈에보이는 글자가아닌 value값인 12345이다. -->
radio : <br>
<input type="radio" name="e" value="1">일<br>
<input type="radio" name="e" value="2">이<br>
<input type="radio" name="e" value="3">삼<br>
<input type="radio" name="e" value="4">사<br>
<input type="radio" name="e1" value="5">오<br>
<!-- radio와 차이점 : name속성 값이 동일한 checkbox를 여러개선택 가능 -->
checkbox : <br>
<input type="checkbox" name="f" value="1">일<br>
<input type="checkbox" name="f" value="2">이<br>
<input type="checkbox" name="f" value="3">삼<br>
<input type="checkbox" name="f" value="4">사<br>
<input type="submit" value="보내기">
<button type="submit">보내기</button>
<input type="reset" value="취소"><!-- 입력한 모든 값 clear -->
</fieldset>
</form>
<form action="join.html" method="post">
<fieldset>
<legend>회원가입</legend>
<!--id=속성값을 부여해주고 for="속성값"을 입력해주면 아이디를 입력해도 textbox가 활성화된다. -->
<label for="memberId">아이디</label> : <input type="text" name="memberId" id="memberId" required>
<button type="button">중복체크</button>
<br>
<label for="memberPw">비밀번호</label> : <input id="memberPw" type="password" name="memberPw">
<br>
이름 : <input type="text" name="memberName" required><br>
성별 :
<input type="radio" name="gender" value="M" id="m"><laber for="m">남</laber>
<input type="radio" name="gender" value="F" id="f"><laber for="f">여</laber>
<br>
취미 :
<!-- label로 input을 감싸면 id for를 사용하지 않아도 가능 -->
<!-- 하지만 lable for=속성값 id=속성값을 더 많이 사용한다 -->
<label><input type="checkbox" name="hobby" value="운동">운동</label>
<label><input type="checkbox" name="hobby" value="잠">잠</label>
<label><input type="checkbox" name="hobby" value="게임">게임</label>
<label><input type="checkbox" name="hobby" value="코딩">코딩</label>
</fieldset>
</form>
<br><hr><br>
<form action = "test5.html" method = "get">
<fieldset>
<legend>input type - HTML5양식</legend>
color : <input type="color" name="a"><br>
<!-- 날짜 min : 최소값 / max : 최대값 기간을 제한해줄 수 있다. -->
date : <input type="date" name="b" min="2023-01-11" max="2023-01-24"><br>
datetime-local : <input type="datetime-local" name="c"><br>
month : <input type="month" name="d"><br>
week : <input type="week" name="e"><br>
time : <input type="time" name="f"><br>
<!-- number : 숫자만 입력 가능 value:초기값 step:증가값 -->
number : <input type="number" name="g" min="1" max="10" value="1" step="2"><br>
<!-- 입력 시 옆에 x자가 뜬다(보통 모바일에서 많이 사용) -->
search : <input type="search" name="h"><br>
<!-- url과 email은 <input type= "text">와 다를게 없어보이지만 전송 시 맞는 형식이 아닐 경우
입력 형식을 맞추라고 뜬다(http:// , @) -->
url : <input type="url" name="i"><br>
email : <input type="email" name="j"><br>
<input type = "submit" value="전송">
<!--전송하면 %23RGB코드날짜 형식으로 넘어간다.문자열로 넘어간다는 의미-->
</fieldset>
</form>
<br><hr><br>
<from action="test5.html" method="get">
<fieldset>
<legend>선택값을 넘기는 기능</legend>
<select name="a">
<option value="1">일</option>
<option value="2">이</option>
<option value="3">삼</option>
<option value="4">사</option>
</select>
</fieldset><br>
<!--폼하나에 여러개의 필드셋 사용 가능-->
<fieldset>
<!-- 텍스트의 한계점 : 한줄만 전송이 가능하다. 엔터기능이 들어가있지 않음 -->
<legend>여러줄의 입력값을 전달하는 기능</legend>
<!-- cols와 rows로 사이즈를 대충 설정해줄 수 있지만 사이지지정은 CSS에서 해준다 -->
<textarea name="b" cols="40" rows="10"></textarea>
</fieldset>
</from>
</body>
</html>
'국비수업 > HTML+CSS' 카테고리의 다른 글
| 36일차 : [실습] 헤더 / 약관동의 / 회원가입 (0) | 2023.01.17 |
|---|---|
| 35일차 : 배경스타일 / 트랜스폼 / 애니메이션 (0) | 2023.01.14 |
| 34일차 : 텍스트 / 목록스타일 / 레이아웃 (0) | 2023.01.14 |
| 33일차 : 선택자 (0) | 2023.01.11 |
| 31일차 : 글자태그 / 목록태그 (0) | 2023.01.09 |
'국비수업/HTML+CSS' Related Articles
more
Comments