1. List
1) 자동으로 번호가 붙은 목록
<ol> </ol> 태그안에 <li> </li>태그를 넣어서 번호가 붙은 목록을 만들 수 있습니다. 사용방법은 다음과 같이 사용합니다.
<ol>
<li>List</li>
<li>Set</li>
<li>HashMap (Dictionary)</li>
<li>Queue</li>
<li>Stack</li>
<li>Tree</li>
<li>Sorting</li>
<li>Search</li>
</ol>그러면 웹 문서에서는 다음과 같이 보이게 됩니다.
2) 번호가 없는 목록
<ul> </ul> 태그안에 <li> </li>태그를 넣어서 번호가 없는 목록을 만들 수 있습니다. 사용방법은 다음과 같이 사용합니다.
<ul>
<li>List</li>
<li>Set</li>
<li>HashMap (Dictionary)</li>
<li>Queue</li>
<li>Stack</li>
<li>Tree</li>
<li>Sorting</li>
<li>Search</li>
</ul>웹 문서에서는 다음과 같이 보이게 됩니다.
만약 작은 원 대신에 다른 스타일을 쓰고 싶다면 css를 이용해서 바꿀 수 있습니다.
아래의 예시는 작은 원을 없애는 예시 입니다.
ul {
list-style: none;
}구글링 하면, 작은 원 말고도 다른 스타일을 찾을 수 있습니다. ㅎㅎ;;
2. Table
2.1 table 만들기
2X2행렬을 갖는 테이블을 만들어 보면 다음과 같습니다.
<table>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tr>
</table>이렇게 <table> 태그 안에 <tr>태그로 원하는 만큼 행(row)을 만들고, <td>태그로 원하는 만큼 열(column)을 만들고 데이터를 입력해 줍니다.
테이블의 테두리는 CSS로 만들어 줍니다.
<th>태그는 <td>를 대신하여 table의 셀에 이름을 줄수 있습니다.
<th>태그를 사용하면 가운데정렬이 되고, 글씨 두께가 두꺼워 집니다.
2.2 table 셀 병합
<td>태그랑 <th>태그에 속성으로 rowspan를 추가하면 행 병합을 하고,
colspan을 추가하면 열 병합을 합니다. 속성값으로 숫자를 입력하는데,
rowspan="3" 는 속성을 적용한 셀을 포함하여 아래 방향으로 3칸의 행을 병합합니다.
colspan="3" 는 속성을 적용한 셀을 포함하여 오른쪽 방향으로 3칸의 열을 병합합니다.
CSS 파일이 다음가 같이 되어 있다고 하고,
.border-table th, .border-table td {
border: 1px solid black;
}HTML 파일이 다음과 같이 되어 있다고 하면,
<table class="border-table">
<tr>
<th></th>
<th>내용</th>
<th>장소</th>
</tr>
<tr>
<th>1시</th>
<td>HTML이란</td>
<td>101호</td>
</tr>
<tr>
<th>2시</th>
<td rowspan="2">HTML실습</td>
<td>102호</td>
</tr>
<tr>
<th>3시</th>
<td>103호</td>
</tr>
<tr>
<th>4시</th>
<td>CSS란</td>
<td>104호</td>
</tr>
<tr>
<th>5시</th>
<td>CSS실습</td>
<td>104호</td>
</tr>
<tr>
<th>6시</th>
<td colspan="2">수업 없습니다.</td>
</tr>
</table>웹문서에서 보이는 table은 다음과 같습니다.
3. Input
웹사이트에 로그인을 하는 입력창이나 검색창과 같은 창에는 사용자가 텍스트나 숫자를 입력하게 끔 되어 있습니다..
입력은 <input> <textarea>태그를 이용 합니다.
3.1 <input>태그
<input type="text" placeholder="ID">
<input type="password" placeholder="비밀번호">
<input type="number" placeholder="학번"><input>태그에 들어있는 속성들을 보면
type 속성
"text"는 text를 입력합니다.
"password"로 속성값을 사용하면 남이 보지못하게 검은색 원으로 보이게 됩니다.
"number"는 숫자만 입력할 수 있으며, - 는 입력하지 못합니다.
placeholder 속성
placeholder는 실제 input에 입력되어 있는 텍스트가 아니라 도움말 식으로 보여줍니다.
3.2 <textarea>태그
<textarea>소개:</textarea><textarea>는 댓글이나 소개글 처럼 긴 텍스트를 입력할때 사용하는 태그입니다.
3.3 placeholder, type 스타일
<input>태그 안에 있는 placeholder속성의 속성값에 색상을 줄려고 하면 CSS로 다음과 같이 사용하면 됩니다.
input::placeholder {
color: #bbb;
}만약 <input>태그중 텍스트를 입력받는 태그만 스타일을 입히고 싶다면 CSS로 다음과 같이
사용하면 됩니다.
input[type="text"] {
}3.4 button 스타일
button {
color: white;
font-size: 15px;
background-color: #4CAF50;
}버튼에 마우스를 올리면 마우스 커서 모양이 바뀌게도 만들 수 있습니다.
button:hover {
cursor: pointer;
}위에서 hover는 마우스를 올렸다는 뜻입니다.
