📌 HTML 기능 이용하기(1)
- input type="" : 입력 항목, type에 따라 형태가 바뀜
input type="text": 텍스트 입력, 한 줄input type="date:: 캘린더와 함께 날짜 표시input type="color": 컬러파레트와 함께 색상 변경input type="radio": 라디오 버튼 형태 (checked로 초기에 체크된 항목을 설정을 할 수 있음)input type="checkbox": 체크박스 생성input type="botton": 버튼 생성
- 결과물
- 코드
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 안녕하세요 반가워요 또 봐요 <br> 한 줄 개행~<br> <input type="text" placeholder="아이디"><br> <input type="date"><br> <input type="color"><br> <input type="radio" name="gender">남 <input type="radio" name="gender" checked>여<br> <input type="checkbox">운동 <input type="checkbox">독서 <input type="checkbox">등산<br> <input type="button" value="버튼"> </body> </html>
📌 HTML 기능 이용하기(2)
<a href="url"></a>: 링크. 클릭하면 지정한 url페이지로 이동<a href="url" target="blank"></a>: 링크를 새 창에서 열기input type="botton" valiue="(버튼 이름)": 메세지창을 표시function alert: 자바스크립트 기능. 메세지창을 표시
- 결과물
- 코드
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="https://www.naver.com/">네이버 사이트로 이동</a><br> <a href="https://www.naver.com" target="_blank">새 창으로 열기</a><br> <a href="hello.html">hello.html로 이동</a><br> <input type="button" value="버튼!!!" onclick="hello();"> <script> function hello(){ alert('반가워요'); } </script> </body> </html>
📌 로그인 페이지, table 태그
<table></table>: 표 만들기<tr></tr>: 표의 행<td></td>: 표의 열<td colspan="2" rowspan="2"></td>: 칸 속성 합치기
- 결과물
- 코드
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{ border: 1px solid black; border-collapse: collapse; width: 300px; text-align: center; } tr, td{ border: 1px solid black; } table tr:first-child td{ background-color: blue; color: white; font-size: 20px; } </style> </head> <body> <h3>로그인 페이지</h3> ID: <input type="text"><br> PW: <input type="password"><br> <input type="button" value="로그인하기"><br><br> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <br> <table> <tr> <td>회원ID</td> <td><input type="text"></td> </tr> <tr> <td>비밀번호</td> <td><input type="password"></td> </tr> <tr> <td colspan="2"><input type="button" value="로그인"></td> </tr> </table> </body> </html>
📌 로그인 페이지 만들기
- 결과
- 코드
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <table> <tr> <td>- 아이디</td> <td><input type="text"></td> </tr> <tr> <td>- 비밀번호</td> <td><input type="password"></td> </tr> <tr> <td>- 비밀번호 확인</td> <td><input type="password"></td> </tr> <tr> <td>- 이름</td> <td><input type="text"></td> </tr> <tr> <td>- 성별</td> <td> <input type="radio">여성 <input type="radio">남성 </td> </tr> <tr> <td>- 전화번호</td> <td><select> <option value="">02</option> <option value="">052</option> </select> <input type="text"><input type="text"> </td> </tr> <tr> <td>- 이메일</td> <td><input type="text">@ <select> <option value="">선택</option> <option value="">naver.com</option> <option value="">gmail.com</option> </select> </td> </tr> <tr> <td>- 자기소개</td> <td> <textarea name="coment" cols="50" rows="5"></textarea> </td> </tr> </table> </body> </html>
📌 block / inline 태그
- 결과
- 코드
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .div1{ background-color: aqua; width: 50%; } span{ background-color: blueviolet; } </style> </head> <body> <div class="div1">안녕</div> <span>반갑</span> </body> </html>
📌 태그 및 공부 내용 정리
- 표에서 행과 열의 개수는 항상 동일해야함
<table></table>태그를 사용할 때는<tr></tr>안에<td></td>가 있어야 함
행 안에 열이 있어야 함- table td(열) 병합 -
<td colspan="2"></td>: 열 2개 병합 <div></div>: 눈에 안보이는 영역을 나누어줌 ✨자주 사용하는 태그✨- 가로길이 지정할 수 없음 - 화면의 처음부터 끝까지의 가로 영역을 모두 차지
block- div(너비 조정할 수 있지만 한 줄 다 차지)inline- span(너비 조정할 수 없고, 내용만큼의 크기 차지)
🍀 회고
- KDT 학원 과정을 시작하기 전 1주일 동안 선행학습을 시작했다. 과정명은 'java&파이썬 기반 인더스트리얼 플랫폼 구축 개발자 양성과정'. 학원에 나가기 전에 java 기초를 어느정도 쌓고 예습하려 했는데, 아직 패스트캠퍼스 온라인 과정을 거의 듣지 못했다... 자바의 기초도 손만 대놓은 상태라 이것저것 손대지 말고 하나를 확실히 해둘걸 조금 후회가 된다. 그래도 몇 달 전에 생활코딩 html, css 기초 인강을 들어두어서 다행이다.
- html은 결과가 한 눈에 보여서 확실히 만드는 재미가 있다. 로그인 페이지를 이렇게 간단하게 만들 수 있다니 신기하고 흥미가 생긴다. 앞으로 주로 배워갈 java는 그렇지 않겠지?ㅎ 화이팅하자
먹고 기도하고 코딩하라