잡동사니

[HTML] HTML 태그

jungeun960 2020. 1. 22. 15:06
HTML 문서 기본 구조
<!DOCTYPE html>
<html>
	
    <head>	// 문서 정보를 주는 태그
    ...
    </head>
	
    <body>	// 화면에 보일 내용 태그
    ...
    </body>
    
    
</html>

 

텍스트 관련 태그
  • 제목 태그 : <h1> 제목 </h1> (1~6까지 있음, 1이 가장 큰 제목)
  • 단락 만들기 : <p> 텍스트 </p>
  • 줄 바꾸기 : <br>

    ※ 띄어쓰기 - &nbsp;

 

목록을 만드는 태그
  • 순서 없는 목록 태그 : <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)

 

반응형