23-02-15 HTML5

HTML5, CSS3/HTML5, CSS3

23-02-15 HTML5

모건이삼촌 2023. 2. 15. 18:13

※ 스피너바 레인지바 드롭다운

※input태그

<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    form {width: 500px; margin: 0 auto;}
    form input:not([type="checkbox"]), form button {width:90%; padding: 8px; margin: 10px 0;}
    form output {font-size: 11px; color: red;}
  </style>
  </head>
<body>
  <form name="frm">
    <legend>로그인</legend>
    <label for="id">ID</label><br>
    <input id="id" name="userid" placeholder="아이디를 입력하세요"><br>
    <label for="pw">비밀번호</label><br>
    <input type="password" id="pw" name="password" placeholder="비밀번호를 입력하세요"><br>
    <label><input type="checkbox">아이디 저장</label><br>
    <output name="result"></output>
    <!-- <button>로그인</button> -->
    <input type="submit" value="로그인">
  </form>
  <script>
    let frm = document.frm;
    frm.addEventListener("submit", function(e) { // 기본이벤트 제거
      frm.result.innerHTML = "";
      event.preventDefault(); 
      if(!frm.userid.value.trim()) {
        frm.result.innerHTML = "아이디를 입력하세요";
      }
      else if(frm.password.value.trim().length == 0) { // !와 .length==0은 같음
        frm.result.innerHTML = "비밀번호를 입력하세요";
      }
      else {
        frm.submit(); // form타입에 대한 서식전송
      }
    })
  </script>
</body>
</html>

form 태그

1) 속성

- 텍스트를 입력할 수 있는 form태그는 길이를 제한할 수 있다

- action : 서식에 대한 통신을 할 시 수신할 페이지

- method : http프로토콜에는 메서드가 있으며 통신수단에는 method가 사용되고 4가지정도가 사용됨

form태그에 사용되는 method는 post(create / 데이터 생성), get(read / 데이터 조회) 이며 기본값은 get이다

사용자의 입력값을 서버에서 처리할 때 post를 사용한다 (get방식은 쿼리스트링에 노출되기 때문)

2) novalidate

- form타입에 대한 유효성검증을 하지 않겠다는 의미

<form novalidate>

3) readonly

4) disabled

5) textarea

<textarea name="content" cols="30" rows="10"></textarea>

  <input type="text" name="result" size="50" maxlength="10" minlength="3">

size는 입력칸의 사이즈, min, max는 입력값의 범의 조절이다.

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
  <form>
    <p><input type="color" name="color"></p>
    <button>전송</button>
  </form>  
</body>
</html>

컬러피커에서 색상을 선택한 후 전송버튼을 누르면

%23ff0000

%23 = #

ff0000 = 색상 (16진수)

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
  <form>
    <p><input type="color" name="color"></p>
    <p>month<input type="month" name="month"></p>
    <p>week<input type="week" name="week"></p>
    <p>date<input type="date" name="date"></p>
    <p>time<input type="time" name="time"></p>
    <p>datetime-local<input type="datetime-local" name="datetime-local"></p>
    <button>전송</button>
  </form>  
</body>
</html>

color=%23000000&month=2023-02&week=2023-W07&date=2023-02-15&time=10%3A42&datetime-local=2023-02-15T10%3A42

T를 이용하여 연월일과 시분초를 구분

* min, max 속성값 사용

<p>date<input type="date" name="date" min="2023-02-03" max="2023-02-22"></p>

datepicker

 <p>tel<input type="tel" name="tel"></p>
    <p>url<input url="time" name="url"></p>
    <p>email<input type="email" name="email"></p>
    <p>search<input type="search" name="search"></p>
    <button>전송</button>

유효성검사도 해줌

    <p>number<input type="number" name="number"></p>
    <p>range<input type="range" name="range"></p>

number, range는 min, max, step의 속성값을 사용할 수 있음

    <p>file<input type="file" name="file"></p>
    <p>hidden<input type="hidden" name="hidden"></p>
    <p>image<input type="image" name="image"></p>

file을 전송할수 있는 기능이며 메서드가 post이고 enctype이 multipart/form-data이여야 파일 스트림이 전송된다

만약 메서드에 기본값인 get이라면 파일명만 전송된다.

속성값으로는 multiple이 있으며 사용하게되면 여러개의 파일을 한번에 전송할 수 있다.

hidden은 안보이지만 전송해야 하는 값이 있어야할 때 사용한다. hidden은 사용할 때 value값도 같이 사용해줘야 한다.

image는 submit과 같으며 이미지를 통한 전송을 ?? 항상 속성값에 src를 사용하여 경로를 지정해줘야 한다.

    <p>image<input type="image" name="image" src="../img/brando-iicon.png"></p>

<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<form>
  <fieldset>
    <legend>
      <h3>수강 형태</h3>
    </legend>
    <label><input type="radio" name="sugang" value="day"> 주간 </label>
    <label><input type="radio" name="sugang" value="night"> 야간 </label>
    <button>전송</button>
  </fieldset>
</form>  
</body>
</html>

이름값이 같으면 하나만 선택 할 수 있고 이름값이 다르면 둘다 선택할수 있으며 체크는 해제할 수 없다.

<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<form>
  <fieldset>
    <legend>
      <h3>수강 형태</h3>
    </legend>
    <label><input type="radio" name="sugang" value="day"> 주간 </label>
    <label><input type="radio" name="sugang1" value="night"> 야간 </label>
  </fieldset>
  <fieldset>
    <legend>
      <h3>수강 과목</h3>
    </legend>
    <label><input type="checkbox" name="subject" value="java"> 자바프로그래밍 </label>
    <label><input type="checkbox" name="subject" value="db"> 데이터베이스 </label>
    <label><input type="checkbox" name="subject" value="html"> HTML5 </label>
  </fieldset>
  <button>전송</button>
</form>  
</body>

sugang=day&subject=java&subject=db&subject=html

※select 태그

단일선택

<fieldset>
    <legend>
      <h3>성별</h3>
    </legend>
    <select name="gender">
      <option value="male">남</option>
      <option value="female">녀</option>
    </select>
  </fieldset>
  <button>전송</button>

gender=female

다중선택 (multple 속성 사용)

 <fieldset>
    <legend>
      <h3>취미</h3>
    </legend>
    <select name="hobby" multiple>
      <option value="exec">운동</option>
      <option value="sing">노래</option>
      <option value="read">독서</option>
      <option value="game">게임</option>
    </select>
  </fieldset>
  <button>전송</button>

Ctrl을 누른 상태로 클릭하면 다중선택이 된다.

6) kbd 태그

7) label 태그

8) map 태그

- 링크와 이미지태그의 합성

- 이미지태그를 써서 a태그 내부에 링크를 썼음

- 하나의 거대한 이미지 내에서 링크의 영역을 구분

- rect, circle, poly

※ 주의사항

usemap 사용시 이름앞에 #을 사용해야함

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
  <div>
    <img src="../img/restaurant-img4.jpg" width="744" height="710" usemap="#rectmap">
    <map name="rectmap">
      <area shape="rect" coords="20m 180, 340, 602" href="https://www.naver.com">
    </map>
  </div>  
</body>
</html>

사격형은 좌표를 4개 사용하며

20, 180은 이미지 크기의 시작점 340,602는 끝점이다.

<area shape="circle" coords="540, 50, 40" href="https://www.google.com">

원은 좌표 3개를 사용하며

중심값과 반지름값만 있으면 된다

<area shape="circle" coords="540, 50, 40" href="https://www.google.com">

http://maschek.hu/imagemap/imgmap/ 맵 좌표 만들어주는 사이트

9)Object 태그 (거의안씀)

외부플러그인을 사용하기 위한 태그

10) samp 태그 (사용안함)

11)small 태그 (사용안함 / css사용)

12) script 태그

html과 css가 결합되고 웹페이지에 로드된 후 브라우저 자바스크립트 엔진에 의해 실행됨

태그위치에 대한 제한이 없음 (아무곳에서나 사용 가능)

속성은 src = 'URL/파일명.js

13) span태그

인라인 요소를 묶을때 사용함

14)sub태그 (잘안씀 / css사용)

아래첨자 태그

15) textarea

여러줄의 텍스트를 입력할때 사용

드래그앤 드롭하면 크기가 변경되는데 resize:none로 설정하면 크기조절을 안함

16)ruby 태그 (많이 사용함)

윗주를 정의함

  <h2><ruby>大<rt>대</rt>韓<rt>한</rt>民<rt>민</rt>國<rt>국</rt></ruby></h2>

* sass

16) ins

추가된 글자 아래에 밑줄이 생김

17)del

글자 중간에 가로줄이 생김

※ 블록 요소

1. 개념

- 줄 바꿈이 발생하는 요소

- 너비와 높이값을 조정할 수 있음 (인라인은 불가)

- 블록 요소안에는 ㅡ인라인요소, 블록요소를 포함할 수 있음

- 블록요소를 text-align으로 가로정렬할 수 있다

- 블록요소를 vertical-align으로 세로정렬할 수 없음

- 블록요소를 display속성으로 인라인요소로 변경할 수 있음

2. 헤딩요소

- 헤딩은 제목 또는 부제목

- <h1>가장 큰 제목 ~ <h6>가장 작은 제목

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
  <h1>프론트앤드</h1>  
  <h2>프론트앤드</h2>  
  <h3>프론트앤드</h3>  
  <h4>프론트앤드</h4>  
  <h5>프론트앤드</h5>  
  <h6>프론트앤드</h6>  
</body>
</html>

border - 테두리

margin - 테두리를 기준으로 외부지역의 경계

padding -

2. 디비젼 요소 div

- 블록요소들과 인라인 요소들의 그룹단위로 정의

- 여백이 없음

3. p 태그

- Paragraph의 약어 (문단)

- 상하여백 존재

1, 2, 3 혼합예제)

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
  <style>
    body {margin: 0;}
    #header, #footer {text-align : center; background-color: azure; padding: 20px;}
    #container {min-height: 800px; width: 1130px; padding: 30px; margin-left: auto; margin-right: auto;}
    #section {margin: 0; width: 748px; float: left; border: 1px solid;}
    #aside {margin: 0; width: 348px; float: right; border: 1px solid;}
  </style>
<body>
  <div id="wrap">
    <div id="header">
      <h1>머릿말 부분</h1>
      </div>
      <div id="container">
        <h3 id="section">본문 부분</h3>
        <h3 id="aside">로그인 부분</h3>
      </div>
      <div id="footer">
        <p>copyright &copy; all rights reserved.</p>
    </div>
  </div>  
</body>
</html>

4. figure, figcaption (많이 안씀)

다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의할 때 사용

5. blockquote (거의 안씀)

블록레벨의 인용?

6. address 요소 (많이안씀)

소유자 또는 작성자의 연락처를 나타내는 태그

문서나 문서의 저자/소유자의 연락처 정보를 정의

7. pre 요소

정의 텍스트를 미리 포맷

공백처리기법

들여쓰기, 사이 띄우기 칸 띄운 만큼 공백이 생김

8. 가로줄 요소 hr (안씀)

횡긋기

회색, 1px

9.ul 태그(ul과 li를 알면 됨)

1) ul태그 중첩 (2단중첩까지는 많이 사용)

- ul안에 ul이 있음

2) 서브메뉴 사용법

10. ol, li태그

11. table

- tr : 행

- td : 셀(열)

11-1) 병합

셀병합 : colspan

행병합 : rowspan

예제)

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    table {margin: 0 auto;}
    table td {width: 100px; height: 50px; text-align: center;}
  </style>
</head>
<body>
  <table border="1">
    <tr>
      <td colspan="3" rowspan="2">1</td>
      <!-- <td>2</td> -->
      <!-- <td>3</td> -->
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <!-- <td rowspan="2">5</td> -->
      <!-- <td colspan="2" rowspan="2">6</td> -->
      <!-- <td>6</td> -->
      <!-- <td>7</td> -->
      <!-- <td>8</td> -->
      <td rowspan="2">9</td>
      <td>10</td>
    </tr>
    <tr>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <!-- <td>14</td> -->
      <td>15</td>
    </tr>
    <tr>
      <td colspan="2">16</td>
      <!-- <td>17</td> -->
      <td>18</td>
      <td>19</td>
      <td>20</td>
    </tr>
    <tr>
      <td>21</td>
      <td>22</td>
      <td colspan="3">23</td>
      <!-- <td>24</td> -->
      <!-- <td>25</td> -->
    </tr>
  </table>
  
</body>
</html>

- tbody : 행별 구획을 짓는 태그

- tfoot : 합계 등 최하단 셀을 만드는 태그

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>

</head>
<body>
  <button id="btn">이미지 추가</button>  
  <script>
    let cnt = 0;
    document.getElementById("btn").addEventListener("click", function() {
      let img = document.createElement("img");
      img.src = "../img/html5_icon.png";
      img.title = 'html 로고';
      img.alt = "html 로고" + cnt++;

      document.body.appendChild(img);
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
  <button id="btn">이미지 추가</button>  
  <script>
    let cnt = 0;
    // document.getElementById("btn").addEventListener("click", function() {
    //   let img = document.createElement("img");
    //   img.src = "../img/html5_icon.png";
    //   img.title = 'html 로고';
    //   img.alt = "html 로고" + cnt++;

    //   document.body.appendChild(img);
    // });
    $("#btn").click(function(){
      $("<img>")
      .attr("src","../img/html5_icon.png")
      .attr("title","html 로고")
      .attr("alt","html 로고" + cnt++)
      .appendTo("body");
    })
  </script>
</body>
</html>

'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글

23-02-17 CSS3 (0)	2023.02.17
23-02-16 HTML5 (0)	2023.02.16
23-02-14 HTML5, CSS3 (0)	2023.02.14
23-02-13 html5, css3 (0)	2023.02.13
23-02-10 html5, css3 (설치, 웹표준) (0)	2023.02.10

현재글23-02-15 HTML5

개발공부

개발자 도전기

23-02-15 HTML5

'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글

'HTML5, CSS3/HTML5, CSS3'의 다른글

티스토리툴바

« 2025/09 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

23-02-15 HTML5

'HTML5, CSS3 > HTML5, CSS3' 카테고리의 다른 글

'HTML5, CSS3/HTML5, CSS3'의 다른글

관련글

티스토리툴바