Day2(211221) - HTML 기초와 표 만들기
0. HTML에서 <head>가 하는 일이 뭘까?
head안에는 화면에 표출되지 않는 내용을 보관한다. 그 문서에 대한 정보를 설정하는 영역이다.
1. 파일 작성할 때 꼭 지켜줘!
- 파일명을 만들 때 이름은 영어로, 확장자는 .html 이라고 입력한다.
('나는 누구입니다.' 하고 알려주는 것 같다, '나는 html 파일입니다.' 이렇게.)
- 특수문자와 띄어쓰기가 안되는데 예외적으로 '-'와 '_'는 입력 가능하다.
예시) hello_world.html
1.1 HTML 기본 문서 형태 빠르게 불러오기
- !를 치고 enter를 누르면 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>
</body>
</html>#짜잔
(그래도 직접 입력하는데 불편하지 않도록 연습하자.)
1.2 주석 단축키 Ctrl+/
<!-- 주석 --> 코드 작성할 때 Ctrl+/로 주석을 빠르게 추가할 수 있다.
1.3 태그명만 입력해도 꺽쇠(<>)적용이 자동으로 된다.
2. HTML로 표 만들기
2.1 테이블 엘리먼트
<table> 엘리먼트는 게시판, 회원가입 화면 만들 때 쓸모가 많다.
위의 엑셀처럼 3*4 형태의 표를 만들려면 아래와 같이 코드를 쓴다.
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>#짜잔
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
<tr>은 줄이다. 코드를 보면 하나의 <tr>안에 <td>들을 들여 써놨다. <td>는 칸을 말한다. <td>안에는 칸 안에 띄울 내용을 작성했다. 위 코드에서는 <tr>이 세 뭉텅이, 뭉텅이 안에 <td>들은 네 개씩 다해서 12칸을 3줄에 걸쳐 나타냈다.
<table border="1"> ""안에 수 크기만큼 테두리가 굵게 나타난다.
2.2 게시판
<table>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
<tr>
<td>1</td>
<td>안녕하세요</td>
<td>ingoo</td>
<td>2021-12-21</td>
<td>10</td>
</tr>
<tr>
<td>1</td>
<td>종말이 도래했다.</td>
<td>sh1234</td>
<td>2099-12-31</td>
<td>1</td>
</tr>
</table>#짜잔
| 번호 | 제목 | 작성자 | 작성일 | 조회수 |
| 1 | 종말이 도래했다. | sh1234 | 2099-12-31 | 1 |
2.3 회원가입 화면
<tr>이 4개 이상 필요하다. <td>는 2개 씩, <td> 안에는 어제(211220) 배웠던 <input>엘리먼트의 다양한 속성값들을 활용했다.
<table border="2">
<tr>
<td>아이디</td>
<td> <input type="text" placeholder="아이디를 입력해주세요." /> </td>
</tr>
<tr>
<td>패스워드</td>
<td> <input type="password" placeholder="패스워드를 입력해주세요." /> </td>
</tr>
<tr>
<td>성별</td>
<td>
<input="radio" name="gender" id="men" />
<label for="men">남자</label>
<input="radio" name="gender" id="women" />
<label for="women">여자</label>
</td>
</tr>
<tr>
<td>이메일</td>
<td> <input type="text"> @ <input type="text"> </td>
</tr>
</table>
#짜잔형
| 아이디 | |
| 패스워드 | |
| 성별 | 남자 여자 |
| 이메일 | @ |
3. 시멘틱 태그란?
웹페이지에서 표시되는 부분들을 태그로 의미지어 구분했다.
'이건 제목이야.', '이건 본문', '이 부분에는 글자가 많이 들어가.'
시멘틱 태그와 <div>는 같은 역할을 수행한다.
<header></header>
<aside></aside>
<section></section> 등이 있다.
