HTML
- HTML
- Tag table
-
tr과 td를 이용하여 table 구축
<!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>Document</title> <style> table { border-collapse: collapse; } td { border: 1px solid blue; padding : 10px; } </style> </head> <body> <table border="1"> <!-- border의 숫자의 크기가 커질수록 선이 굵어짐 --> <!-- tr*7>td*3 7행 3열을 빠르게 적을 수 있는 것--> <!-- tr이 행이고 td가 열이며 colspan은 열을 병합(가로병합)을 뜻하네 행을 기준으로 안에 열의 값을 넣어주는 것으로 진행하네--> <caption>공연 시간과 요금 정보</caption> <!-- caption은 table 태그 안에서 사용할 수 있는 태그이며 제목느낌 --> <tr> <td colspan="3">공연요금</td> </tr> <tr> <td>구분</td> <td>S석</td> <td>VIP</td> </tr> <tr> <td>성인</td> <td>50,000</td> <td>70,000</td> </tr> <tr> <td>청소년</td> <td>40,000</td> <td>60,000</td> </tr> <tr> <td>소인</td> <td colspan="2">미취학 아동 일반 요금의 50%</td> <!-- 소인은 2개의 열이 병합되어 있으므로 하나의 td를 지우고 병합 --> </tr> <tr> <td rowspan="2">공연시간</td> <td>1회</td> <td>13:00 - 15:00</td> </tr> <tr> <td>2회</td> <td>17:00 - 19:00</td> </tr> </table> </body> </html>
-
- Tag Input form
-
사용자가 입력한 정보를 다른 곳에 전송할 수 있음
<!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>Document</title> <style> form{ font-size: 30px; color: blue; } </style> </head> <body> <!-- 폼이라는 태그를 사용하면 다른 곳으로 정보를 전송할 수 있음 서버에 보내기 위해 사용하는 것이라고 생각 --> <form action="#" method="post" autocomplete="off"> <!-- action : 전송할 정보를 처리할 페이지의 url 입력 method : get이 default이고 post는 주소에 묻어서 정보를 전송하지 않음 autocomplete : 자동완성기능을 키거나 끄는 것--> 아이디 : <input type="text" name="id" value="해위~"><br> <!-- input 타입은 text이다. 라는 뜻 --> <!-- value는 사용자가 입력 전 기본값을 지정해주는 것이며 아이디 기억하기에 사용할 수 있음 --> 비밀번호 : <input type="password" name="pw" required><br> <!-- 비밀번호는 노출되면 안되는 정보이므로 type을 password로 지정 required : 사용자가 비밀번호를 입력하지 않으면 전송이 안되도록 설정하는 것 --> 성별 <br> <input type="radio" name="gender" value="male"> 남 <input type="radio" name="gender" value="female"> 여 <br> <!-- 둘 중 하나를 선택할 수 있는 라디오 버튼을 생성 라디오 버튼을 생성하기 위해서는 name을 똑같이 생성해야함 버튼을 눌렀을때 보내야할 value를 지정해야함 --> 취미 <br> <input type="checkbox" name = "hobby" value="독서"> 독서 <input type="checkbox" name = "hobby" value="영화"> 영화 <input type="checkbox" name = "hobby" value="운동"> 운동 <input type="checkbox" name = "hobby" value="수면"> 수면 <input type="checkbox" name = "hobby" value="게임"> 게임<br> <!-- 여러개를 동시에 선택할 수 있는 체크박스 생성 --> <!-- 당연히 체크박스도 name을 똑같이 생성할 수 있음 버튼을 눌렀을때 어디에 값을 보내야하므로 value를 지정 --> 자기소개 <br> <textarea name="introduce" cols="30" rows="10">작성해주세요.</textarea><br> <input type="emaul" name="mail" placeholder="이메일을 입력하세요."><br> <!-- placeholder를 넣으면 사용자가 선택하기 전 텍스트가 표시됨 (가이드 라인)--> <input type="file" name="upload"><br> <!-- type을 file로 지정하면 페이지에 파일을 업로드할 수 있는 기능 --> <input type="number" name="age" min="1" max="150" placeholder="나이를 입력하세요."><br> <!-- 숫자만 입력하고 조건을 걸어줄 수 있는 기능 --> <input type="range" min="0" max="10" step="1" value="3"><br> <!-- 범위를 지정하여 그래프를 조정할 수 있는 range바를 만들어주며 value는 초기값이 무엇인지 알려주는 것 --> <input type="submit" value="전송"> <!-- 전송 버튼을 생성할 수 있음 --> <!-- http://127.0.0.1:5500/Java_Web/Front_end/HTML/6_InputForm/Chap1_FormBasic.html?id=%ED%95%B4%EC%9C%84%7E&pw=werwer&gender=male&hobby=%EC%98%81%ED%99%94&hobby=%EC%9A%B4%EB%8F%99&hobby=%EC%88%98%EB%A9%B4&introduce=%EC%9E%91%EC%84%B1%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94.&mail=werwre%40werwer.cpone&upload=&age=# 이렇게 값이 저장되어서 보내짐 form에서 method를 get으로 하면 주소에 정보가 저장되어 보내짐 form에서 method를 post로 하면 주소에 정보가 저장되지 않고 숨겨져서 보내짐--> </form> </body> </html>
-
- Tag Label
- 체크박스와 텍스트를 함께 묶을 수 있는 tag
<!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>Label</title> <style> form label{ font-size: 50px; } </style> </head> <body> <form action="#"> <label> <input type="checkbox" name="auto-login">자동 로그인 </label><br> <!-- 사용자가 체크박스를 클릭하지 않아도 자동 로그인을 선택해도 클릭이 되도록 label로 묶음 --> <input type="checkbox" name="auto-login2" id="auto"> <label for="auto">자동로그인2</label> <!-- label의 for를 통해 input에서 만든 체크박스와 연동 위의 것과 똑같이 기능하는 것을 확인할 수 있음 --> </form> </body> </html>
- 체크박스와 텍스트를 함께 묶을 수 있는 tag
- Tag fieldset
- 구역을 나눌 수 있는 tag
<!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>Document</title> </head> <body> <form action="#"> <fieldset> <legend> <!-- 그룹화한 양식의 주제를 작성 --> Coffee Size </legend> <input type="radio" name="size"> Tall <input type="radio" name="size"> Grande <input type="radio" name="size"> Venti </fieldset> </form> </body> </html>
- 구역을 나눌 수 있는 tag
- Select & Option
- 바를 통해서 선택한 옵션을 지정할 수 있음
- 추가적으로 datalist를 통해서 사용자가 입력하여 자동 완성도 가능
- select 태그를 사용하게 되면 option 태그도 함께 사용
<!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>SelectOption</title> <style> form select{ font-size: 50px; } </style> </head> <body> <form action="#"> <select name="Drink"> <optgroup label = "Coffee"> <option value="am">Americano</option> <option value="es">Espresso</option> <option value="cl">Caffe Latte</option> <option value="cc">Cappuccino</option> <option value="vl">Vanila Latte</option> <!-- value를 적지 않으면 적은 내용이 그대로 전송됨 하지만 서버로 보낼 값을 다르게 하고 싶으면 value에 따로 적어줌 --> </optgroup> <optgroup label = "Juice"> <option >Orange juice</option> <option >Grape juice</option> </optgroup> <!-- f1을 통해서 그룹을 지정하여 하나의 select에서 옵션을 그룹화하여 진행할 수 있음 --> </select><br> <select name="Car" id=""> <option value="">Car1</option> <option value="">Car2</option> <option value="">Car3</option> </select><br> <br><br><br> <input type="text" list="fruits"> <datalist id="fruits"> <option>Apple</option> <option>Orange</option> <option>Mango</option> <option>Pineapple</option> <option>Grape</option> </datalist> <!-- input의 list를 통해서 datalist와 연동을 진행 datalist는 바에 직접 입력을 하여 자동완성도 가능 --> </form> </body> </html>
- 전역 속성
- 모든 HTML 요소에서 공통적으로 사용 가능한 속성
- 대표적으로 class와 id가 있음
- class 속성은 요소의 별칭을 지정하고 CSS나 JS의 요소 선택기를 통해 요소를 제어할 때 사용하며 중복으로 설정 가능
- id 속성은 문서에서 고유한 식별자를 정의하며 유일하게 설정
- class와 id는 모든 tag에 사용할 수 있으며 이것들은 보통 지목(Select)을 위해 사용
<!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>class_id</title> <style> .btn { height: 50px; background: #eee linear-gradient(to bottom, #fcfcfc, #eee); border: 2px solid #d5d5d5; border-radius: 5px; display: flex; align-items: center; padding: 0 12px; font-size: 20px; font-weight: 500; line-height: 1.5; cursor: pointer; box-sizing: border-box; position: relative; color: #333; } .btn-primary { border: 1px solid #65b836; color: #fff; background: #55a532 linear-gradient(#91dd70, #55ae2e); } .btn:hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.07); } .btn-pink { border: 1px solid #f060d1; color: #fff; background: #f060d1 linear-gradient(#f3baf0, #de56f0); } </style> </head> <body> <button id="join-btn" class="btn">Join</button> <!-- 클래스에 btn을 넣으면 style에서 지정한 btn과 같은 디자인 여러개의 버튼을 만들어도 btn과 같은 디자인으로 만들어짐 --> <!-- id 이름을 준 순간 다른 곳에서는 동일한 id이름을 줄 수 없음 --> <button class="btn btn-primary">Login</button> <!-- 디자인을 두개 적용할 수 있음 --> <button class="btn btn-pink">바튼</button> <script> document.getElementById("join-btn").onclick = function(){ alert("회원 가입 버튼이 클릭.") } </script> <!-- JS를 이용하여 특정 버튼을 클릭하게 되면 이벤트를 발생시키는 것 id가 동일해야함 --> </body> </html>
- style, title, data-*
- style : 요소에 직접 스타일을 지정할 때 사용
- title : 요소에 마우스를 포커스 했을 때 설명을 지정
- data-* : 사용자 정의 데이터 속성을 지정 HTML에 JS에서 이용할 수 있는 데이터를 저장하는 용도
<!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>style_title</title> </head> <body> <h1 title="정말신나?" style="color : blue; width : fit-content; background : red;">신난다 재미난다 점심시간~</h1> <!-- 해당 태그에만 style을 적용할 수 있도록 css를 통해서 style 적용 아까 js와 다르게 재활용이 안되서 별로 안쓸듯 --> <!-- title : 마우스를 h1에 올렸을때 tooltip이 나오는 기능 --> </body> </html><!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> <style> p { font-size: 50px; } </style> </head> <body> <p> Hello World!<br> </p> <!-- 아무리 가로 공백을 줘도 표시되지 않음 --> <p> Hello World! <br> </p> <!--   : 가로 공백 한칸을 해주는 명령어 --> <p> Hello     World! <br> "<div>" 태그는 아무 의미가 없는 블록 영역을 구성 </p> <!-- &ensp : 가로 공백 두 칸을 해주는 명령어 &emsp : 가로 공백 3칸을 해주는 명령어 " : "를 표현하는 명령어 < : <을 표현하는 명령어 > : >을 표현하는 명령어 "<div>"를 표한하기 위해 "<div>" 사용--> </body> </html>
- Tag table
안녕하세요! 공부한 내용을 기록하는 공간입니다.