줄바꿈 - br
p 태그는 줄바꿈의 간격이 고정되어 있기 때문에 <br>태그를 이용하면 자유롭게 줄바꿈을 이용할 수 있다. <br>태그는 내용이 없는 태그이기 때문에 열리는 태그 하나만 있으면 된다. <br>태그의 개수에 따라 줄바꿈 횟수도 결정되어 간격도 더 커진다.
<html>
<body>
hello<br>
world<br><br><br>
br 태그
</body>
</html>
이미지 - img
웹 페이지에 이미지를 넣을 때는 img 태그를 사용한다. imf태그도 닫는 태그 필요 없이, 여는 태그만 있으면 된다.
src 속성으로 이미지 이름을 지정하고, width 속성과 height 속성으로 이미지 크기를 지정한다. 이미지는 원래 크기가 정해져 있기 때문에 width와 height 속성을 모두 사용하면 왜곡되는 현상이 발생할 수 있다. 이 둘중 하나의 속성만 사용하면 그 크기와 맞게 원본 이미지의 비율로 크기를 수정할 수있다.
alt 속성을 사용하면 이미지 손상 등의 이유로 웹 페이지에서 보여줄 수 없을 때 이미지가 깨진 아이콘과 원래 이미지에 대한 설명을 보여줄 수 있다.
title 속성을 사용하면 이미지에 마우스 커서를 대면 title 속성값을 보여준다.
<html>
<body>
<img src="mountain.jpg" height="300" alt="mountain img" title="산이미지">
</body>
</html>
이미지 파일을 불러올 수 없는 경우
표 - table
| 이름 | 성별 | 주소 |
| phulasso | 남 | seoul |
위와 같은 표도 웹 페이지에 삽입할 수 있다.
각 칸에 들어가는 내용들은 <td>태그 안에 넣는다. td는 table data라는 의미이다.
각 열은 <tr>태그로 구분한다. tr은 table row라는 의미이다. td태그들은 테이블의 열에 맞게 tr태그 안에 들어간다.
td를 포함한 tr 태그는 <table> 태그 안에 들어간다. table 태그의 border 속성을 이용하여 표의 구분 선도 만들 수 있다. border속성의 값이 커질 수록 선의 굵기가 굵어진다.
<html>
<body>
<table border="1">
<tr>
<td>이름</td> <td>성별</td> <td>주소</td>
</tr>
<tr>
<td>lee</td> <td>남</td> <td>서울</td>
</tr>
<tr>
<td>kim</td> <td>여</td> <td>청주</td>
</tr>
</table>
</body>
</html>
과거에는 웹 페이지의 레이아웃을 잡을 때 테이블 태그를 이용하여 표로 구성하기도 했다.
위의 표를 보면 이름, 성별, 주소가 있는 열은 표의 제목에 해당하는 부분이다. 이 열은 tr 태그 밖에 <thead> 태그로 감싸준다. thead태그 안에 있는 각 칸의 데이터들은 <th>태그를 이용하면 글씨를 볼드체로 굵게 만들 수 있다.
그 밑의 두 줄은 표 내용의 본문에 해당한다. 이 열들은 tr 태그 밖에 <tbody> 태그로 감싸준다.
테이블의 가장 밑 줄은 <tfoot>태그로 감싸주면 된다. thead, tbody, tfoot태그는 표의 모양을 직접적으로 변화시키지 않지만 태그만 보고 표의 구조를 파악하는데 도움을 주며 표를 더 체계적으로 만드는데 도움을 주므로 꼭 사용하는 것이 좋다.
thead 태그와 tfoot 태그는 테이블의 중간에 들어가도 웹 페이지에 나오는 표를 보면 항상 표의 맨 위와 맨 아래에 위치하는 자리를 결정하는 역할도 한다.
<html>
<body>
<table border="1">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>lee</td> <td>남</td> <td>서울</td> <td>1000</td>
</tr>
<tr>
<td>kim</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>
표의 각 칸을 병합하고 싶을 때는 td태그의 속성을 사용하면 된다. rowspan 속성은 속성 값만큼 수직으로 병합하며 병합되는 칸에 해당하는 td태그는 지워줘야 한다. colspan 속성은 속성 값 만큼 수평으로 병합되며 병합되는 칸에 해당하는 td태그는 지워줘야 한다.
<html>
<body>
<table border="1">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>lee</td> <td>남</td> <td rowspan="2">서울</td> <td>1000</td>
</tr>
<tr>
<td>kim</td> <td>여</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">합계</td> <td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>
입력양식 - form
로그인, 회원가입, 글작성 등을 할 때 서버로 정보를 전송하기 위해 사용하는 글자를 입력하는 곳, 선택하는 곳 등을 form(폼) 이라 한다.
<input>태그를 이용하면 웹 페이지 이용자가 작성할 수 있는 텍스트 상자를 만들 수 있다. input 태그의 type의 속성을 "text"로 지정해 주면 된다.
type 속성을 "password"로 지정해주면 로그인할 때 비밀번호를 작성하는 곳처럼 내용이 보이지 않는 텍스트 상자를 만들 수 있다.
type 속성을 "submit"으로 지정하면 제출 버튼을 만들 수 있다.
이러한 input태그들은 <form> 태그 안에 넣어야 한다. input 태그에 작성한 내용들은 form 태그의 action속성 안에 지정한 서버로 전송한다.
같은 type 속성이 여러 개 있는 경우 서버에서는 각 태그를 구분할 수 없기 때문에 name 속성을 이용하여 구분해준다.
<html>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호: <input type="password" name="pw"></p>
<p>주소 : <input type="text" name="addr"></p>
<input type="submit">
</form>
</body>
</html>
'Project H4C Study Group' 카테고리의 다른 글
| [Project H4C] opentutorials HTML(4) (0) | 2021.02.11 |
|---|---|
| [Project H4C] opentutorials HTML(3) (0) | 2021.02.09 |
| [Project H4C] opentutorials HTML(1) (0) | 2021.02.04 |
| [Project H4C] 코드업 기초100제(4) (0) | 2021.02.04 |
| [Project H4C] 코드업 기초 100제(3) (0) | 2021.02.04 |