HTML 문서 기본 구조
<!DOCTYPE html>
<html>
<head> // 문서 정보를 주는 태그
...
</head>
<body> // 화면에 보일 내용 태그
...
</body>
</html>
텍스트 관련 태그
- 제목 태그 : <h1> 제목 </h1> (1~6까지 있음, 1이 가장 큰 제목)
- 단락 만들기 : <p> 텍스트 </p>
- 줄 바꾸기 : <br>
※ 띄어쓰기 -
목록을 만드는 태그
- 순서 없는 목록 태그 : <ul>, <li>
- 순서 목록 태그 : <ol>, <li>
예제
<ol>
<li>목록1</li>
<li>목록2</li>
</ol>
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
출력 결과
1. 목록1
2. 목록2
- 목록1
- 목록2
- 목록3※ <li> 태그 블릿 없애기 - list-style:none;
표를 만드는 태그 <table>
- <thead> 태그는 표의 제목 영역 <table> 하위, <tr> 상위에 위치합니다.
- <tbody> 태그는 표의 본문 영역 <thead>와 같은 위치에 존재합니다.
- <tfoot> 태그는 표 요약 영역
- <tr> 표의 열 <td> 표의 행
예제
<table>
<thead>
<tr>
<th>학교</th>
<th>창립년도</th>
</tr>
</thead>
<tbody>
<tr>
<td>서울대학교</td>
<td>1946</td>
</tr>
<tr>
<td>고려대학교</td>
<td>1905</td>
</tr>
<tr>
<td>연세대학교</td>
<td>1885</td>
</tr>
</tbody>
</table>
출력 결과
| 학교 | 창립년도 |
| 서울대학교 | 1946 |
| 고려대학교 | 1905 |
| 연세대학교 | 1885 |
이미지와 하이퍼링크
- 이미지 : <img src="이미지경로" alt="대체_텍스트">
- 링크 만들기 : <a> 태그 <a href ="링크 주소"> 텍스트 </a>
※ 새 탭에서 링크 열기 : <a href="링크 주소" target="_blank"> 텍스트 </a>
구역을 나누는 태그
- <div> : 한줄 전체 공간을 차지(block element)
- <span> 자기 내용물 만큼의 공간만 차지(inline element)
반응형
'잡동사니' 카테고리의 다른 글
| [CSS]CSS 기초1 (0) | 2020.01.30 |
|---|---|
| [CSS]CSS 기초 (0) | 2020.01.23 |
| STT(Speech-to-Text) (1) | 2019.06.02 |
| LG그램 노트북 공장초기화 실패 해결하기 (2) | 2019.06.02 |
| 프론트엔드(Front-end)와 백엔드(Back-end)의 차이 (0) | 2019.05.05 |