<HTML> 하이퍼텍스트 문서를 만들기 위해 데이터를 구조화 시키는 마크업 언어
1. 구성
<여는 태그>컨텐츠</닫는 태그>
<요소 속성='...'>컨텐츠</요소> ...
<p>
<b>진하게(<b>)</b>
<br>
<strong>강하게(<strong>)</strong>
<br>
<i>기울임(<i>)</i>
<br>
<em>강조하여(<em>)</em>
<br>
<small>작은 텍스트, 코멘드 (<small>)</small>
<br>
위<sup>첨자</sup>(<sup>)
<br>
아래<sub>첨자</sub>(<sub>)
<br>
<ins>내용 추가</ins>(<ins>)
<br>
<del>내용 삭제</del>(<del>)
</p>
진하게(<b>)
강하게(<strong>)
기울임(<i>)
강조하여(<em>)
작은 텍스트, 코멘드 (<small>)
위첨자(<sup>)
아래첨자(<sub>)
내용 추가(<ins>)
내용 삭제(<del>)
2. 요소 <태그이름 속성이름:속성값>
1) 블록요소 : 줄바꿈. 블록 요소 안에 텍스트나 인라인 요소 포함 가능. 블록 요소 안에 블록 요소 포함 가능
2) 인라인 : 줄바꿈 없음. 인라인 요소 안에 텍스트나 인라인 요소 포함 가능. 인라인 요소 안에 블록 요소 포함 불가.
3) 태그 정리
(1) <h..> 태그 : 제목 크기 지정 태그.
(2) <div> : 영역 정의
(3) <p> : 단락 정의
(4) <img src="주소" alt="안뜨면 나올 말" width="..px" height="..px"> : 이미지
(5) <a href="링크"> : 하이퍼링크
<a href="#"> : 처음으로 이동. '#' 뒤에 이동하고 싶은 태그의 id를 입력하면 거기로 이동 ex. #intro
(6) <map><area> : 클릭 가능한 링크영역 이미지
3. 이외 태그
1) 리스트(목록) 태그
(1) <ol><li> : Ordered List. 순서가 있는 목록
<!--ordered list-->
<ol>
학원 오는 순서
<li>눈을 뜬다</li>
<li>침대에서 나온다</li>
<li>씻는다
<ol>
<li>양치한다</li>
<li>머리감는다</li>
<li>샤워한다</li>
</ol>
</li>
<li>옷입는다</li>
<li>출발한다</li>
</ol>-
학원 오는 순서
- 눈을 뜬다
- 침대에서 나온다
- 씻는다
- 양치한다
- 머리감는다
- 샤워한다
- 옷입는다
- 출발한다
(2) <dl><dt제목><dd내용> : Definition(Description) List. 정의형 목록
<!--definition list(description list)-->
<dl>
<dt>데이터 사이언스, 엔지니어링 커리큘럼</dt>
<dd>python</dd>
<dd>numpy / pandas</dd>
<dd>html css js jq</dd>
<dd>django</dd>
<dd>crawling / visualization</dd>
<dd>
<dl>
<dt>ds</dt>
<dd>ml</dd>
<dd>dl</dd>
</dl>
<dl>
<dt>de</dt>
<dd>ml</dd>
<dd>hadoop / spark</dd>
</dl>
</dd>
</dl>- 데이터 사이언스, 엔지니어링 커리큘럼
- python
- numpy / pandas
- html css js jq
- django
- crawling / visualization
-
- ds
- ml
- dl
- de
- ml
- hadoop / spark
2) 테이블 태그
(1) 기본 테이블
<h2>기본 테이블</h2>
<table>
<tr>
<th>컬럼a</th>
<th>컬럼b</th>
</tr>
<tr>
<td>데이터1</td>
<td>데이터2</td>
</tr>
<tr>
<td>데이터3</td>
<td>데이터4</td>
</tr>
</table>기본 테이블
| 컬럼a | 컬럼b |
|---|---|
| 데이터1 | 데이터2 |
| 데이터3 | 데이터4 |
(2) 옵션이 있는 테이블
<table border="1">
<caption>테이블 제목</caption>
<colgroup>
<col width='100px' style="background-color: cornflowerblue;">
<col width='300px'>
<col width='500px'>
</colgroup>
<thead>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>foot1</td>
<td>foot2</td>
<td>foot3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr style="color: crimson;">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>| 컬럼1 | 컬럼2 | 컬럼3 |
|---|---|---|
| foot1 | foot2 | foot3 |
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 | 9 |
(3) 셀 병합
<table border="1">
<colgroup>
<col width = '200px'>
<col width = '200px'>
<col width = '200px'>
<col width = '200px'>
</colgroup>
<thead>
<tr>
<th>컬럼1</th>
<th>컬럼2</th>
<th>컬럼3</th>
<th>컬럼4</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='2'>1 (열 합치기)</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>6</td>
<td colspan='2'> 7 행 합치기</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" align="center">행 4개 합치기</td>
</tr>
</tfoot>
</table>| 컬럼1 | 컬럼2 | 컬럼3 | 컬럼4 |
|---|---|---|---|
| 1 (열 합치기) | 2 | 3 | 4 |
| 6 | 7 행 합치기 | 8 | |
| 9 | 10 | 11 | 12 |
| 행 4개 합치기 | |||
3) 선택리스트 박스
<h1>select</h1>
<form action="html-form-res.html" method="get">
<p>
점심
<select name="lunch">
<option value="chicken">치킨</option>
<option value="pizza">피자</option>
<option value="sushi">초밥</option>
<option value="maratang">마라탕</option>
</select>
</p>
<p>
저녁
<select name="dinner">
<optgroup label="한식">
<option value="Ttuckbockki">떡볶이</option>
<option value="Bulgogi">불고기</option>
</optgroup>
<optgroup label="양식">
<option value="pasta">파스타</option>
<option value="steak">스테이크</option>
<option value="taco">타코</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="선택">
</p>
</form>select
* 회원가입 창 만들기
<form action="html-form-res.html" method="post">
<fieldset>
<legend>회원가입</legend>
<p>ID : <input type='text' name="id"></p>
<p>PW : <input type="password" name='pw'></p>
<p>Email 수신 여부<br>
<input type="radio" name='rdo' value="y">y
<input type="radio" name='rdo' value="n">n
</p>
<p>관심분야<br>
<input type="checkbox" name="web" id="web">WEB<br>
<input type="checkbox" name="ai" id="ai">Data Science<br>
<input type="checkbox" name="engi" id="engo">Data Engineer<br>
</p>
<p>하고싶은 말<br>
<textarea name="ect" cols="60" rows="10"></textarea>
</p>
<p>
<input type="button" value="그냥 버튼"><br>
<input type="reset" value='취소'><br>
<input type="submit" value='전송'>
</p>
</fieldset>
</form>
728x90
'코딩 어쩌구 > web' 카테고리의 다른 글
| [풀스택] jQuery (0) | 2022.01.30 |
|---|---|
| [풀스택] JavaScript (2) : DOM (0) | 2022.01.29 |
| [풀스택] JavaScript (1) : 기본 조작 (0) | 2022.01.27 |
| [풀스택] HTML, CSS로 Layout 만들기 (0) | 2022.01.26 |
| [풀스택] CSS (0) | 2022.01.22 |
