단락을 구분하는 태그로, '단락'은 줄바꿈과 윗단락과의 여백을 통해서 표현된다.
이때 기본 여백공간이 주어지는데 그 공간을 더 주고싶다면 방법은 크게 2가지가 있다.
강제로 줄을 생성하는 태그로, 줄과 줄 사이, 단락과 단락 사이에 여백을 더 주고 싶을 때 사용한다.
br 태그는 void element 태그로 내용이 없는 태그이다 따라서,
텍스트나, </다른 태그의 닫힘태그>의 맨 뒤에 < br > 열림태그로 사용한다(닫힘태그x)
웹페이지에 img를 포함해주는 태그로 따로 열림태그로만 사용한다.(닫힘태그 x)
< img src="내가 카피한 파일 저장 이름.jpg" width="n숫자" height="n숫자" alt="강아지사진" title="춘식이">
웹페이지에 표(table)를 삽입해주는 태그.
안에 들어갈 내용을 적어보면
이름 성별 주소 최진혁 남 청주 ... 이렇게 되는데, 이때 웹페이지는 분별없이 내려주기만 한다 이때,
border 속성을 통해 만든 테두리가 상당히 촌스러움. 그래서 알다시피 다들 CSS 부트스트랩을 사용한다.
기억하자
이름 | 성별 | 주소 |
영희 | 여 | 군포 |
철수 | 남 | 양재 |
<thead> table의 head부분
<tr>
<td>이름</td>
<td>성별</td>
<td>주소</td>
</tr>
</thead>
<tbody> table의 body부분
<tr>
<td>영희</td>
<td>여</td>
<td>군포</td>
</tr>
<tr>
<td>철수</td>
<td>남</td>
<td>강남</td>
</tr>
</tbody>
<tr>
<th>이름</th>
<th>성별</th>
<th>주소</th>
</tr>
이름 | 성별 | 주소 |
---|---|---|
영희 | 여 | 군포 |
철수 | 남 | 강남 |
<tfoot>
<tr>
<td>합계</td><td></td><td></td><th>1600</th>
</tr>
</tfoot>
<thead>
<tr>
<th>이름</th><th>성별</th><th>주소</th><th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>영희</td><td>여</td><td>군포</td><th>1000</th>
</tr>
<tr>
<td>철수</td><td>남</td><td>강남</td><th>600</th>
</tr>
</tbody>
이름 | 성별 | 주소 | 회비 |
---|---|---|---|
영희 | 여 | 군포 | 1000 |
철수 | 남 | 강남 | 600 |
합계 | 1600 |
<td rowspan="2"> 2개의 셀(?)이 병합된다.
그리고 병합이 대상이 되는 철수의 <td>군포</td> 는 삭제해준다.
이름 | 성별 | 주소 | 회비 |
---|---|---|---|
영희 | 여 | 군포 | 1000 |
철수 | 남 | 600 | |
합계 | 1600 |
이름 | 성별 | 주소 | 회비 |
---|---|---|---|
영희 | 여 | 군포 | 1000 |
철수 | 여 | 600 | |
합계 | 1600 |
로그인을 하거나 물건을 사거나 글을 작성할 때 내가 입력한 정보를 서버로 전송할 때 사용하는 글자를 입력하는 것들/무언가를 선택하는 것들을 말한다. 사용자가 입력한 정보를 서버로 전송할 때 사용하는 그러한 것들을 form이라 한다
아래에 보이는게 form
<input type="text"> 라고하면 위에처럼 사용자로부터 문자 정보를 input할 수 있는 박스가 생긴다.
아이디와 패스워드를 만든다고 가정해보자.
아이디:
비밀번호:
<p>아이디:<input type="text"></p>
<p>비밀번호:<input type="text"></p>
비밀번호:
<p>아이디:<input type="text"></p>
<p>비밀번호:<input type="password"></p>
그렇다면, 우리가 입력한 정보가 서비스가 가진 서버에 전송이 되어야하는데 그 전송을 할 때 사용하는 버튼이 있는데 그걸 submit 버튼이라고 한다.
해결책: type="submit" 이용
여기서 우리가 입력한 정보가 제출 버튼을 눌렀을 때, 어디에 있는 서버로 어디에 전송될 것인가란 정보가 부족하다.
해결책: form 태그를 사용해서 입력한 정보를 제출로 보내기 위해 action="" 속성을 이용한다. 여기서 ""안에는 서버쪽 개발자가 로그인정보는 http://localhost/login.php로 보내주세요! 하면, 이 주소를 저 ""안에 넣어준다.
사용자가 입력한 정보들은 다 text라, 각각의 박스에 입력한 정보가 구별되게 하기 위해 이름을 정해줘야한다
아이디:
비밀번호:
주소:
해결책: name="id", name="pwd" name="address 속성 이용내가 만약 아이디:song, 비밀번호:555 주소:seoul로 적었을 때 제출버튼을 누르면
http://localhost/login.php?id=song&pwd=5555&address=seoul 가 나온다.
input type="submit" 과 input type="button"이 다른이유는, submit은 누르면 페이지가 바뀌지만, button은 버튼이라는 UI만 만들어지는데, 이건 JS와 같이 쓸 수 있다 +onclick!
type="reset"은 입력한 정보가 모두 사라진다
나머지는 생활코딩 HTML 리스트 21 드롭다운부터 보기
meta라고 하는 것은 어떤 데이터를 설며하는 태그이다. 예를들면 html의 태그들은 그 태그가 감싸는 컨텐츠를 감싸는 면에서 그 태그들도 meta 데이터라고 할 수 있는데, 우리가 웹페이지를 만들면 그 웹페이지 전체를 설명하는 정보를 필요 할 때가 있다. 예를들면 페이지의 제목, 썸네일, 저자, 어떤 내용을 담고있는지에 대한 요약 등. 이런 내용은 글의 본문에 표현되지는 않지만 중요한 정보들이다.
(웹페이지의 내용이 아니라 웹페이지를 설명하는 태그)