(HTML/CSS)220314 학습일지

by

https://www.udemy.com/course/so_easy_html_css/

Udemys에서 배운 내용을 요약했습니다. 배웠다.

이미지를 다루자.

하나.

'추천 관련글,

이미지 주소를 복사하여 HTML에 붙여넣으면 자신의 서버가 아닌 다른 서버에서 이미지를 가져올 수 있습니다.

두 번째 사진

<h1>원본</h1>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

<h1>width만 지정</h1>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="100">

<h1>height만 지정</h1>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="100">

–그날은

–src 속성종료 태그 없이 이미지 파일의 URL을 지정합니다. 여기서 src는 소스를 나타냅니다.

–너비=”xx”, 높이=”xx”당신은 픽셀 단위로 크기를 지정할 수 있습니다

-width 및 height를 지정하지 않으면 원래 크기

– 너비 또는 높이 속성 중 하나만 지정하면 나머지는 원래 가로 세로 비율에 따라 자동으로 조정됩니다.

– 다음과 같이 웹 페이지가 나타납니다.

더보기

<!DOCTYPE html>
<html lang="en">
<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>
    <h1>원본</h1>
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    <br><br>
    <h1>width만 지정</h1>
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="100">
    <br><br>
    <h1>height만 지정</h1>
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="100">
</body>
</html>


3. 이미지 링크

<a href="https://www.google.com/" target="_blank"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></a>

만약 당신이 -태그 만들기 태그를 사용하면 이미지를 클릭하면 해당 위치로 이동하는 “이미지 링크”가 됩니다.

웹사이트에는 다음과 같이 표시됩니다.

더보기

<!DOCTYPE html>
<html lang="en">
<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>
    <a href="https://www.google.com/" target="_blank"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></a>
</body>
</html>


Google 이미지를 클릭하십시오


Google 페이지를 방문하십시오.

4. 본문 배경 기능

<body background="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

-body 태그에 background 속성을 할당하면 전체 타일 이미지를 덮을 수 있습니다.

– 이미지가 배경 크기보다 작을 경우 타일로 표시됩니다.

-권장하지 않음

웹사이트에는 다음과 같이 표시됩니다.

더보기

<!DOCTYPE html>
<html lang="en">
<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 background="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
<h1>Heading</h1>    
</body>
</html>


아…조금 예민?

5.

어제 만든 bookmark.html 파일을 사이트 로고 이미지로 구현해 봅시다.

<!DOCTYPE html>
<html lang="en">
<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>
    <h1>My top 3 favorite sites.</h1>
    <a href="https://www.google.com" target="_blank"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" width="100"></a>
    <br><br>
    <a href="https://www.youtube.com" target="_blank"><img src="https://blog.kakaocdn.net/dn/c2yJ7I/btqwXeUM6jI/a3WrMGPo9vakaDzQWepkOK/img.jpg" width="100"></a>
    <br><br>
    <a href="https://www.naver.com/" target="_blank"><img src="https://mblogthumb-phinf.pstatic.net/MjAxODA0MjRfNDYg/MDAxNTI0NTQ5MDc3MDU1.iF25cKVnG3Ae8BkD20IIoB5U1vlOcN3kXWt7XjU0jR8g.1yRmaxjdNtOgATk4gnZ_cr4WnoBauqUgoE0yg0q4QWog.JPEG.beelike1115/image_5370526891524549066762.jpg?type=w800" width="100"></a>
</body>
</html>


목록을 다루겠습니다.

6. 정렬 목록

<ol>
    <li>First</li>
    <li>Second</li>
    <li>third</li>
</ol>

<ol type="A"> 
    <li>Apple</li>
    <li>Banana</li>
    <li>Camel</li>
</ol>

<ol type="a"> 
    <li>apple</li>
    <li>banana</li>
    <li>camel</li>
</ol>

<ol type="I"> 
    <li>roman_num_upper_fir</li>
    <li>roman_num_upper_sec</li>
    <li>roman_num_upper_thr</li>
</ol>

<ol type="i"> 
    <li>roman_num_lower_fir</li>
    <li>roman_num_lower_sec</li>
    <li>roman_num_lower_thr</li>
</ol>

– 그날은

    – 와 함께

  1. 태그된 항목을 순서대로 나열

    -type 속성에서 문자의 순서와 유형을 지정합니다.

    -유형: 1(기본값), A,a,I,i

    웹사이트에는 다음과 같이 표시됩니다.

    더보기

    <!DOCTYPE html>
<html lang="en">
<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>
    <ol>
        <li>First</li>
        <li>Second</li>
        <li>third</li>
    </ol>

    <ol type="A"> 
        <li>Apple</li>
        <li>Banana</li>
        <li>Camel</li>
    </ol>

    <ol type="a"> 
        <li>apple</li>
        <li>banana</li>
        <li>camel</li>
    </ol>

    <ol type="I"> 
        <li>roman_num_upper_fir</li>
        <li>roman_num_upper_sec</li>
        <li>roman_num_upper_thr</li>
    </ol>

    <ol type="i"> 
        <li>roman_num_lower_fir</li>
        <li>roman_num_lower_sec</li>
        <li>roman_num_lower_thr</li>
    </ol>

</body>
</html>


    7. 정렬되지 않은 목록

    <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
</ul>

<ul style="list-style-type: circle">
    <li>cir_First</li>
    <li>cir_Second</li>
    <li>cir_Third</li>
</ul>

<ul style="list-style-type: square">
    <li>sq_First</li>
    <li>sq_Second</li>
    <li>sq_Third</li>
</ul>

<ul style="list-style-type: none">
    <li>nn_First</li>
    <li>nn_Second</li>
    <li>nn_Third</li>
</ul>

    – 그날은

      – 와 함께

    • 표시된 목록 항목은 글머리 기호로 표시됩니다.

      – 스타일 속성글머리 기호 유형을 list-style-type 값으로 설정

      *** 스타일 속성은 정렬되지 않은 목록뿐만 아니라 다른 태그에서도 사용할 수 있는 속성입니다.

      목록 스타일 유형: 디스크(기본값), 원형, 사각형, 없음

      웹사이트에는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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>
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>

    <ul style="list-style-type: circle">
        <li>cir_First</li>
        <li>cir_Second</li>
        <li>cir_Third</li>
    </ul>

    <ul style="list-style-type: square">
        <li>sq_First</li>
        <li>sq_Second</li>
        <li>sq_Third</li>
    </ul>

    <ul style="list-style-type: none">
        <li>nn_First</li>
        <li>nn_Second</li>
        <li>nn_Third</li>
    </ul>
    
</body>
</html>


      – ul은 주로 메뉴를 만들 때 사용합니다.

      테이블에 대해 알아봅시다.

      테이블은 테이블입니다.

      8. 테이블 테이블

      <table>
        <tr>
            <td>cell_11</td>
            <td>cell_12</td>
        </tr>
        <tr>
            <td>cell_21</td>
            <td>cell_22</td>
        </tr>
    </table>

      – 표 형식으로 콘텐츠 보기

      -행은 다음과 같습니다.

      정의되고 각 셀(데이터)은 다음과 같이 정의됩니다.

      정의됩니다.

      tr에 두 개의 td가 있으면 coulmn이 2라고 생각할 수 있습니다.

      -tr은 테이블 행을 나타냅니다.

      td는 테이블 데이터를 나타냅니다.

      웹 사이트는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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>
    <table>
        <tr>
            <td>cell_11</td>
            <td>cell_12</td>
        </tr>

        <tr>
            <td>cell_21</td>
            <td>cell_22</td>
        </tr>
    </table>
</body>
</html>


      9. 테이블 헤더

      <table>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
    </tr>

    <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

      – 첫 번째 줄에는 기사의 이름(제목)이 포함됩니다.

      – 각 열의 제목을 표시하는 경우 해당 항목을 사용

      -낮.

      웹사이트에는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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>
    <table>
        <tr>
            <th>Header1</th>
            <th>Header2</th>
        </tr>

        <tr>
            <td>data1</td>
            <td>data2</td>
        </tr>
    </table>
    
</body>
</html>


      10. colspan: 열 셀 조인

      <table border="1">
    <tr>
        <th colspan="2">Header</th>
    </tr>

    <tr>
        <td>data1</td>
        <td>data2</td>
    </tr>
</table>

      테이블을 사용할 때 셀 병합과 같은 기능은 워드 프로그램에서 수행해야 할 수 있습니다.

      -colspan은 여러 열에 걸쳐 있는 셀을 표시합니다.

      – 전체 테이블의 열 수를 잘 계산합니다.

      **테이블 국경 소유권정의된 경우 프레임이 표시됩니다.

      colspan=”2″는 두 열을 통과했음을 의미합니다.

      컴퓨터는 모든 열과 모든 행(각각 최대값 포함)을 미리 저장합니다.

      웹사이트에서는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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>
    <table border="1">
        <tr>
            <th colspan="2">Header</th>
        </tr>

        <tr>
            <td>data1</td>
            <td>data2</td>
        </tr>
    </table>
    
</body>
</html>


      11. rowspan: 행 셀 병합

      <table border="1">
    <tr>
        <td rowspan="2">data11<br>+<br>data21</td>
        <td>data12</td>
    </tr>
    <tr>
        <td>data22</td>
    </tr>
    <tr>
        <td>data31</td>
        <td>data32</td>
    </tr>
</table>

      colspan이 있으면 당연히 rowspan도 있습니다.

      -여러 행에 걸쳐 있는 단일 셀 표시

      전체 테이블의 행 수를 잘 계산해야 합니다.

      웹사이트에는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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>
    <table border="1">
        <tr>
            <td rowspan="2">data11<br>+<br>data21</td>
            <td>data12</td>
        </tr>
        <tr>
            <td>data22</td>
        </tr>
        <tr>
            <td>data31</td>
            <td>data32</td>
        </tr>
    </table>
    
</body>
</html>


      이러한 셀을 병합해야 하는 경우 미리 생각하고 HTML 코드를 작성해야 합니다.

      12.

      표 형태로 책갈피를 만들었습니다.

      나는 선생님이 하라는 대로 했다.


      <!DOCTYPE html>
<html lang="en">
<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>
    <table>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>URL</th>
        </tr>

        <tr><td colspan="3"><i>Note. This is my personal opinion</i></td></tr>

        <tr>
            <td>1</td>
            <td>Google</td>
            <td><a href="https://www.google.com/">https://www.google.com</a></td>
        </tr>

        <tr>
            <td rowspan="2">2</td>
            <td>Youtube</td>
            <td><a href="https://www.youtube.com/">https://www.youtube.com</a></td>
        </tr>

        <tr>
            <td>Facebook</td>
            <td><a href="https://ko-kr.facebook.com/">https://ko-kr.facebook.com</a></td>
        </tr>

        <tr>
            <td>4</td>
            <td>Instagram</td>
            <td><a href="https://www.instagram.com/">https://www.instagram.com</a></td>
        </tr>

        <tr>
            <td>5</td>
            <td>Amazon</td>
            <td><a href="https://www.amazon.com/">https://www.amazon.com</a></td>
        </tr>
    </table>
</body>
</html>

      사용자 입력 폼에 대해 알아봅시다.

      13. 사용자 입력 양식의 유형


      14. 양식 작성, 제출 버튼.

      <form action="abc.html"><input type="submit" value="OK"></form>

      -사용자 입력을 허용하는 양식 표시

      – Submit 버튼을 누르면 모든 값을 가지고 action 속성에 지정된 페이지로 이동한다.

      -value 속성에 버튼에 표시할 텍스트를 넣을 수 있습니다.

      –

      전체 입력을 둘러싸는 태그입니다.

      – action 속성은 이 콘텐츠로 무엇을 할지 작성해야 합니다.

      – 내용이 많은데 마지막 버튼에 input type=”submit” 속성을 주면 그 버튼을 눌렀을 때 전체 값을 갖게 된다.

      웹사이트에는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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="abc.html"><input type="submit" value="OK"></form>
</body>
</html>


      하지만 이 버튼을 클릭하면 abc.html이라는 파일이 현재 디렉토리에 없기 때문에


      파일에 접근할 수 없다고 합니다.

      15. 텍스트 상자 텍스트 상자

      <form action = "abc.html">
<input type="text" name="FirstName">
<p>
<input type="submit" value="OK">
</p>
</form>

      – 양식의 요소는 이름 속성으로 식별됩니다.

      – 텍스트 필드 유형은 “텍스트”입니다.

      웹 사이트는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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 = "abc.html">
    <input type="text" name="FirstName">
    <p>
    <input type="submit" value="OK">
    </p>
    </form>
</body>
</html>

      나는 태그를 가지고

      텍스트 상자 뒤에 두 번 줄을 끊고 확인 버튼을 표시하는 데 사용됩니다.


      이 사각형은 비어 있고 긴 사각형은 텍스트 상자입니다.

      16. 텍스트 상자 속성

      텍스트 필드는 매우 유용하므로 해당 속성을 아는 것이 좋습니다.

      다양한 속성을 통해 세밀한 제어가 가능합니다.

      <!DOCTYPE html>
<html lang="en">
<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= "abc.html">
        1:<input type="text" value="John"><br>
        2:<input type="text" maxlength="5"><br>
        3:<input type="text" size="5"><br>
        4:<input type="text" readonly><br>
        5:<input type="text" disabled><br>
        6:<input type="text" placeholder="Input your name"><br>
    </form>
</body>
</html>


      (1) 값 속성: 미리 설정된 기본값

      (2) maxlength 속성: 입력할 수 있는 문자 수를 제한합니다.

      예) 로그인 시 아이디 또는 비밀번호, 전화번호

      (3) 크기 속성: 표시되는 문자 수의 길이입니다. 크기 속성이 5라고 해서 5자만 입력할 수 있는 것은 아닙니다.

      (4) 읽기 전용 속성: 표시된 값을 변경할 수 없음(사용할 수 없는 것 같지 않음)

      (5) 비활성화 속성: 표시된 값을 변경할 수 없습니다(사용할 수 없는 것으로 나타남).

      (6) 자리 표시자 속성: 힌트처럼 느껴집니다. 텍스트 상자를 실제로 클릭하면 이름 입력 텍스트가 사라집니다.

      ***이내에 입력해야 합니다.

      사용!!!*****

      17. 라벨 라벨

      <form action="abc.html">
    <label for="FirstName">FirstName:</label>
    <input type="text" name="FirstName"><br>

    <label for="LastName">LastName:</label>
    <input type="text" name="LastName"><br>
</form>

      화면을 표시하는 것 외에도 해당 텍스트 필드에 포커스를 놓으면 화면 판독기가 레이블의 내용을 읽습니다.

      => 웹 접근성

      레이블이 약간 가변적이기를 원합니까? 어떻게 생각해야 할지 정했어

      레이블에서 정의되고 이름에서 환영받는다고 느끼십니까?

      가능하면 각 출입구에 라벨을 붙이십시오.

      웹사이트에는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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="abc.html">
        <label for="FirstName">FirstName:</label>
        <input type="text" name="FirstName"><br>

        <label for="LastName">LastName:</label>
        <input type="text" name="LastName"><br>
    </form>
</body>
</html>


      18. 비밀번호 비밀번호

      <form action="abc.html">
    <label for = "pwd">Password:</label>
    <input type="password" name="pwd" maxlength="12" size="12">
</form>

      비밀번호는 일반 텍스트 필드와 같은 모든 항목을 포함하지만 내용을 볼 수 없고 복사할 수 없다는 점만 다릅니다.

      웹사이트에는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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="abc.html">
        <label for = "pwd">Password:</label>
        <input type="password" name="pwd" maxlength="12" size="12">
        <p>
            <input type="submit" value="OK">
        </p>
    </form>
</body>
</html>


      19. 스프레드시트를 이용한 간단한 회원가입 양식 만들기 (1)

      정렬에는 테이블을 사용해야 합니다.


      <!DOCTYPE html>
<html lang="en">
<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="abc.html">
        <table>
            <tr>
                <th colspan="2">Please input your information</th>
            </tr>

            <tr>
                <td>First Name</td>
                <label for="FirstName"></label>
                <td><input type="text" name="FirstName"></td>
            </tr>

            <tr>
                <td>Last Name</td>
                <label for="LastName"></label>
                <td><input type="text" name="LastName"></td>
            </tr>

            <tr>
                <td>Email</td>
                <label for="Email"></label>
                <td><input type="text" name="Email" size="30"></td>
            </tr>
            
            <tr>
                <td>Password</td>
                <label for="Password"></label>
                <td><input type="password" name="Password" size="15"></td>
            </tr>

            <tr>
                <td>Password Confirm</td>
                <label for="PasswordConfirm"></label>
                <td><input type="password" name="PasswordConfirm" size="15"></td>
            </tr>
        </table>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

      20. 라디오 버튼

      <label for="gender"></label>
<td><input type="radio" name="gender" value="M"></td>
<td><input type="radio" name="gender" value="F"></td>

      – 같은 이름의 항목을 그룹화합니다.

      – 라디오 버튼의 목적은 여러 개(그룹) 중 하나를 선택하는 것입니다. 따라서 이름이 같은 항목을 함께 그룹화합니다.

      – 대신 값 속성을 다르게 설정하십시오.

      웹사이트에서는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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="abc.html">
        <table>
            <tr>
                <td>&nbspM</td>
                <td>&nbspF</td>
            </tr>

            <tr>
            <label for="gender"></label>
            <td><input type="radio" name="gender" value="M"></td>
            <td><input type="radio" name="gender" value="F"></td>
            </tr>

        </table>
    </form>
</body>
</html>


      21. 라디오 버튼 다루기

      <label for = "gender"></label>
<input type="radio" id="male" name="gender" value="M" checked>
<label for = "male">Male</label>

<input type="radio" id="female" name="gender" value="F" >
<label for = "female">Female</label>

      -이름은 다 똑같음 아이디 속성로 라벨을 만듭니다.

      *id는 일반적으로 모든 요소에 할당될 수 있습니다.

      –체크 속성기본적으로 선택됩니다.

      웹사이트에는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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="abc.html">
        <label for = "gender"></label>
        <input type="radio" id="male" name="gender" value="M" checked>
        <label for = "male">Male</label>

        <input type="radio" id="female" name="gender" value="F" >
        <label for = "female">Female</label>
    </form>
</body>
</html>


      22. 체크박스

      <input type="checkbox" name="apple" value="apple" checked>
<label for="apple">Apple</label>

<input type="checkbox" name="orange" value="orange" >
<label for="orange">Orange</label>

<input type="checkbox" name="kiwi" value="kiwi" >
<label for="kiwi">Kiwi</label>

      -개별 항목을 선택하는 데 사용

      – 복수 선택 가능

      – 모든 이름 속성은 다를 수 있습니다.

      웹사이트에는 다음과 같이 표시됩니다.

      더보기

      <!DOCTYPE html>
<html lang="en">
<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="abc.html">
        <input type="checkbox" name="apple" value="apple" checked>
        <label for="apple">Apple</label>

        <input type="checkbox" name="orange" value="orange" >
        <label for="orange">Orange</label>

        <input type="checkbox" name="kiwi" value="kiwi" >
        <label for="kiwi">Kiwi</label>

    </form>
</body>
</html>


      23. 드롭다운 목록

      <label for="gender">Gender:</label>
<select name="gender">
    <option value="M">Male</option>
    <option value="F" selected>Female</option>
</select>

      – 라디오와 유사하지만 다음과 같이 구현됨