HTML 기초 내용 정리

« 2025/02 »
일	월	화	수	목	금	토
						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

Archives

Recent Posts

02-27 09:10

Today

Total

Link

Recent Comments

관리 메뉴

연의 기록 🪁

HTML 기초 내용 정리 - 4 본문

WEB/HTML+CSS+JS

HTML 기초 내용 정리 - 4

kite707 2020. 12. 6. 15:03

마지막! 이제 HTML의 표, form 부분을 정리할 것이다.

HTML - 표

https://opentutorials.org/course/2039/10949

표 - table - 생활코딩

표 - table 2015-12-06 10:34:20 예제 이름 성별 주소 최진혁 남 청주 최유빈 여 청주 예제 이름 성별 주소 회비 최진혁 남 청주 1000 최유빈 여 청주 500 합계 1500 예제 이름 성별 주소 회비 최진혁 남 청주

opentutorials.org

우선 예제 1을 분석해보자.

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <tr>
        <td>이름</td>     <td>성별</td>   <td>주소</td>
    </tr>
    <tr>
        <td>최진혁</td>  <td>남</td>      <td >청주</td>
    </tr>
    <tr>
        <td>최유빈</td>  <td>여</td>      <td>청주</td>
    </tr>
</table>
</body>
</html>

표를 만드려면 우선 전체를 <table></table>태그로 감싸 주어야 한다. 그리고 같은 행의 데이터들은 <tr></tr>태그로 감싸주어야 한다.(여기서 r은 row를 의미한다.) 그리고 각 데이터들은 <td></td>로 감싸준다.

border은 표의 테두리를 의미하는데 숫자가 클수록 굵기가 굵어진다.

여기서 이름 성별 주소 와 밑 내용은 성격이 다르다. 이것을 태그로 표현해주는 방법이 있는데 thead, tbody태그이다. 간단하게 같은 내용끼리 묶어주면 된다!

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>최진혁</td>  <td>남</td>      <td >청주</td> <td>1000</td>
        </tr>
        <tr>
            <td>최유빈</td>  <td>여</td>      <td>청주</td> <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>합계</td>  <td></td>      <td></td> <td>1500</td>
        </tr>
    </tfoot>
</table>
</body>
</html>

head와 foot등은 순서를 바꿔도 표의 순서가 바뀌지 않는다. 위 내용을 적용한 웹페이지의 모습은 아래와 같아진다.

아래는 세번째 예제의 코드인데 직관적으로 행과 행을 합친다. 열과 열을 합친다는 개념으로 이해하면 된다.

<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
    <thead>
        <tr>
            <th>이름</th>     <th>성별</th>   <th>주소</th> <th>회비</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>최진혁</td>  <td>남</td>      <td rowspan="2">청주</td> <td>1000</td>
        </tr>
        <tr>
            <td>최유빈</td>  <td>여</td>      <td>500</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">합계</td>      <td>1500</td>
        </tr>
    </tfoot>
 
</table>
</body>
</html>

즉

아래와 같이 되니까 행과 행을 합치면 세로병합, 열과 열을 합치면 가로 병합이 되는 것이다.

HTML - form

opentutorials.org/course/2039/10944

입력양식 - form - 생활코딩

입력양식 - form 2015-12-06 10:16:50 예제 아이디 : 비밀번호 : 주소 : 등장시기 html2

opentutorials.org

완성된 웹페이지의 모습은 아래와 같다.

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
    <p>아이디 : <input type="text" name="id"></p>
    <p>비밀번호 : <input type="password" name="pwd"></p>
    <p>주소 : <input type="text" name="address"></p>
    <input type="submit">
</form>
</body>
</html>

예제의 코드는 위와 같다. 여기서 input type를 text로 하면 아래와 같이 입력한 값이 보이고, password로 하면 비밀번호 부분과 같이 입력한 내용을 확인할 수 없게 된다. 그리고 제출버튼은 <input type="submit">이렇게 만들 수 있다.

이렇게 입력하고 제출을 누르면?

이렇게 링크에 내가 입력한 것이 잘 전달된 것을 확인할 수 있다.

'WEB > HTML+CSS+JS' 카테고리의 다른 글

CSS 내용정리 - 2 (0)	2020.12.29
CSS 내용정리 - 1 (0)	2020.12.22
HTML 기초 내용 정리 - 3 (0)	2020.12.06
HTML 기초 내용 정리 -2 (0)	2020.12.04
HTML 기초 내용 정리 - 1 (0)	2020.12.02

'WEB/HTML+CSS+JS' Related Articles