본문 바로가기
Front-End/HTML_CSS

[HTML/CSS]220314 학습일기

승니 2023. 3. 15. 02:06

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

유데미 <너무 쉬운 HTML/CSS 입문> 에서 학습한 내용을 정리하였다. 

이미지를 다뤄보자.

1.

이미지 주소를 복사해 HTML에 가지고 오면 내 서버가 아니라 다른 서버에서 이미지를 가져올 수 있다.

 

 

2. 이미지 Image

<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">

-태그는 <img>

-src 속성에 이미지 파일의 URL을 지정, 종료태그 없음. 여기서 src는 source의 약자

-width = "xx", height="xx"로 크기를 픽셀(pixel) 단위로 지정 가능

-width, height를 지정해주지 않으면 원본 크기로

-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>

<img> 태그를 감싸는 <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 그림을 누르면

구글 페이지로 이동한다.

 

 

4. body background 속성

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

-body 태그에 background 속성을 주면 타일 이미지로 전체를 덮을 수 있다.

-그림이 배경 크기보다 작으면 타일 형태로 붙여서 표시됨.

-not recommended

 

웹페이지에는 다음과 같이 표시된다.

더보기 
<!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. 순서 리스트 Ordered List

<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>

- 태그는 <ol>

-<li>로 지정된 아이템(list item)들에 순서를 매겨 표시

-type 속성에 순서, 문자의 종류 설정

-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. 비순서 리스트 Unordered List

<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>

- 태그는 <ul>

- <li>로 지정된 아이템(list item)들에 글머리 기호를 매겨 표시

- style 속성에 list-style-type 값으로 글머리 기호의 종류 설정

 

*** style 속성은 unordered list만 해당되는 것이 아니라 다른 태그들에서도 사용할 수 있는 속성

 

list-style-type: disc(기본), circle, square, none

 

웹페이지에서는 다음과 같이 표시된다.

더보기 
<!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은 메뉴를 만들 때 주로 사용됨.

 

table에 대해 알아보자.

 

table은 표.

 

 

8. 테이블 table

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

-표 형태로 내용을 표시

-Row는 <tr>, 각 셀(데이터)은 <td>로 정의.

하나의 tr에 td가 2개이면 coulmn이 2라고 생각하면 된다.

-tr은 table row의 약자

td는 table data의 약자

 

웹 페이지에는 다음과 같이 표시된다.

더보기 
<!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 header

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

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

- 제일 첫번째 row에는 주로 항목들의 이름(제목)이 들어감.

- 각 컬럼의 제목을 표시할 때에는 <th> 태그를 이용.

 

웹페이지에서는 다음과 같이 표시된다.

더보기 
<!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 : column 셀 병합

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

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

테이블을 사용하다보면 word 프로그램에서의 셀 병합과 같은 기능을 하는 것이 필요할 때가 있다.

 

-colspan은 하나의 셀을 여러 column에 거쳐서(span) 표시.

-테이블 전체의 컬럼 수를 잘 계산해야 함.

 

**table에 border 속성을 정의해주면 테두리가 보여진다.

 

colspan="2"는 두개의 column을 거쳤다는 의미.

 

컴퓨터는 전체 column과 전체 row를 미리 저장해두고 있는다.(각각 최대값으로)

 

웹페이지에는 다음과 같이 표현된다.

더보기 
<!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: row 셀 병합

<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도 당연히 있다.

-하나의 셀을 여러 row에 걸쳐서(span) 표시

테이블 전체의 row 수를 잘 계산해야 한다.

 

웹페이지에는 다음과 같이 표시된다.

더보기 
<!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.

bookmark를 표 형태로 만들어보았다.

강사님께서 만들어보라고 하신 형태대로 만들었다.

<!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>

사용자 입력 Form에 대해 알아보자.

 

13. 사용자 입력 폼의 종류

 

14. 폼 Form, Submit 버튼

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

-사용자의 입력을 받는 폼 표시

-Submit 단추를 누르면 모든 값을 가지고 action 속성에 지정된 페이지로 이동.

-value 속성에는 button에 표시될 글자를 넣어주면 됨.

-<form>은 전체 입력받는 내용들을 감싸고 있는 태그

-이 내용을 가지고 어디로 갈 것인지를 적어주는 것이 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. 텍스트 박스 Textbox

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

-폼 내의 항목들은 name 속성으로 구분됨.

- textbox의 type은 "text"

 

웹 페이지에는 다음과 같이 표시된다.

더보기 
<!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>

<p> 태그를 이용해서 텍스트박스 이후에 줄바꿈을 두번하고 OK 버튼이 나오도록 했다.

저 네모가 빈, 긴 네모가 텍스트박스다.

 

 

16. 텍스트 박스(Textbox)의 속성

텍스트 박스는 매우 잘 쓰이기 때문에 속성을 알아놓는 것이 좋음.

다양한 속성을 이용하여 세부적으로 제어가 가능하다.

<!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) value 속성: 기본적으로 미리 입력되어 있는 값

(2) maxlength 속성: 입력할 수 있는 글자수를 제한.

ex) 로그인 시에 아이디나 비밀번호, 전화번호

(3) size 속성: 표시되는 글자 수의 길이. size속성이 5라고 해서 5글자만 입력할 수 있는 것은 아님.

(4) readonly 속성: 표시된 값을 바꿀 수 없음.(사용할 수 없는 것처럼은 안 보임)

(5) disabled 속성: 표시된 값을 바꿀 수 없음.(사용할 수 없는 것으로 보임)

(6) placeholder 속성: 힌트같은 느낌. 실제로 텍스트박스를 누르면 Input your name 글자는 사라짐.

 

***반드시 <form></form> 안에 input 사용하기!!!******

 

 

17. 라벨 Label

<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>

<label for = "name속성값">라벨내용</label>

 

화면 표시 이외에도 해당 텍스트 박스에 포커스가 위치하면 스크린 리더 프로그램에서 그 라벨 내용을 읽어줌.

=> 웹 접근성

 

난 라벨을 약간 변수? 처럼 생각하기로 했다.

label for에서 정의해주고 name에서 받는 느낌?

 

왠만하면 모든 input에 대해서는 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">
        <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. 비밀번호 Password

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

<input type="Password"

 

password는 일반 textbox와 모든 것이 다 같지만 내용을 볼 수 없고 복사가 안된다는 점에서만 다르다.

 

웹페이지에는 다음과 같이 표시된다.

더보기 
<!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. 표(table)을 이용하여 간단한 회원 가입 폼 만들기(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. 라디오 버튼 Radio Button

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

<input type="radio name="" value="">

 

-같은 name을 가진 것들끼리 묶임.

-라디오버튼의 용도는 여러개(하나의 그룹) 중에서 하나를 고르는 것. 그래서 같은 name을 가진 것들끼리 묶는 것.

-대신 value 속성을 다르게 지정.

 

웹페이지에는 다음과 같이 표현된다.

더보기 
<!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. 라디오버튼 Radio Button 다루기

<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>

-name이 모두 같으므로 id 속성으로 label 생성.

*id는 일반적으로 모든 element에 대해서 부여할 수 있음.

-checked 속성을 주면 기본적으로 선택됨.

 

웹페이지에는 다음과 같이 표시됨.

더보기 
<!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. 체크박스 Checkbox

<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>

-개별적인 항목을 선택하게 할 때 사용

-다중 선택 가능

- name 속성을 다 다르게 할 수 있음.

 

웹페이지에는 다음과 같이 표시된다.

더보기 
<!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. 드롭다운 리스트 Drop-down

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

- Radio와 유사하나 <select>, <option> 으로 구현

- selected 속성을 주면 기본적으로 선택됨.

- 우리가 어떤 항목을 고르면 그 항목의 value값을 들고 가게 됨.

 

웹페이지에는 다음과 같이 표시된다.

더보기 
<!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">Gender:</label>
        <select name="gender">
            <option value="M">Male</option>
            <option value="F" selected>Female</option>
        </select>
    </form>
</body>
</html>

기본적으로 Female이 선택되어있고 드롭다운을 내리면

 

Male도 보인다.

 

 

24. 드롭다운 리스트(Drop-down) 속성

<label for = "fruits">Fruits:</label>
<select name="fruits" size = "3" multiple>
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="kiwi">Kiwi</option>
</select>

- size ="x" 속성에서는 한번에 보여지는 수를 조절

- multiple 속성을 주면 동시에 여러 개 선택 가능(default drop down는 하나밖에 선택이 안됨.)

ctrl을 누르면 여러개 선택 가능하게 됨.

근데 요즘에는 잘 안 씀.

 

웹페이지에는 다음과 같이 표시된다.

더보기 
<!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 = "fruits">Fruits:</label>
        <select name="fruits" size = "3" multiple>
            <option value="apple">Apple</option>
            <option value="orange">Orange</option>
            <option value="kiwi">Kiwi</option>
        </select>
    </form>
</body>
</html>

 

 

25. 표(table)를 이용하여 간단한 회원 가입 폼 만들기(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>
    <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>

            <tr>
                <td>Region</td>
                <label for = "Region"></label>
                <td>
                    <select name="Region" size="3">
                        <option value="APAC">APAC</option>
                        <option value="America">America</option>
                        <option value="EMEA">EMEA</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>Membership</td>
                <label for = "Membership"></label>
                <td>
                    <input type="radio" name="Membership" value="free" id="Free" checked>
                    <label for = "Free">Free</label>
                    <input type="radio" name="Membership" value="basic" id="Basic">
                    <label for = "Basic">Basic</label>
                    <input type="radio" name="Membership" value="premium" id="Premium">
                    <label for = "Premium">Premium</label>
                </td>
            </tr>

            <tr>
                <td>Email Newsletter</td>
                <td>
                    <input type="checkbox" name="EmailNews">
                    <label for = "EmailNews">Yes I will receive email newsletter</label>
                </td>
            </tr>
        </table>
        <input type="submit" value="Submit">
    </form>
</body>
</html>
저작자표시

'Front-End > HTML_CSS' 카테고리의 다른 글

[HTML/CSS] 220318 학습일기  (0) 2023.03.19
[HTML/CSS] 220317 학습일기  (0) 2023.03.18
[HTML/CSS] 230316 학습일기  (0) 2023.03.17
[HTML/CSS] 220313 학습일기  (0) 2023.03.14
[HTML/CSS] 230312 학습일기  (2) 2023.03.13

'Front-End/HTML_CSS' Related Articles

티스토리툴바