[HTML5] 기본 태그 알아보기 -1

 

 

---

 

Visual Studio Code를 이용한 HTML5 태그 알아보기

국비지원수업 1일차

 

---

 

 

 

0. HTML이란?

---

HTML(Hyper Text Markup Language)

 

 

 

1. 주석 (<!-- -->)

---

 

주석(<!-- -->) : 브라우저 화면에 표시는 되지 않지만 참고용으로 적어둘 수 있는 설명이나 메모

Ctrl + / 로 작성한다

 

 

 

2. Header (<h1></h1>)

---

 

 

Header Tag : 문단의 제목이나 콘텐츠의 제목을 쓸 때 사용하는 태그

<h1></h1> 부터 <h6></h6>까지 존재하며, 숫자는 헤더의 크기를 나타낸다.

 

 

 

3. Paragraph (<p></p>)

---

 

Paragraph (<p></p>) : 문단이 끝남과 동시에 줄바꿈 작용

 

 

 

4. 한줄 개행 태그 (<br />, <hr />)

---

 

BR (<br />) : 사용된 곳에 한 줄 개행

HR (<hr />) : 사용된 곳에 한 줄 개행 + 가로 수평 라인 표시

 

해당 태그는 하나만 사용해서 기능을 발휘하는 단일 태그로, "/"가 뒤에 붙는다. (웹표준코딩에 의함)

 

 

 

5. Image (<img />)

---

 

Image (<img />) : 이미지를 삽입하는 태그

<img />는 단일 태그이며, 태그 이름 외의 속성값들이 추가된다.

 

---

5-1. 이미지를 불러오는 src 속성 

1. 표시할 이미지가 현재 html 파일(폴더)과 같은 폴더에 있을 경우

<img src="image.png"/>
<img src="./image.png"/>

 

* ./ : 현재 위치 (많이 사용하지는 않음)

 

2. 표시할 이미지가 현재 폴더보다 하위 폴더에 있을 경우

<img src="folder/image.png"/>
<img src="./folder/image.png"/>

 

3. 표시할 이미지가 현재 폴더보다 상위 폴더에 있을 경우

<img src="../image.png"/>

* ../ : 이전(상위) 위치

 

4. 이미지의 주소를 불러올 경우

<img src="(이미지주소)"/>

이 경우, 주소 상 이미지의 변형(삭제, 대체 등)이 있을 경우 함께 변경됨

---

5-2. 이미지의 크기와 외곽선을 결정하는 width, height, border 속성

1. width : 이미지의 가로 크기 (단위 : 픽셀)

<img src="image.png" width="300"/>

: 가로 300

 

2. height : 이미지의 세로 크기 (단위 : 픽셀)

<img src="image.png" height="150"/>

: 세로 150

 

width와 height 중 하나만 조정해도 비율에 맞춰 자동 조정됨비율을 생각하지 않고 조정할 경우 이미지 본래의 비율이 깨질 수 있음 (Naver 사진 참고)

 

3. border : 이미지의 외곽선 굵기 (단위 : 픽셀)

<img src="image.png" border="1"/>

: 외곽선 두께 1

 

 

6. Anchor (<a></a>)

---

 

Anchor(<a></a>) : 클릭하면 지정한 페이지나 사이트로 이동하는 태그

href="(링크)" 속성을 통해 사이트나 페이지를 지정할 수 있다

사이트(or 페이지)를 새 창으로 열고 싶다면 속성에 target="_blank" 추가하기

<a href="https://www.naver.com" target="_blank"><h1>naver로 이동<h1></a>

* _blank의 _는 추가하지 않아도 됨

 

---

6-1. 이미지에 Anchor 걸기 (응용)

 

<a></a> 앵커 태그 사이에 image 소스를 넣어주기

<a href="https://naver.com" target="blank"><img src="image.png" width="300" border="1"/></a>

 

 

 

7. List (<ol></ol>, <ul></ul>, <li></li>)

---

 

Ordered List (<ol></ol>) : 리스트 속 내용의 순서를 나타내는 태그

1. type 속성으로 "a" / "A" 로 순서를 나타낼 수 있음

2. start 속성으로 "n"번째 숫자/알파벳부터로 순서를 나타낼 수 있음

 

UnOrdered List (<ul></ul>) : 리스트 속 내용을 일련의 도형으로 나열하는 태그

type 속성으로 도형(ex) square)의 모양을 바꿀 수 있음

 

List (<li></li>) : 리스트의 내용

 

보통의 사이트의 경우 리스트 태그를 이용 후 CSS를 통해 레이아웃, 속성을 새로이함

 

 

 

8. Table (<table></table>, <tr></tr>, <td></td>)

---

table tag (<table></table>) : 테이블의 시작과 끝을 표시

table row (<tr></tr>) : 테이블 내 행의 시작과 끝을 표시, 필요한 행의 수만큼 table 태그내에 표시

table data (<td></td>) : tr 태그 내부에서 각 행의 열(칸)들의 시작과 끝을 표시, 필요한 열의 개수만큼  tr 태그 내부에 표시

 

* bgcolor로 알아보는 table 원리

table 아래 깔려져 있고, 그 위를 tr, 최상위에 td가 얹어져 있는 형태

 

 

 

---

8-1. table, tr, td 태그의 속성

8-1-1. table tag의 속성

1. border : 테이블의 외곽선 굵기

2. width : 테이블의 가로 크기

3. bgcolor : 배경색 (cellpadding 사이로 보임)

4. cellspacing : 셀과 셀 사이의 간격

5. cellpadding : 한 셀(칸)의 안쪽 여백, 글자와 셀 경계선과의 간격

6. align : 브라우저 상에 표시할 표의 좌우 정렬

8-1-2. tr tag의 속성

1. height : 행의 높이 조절

2. bgcolor : 배경색

3. align : 한 행에 적용할 각 열의 표시 내용 정렬 방식 (행마다 넣어줘야 함)

8-1-3. td tag의 속성

1. width : 1행에서 각 열의 너비를 조절, 각 열의 너비의 합은 table 너비와 같이 맞추기

* 1행에 적용하면 나머지 행에 똑같이 적용

2. bgcolor : 배경색

3. align : 셀 한 칸(1칸, 1셀)에 적용할 각 셀의 표시 내용 정렬 방식

---

8-2. 표의 테두리 나타내기 (응용)

<table border="0" width="500" cellspacing="1" bgcolor="blue">
	<tr height="50" bgcolor="white">
    	<td width=100></td>
    	<td width=100></td>
    	<td width=100></td>
    	<td width=100></td>
    	<td width=100></td>
    </tr>
	<tr height="50" bgcolor="white">
    	<td></td><td></td><td></td><td></td><td></td>
    </tr>
	<tr height="50" bgcolor="white">
    	<td></td><td></td><td></td><td></td><td></td>
    </tr>
	<tr height="50" bgcolor="white">
    	<td></td><td></td><td></td><td></td><td></td>
    </tr>
    <tr height="50" bgcolor="white">
    	<td></td><td></td><td></td><td></td><td></td>
    </tr>
</table>

 

1. table 태그의 border 속성을 0으로 설정

2. table 태그의 cellspacing 속성을 n(n ≠ 0)으로 설정

3. table 태그의 bgcolor 속성을 원하는 테두리 색으로 설정

4. 모든 tr 태그에 bgcolor 부여

---

8-3. table 셀 합치기 (colspan, rowspan)

 

colspan : 행방향 합침

rowspan : 열방향 합침

 

테이블의 셀 합치는 방법

1. 합치고자 하는 셀을 확인

2. 확인된 셀 중 가장 왼쪽이면서 가장 위쪽에 있는 셀만 남기고 나머지 td 태그를 지움

3. 합쳐진 셀들의 개수를 남아있는 셀의 속성으로 표시

 

ex) 6칸 합치기 (예시 사진 속 4행 1열)

1. 4행 1열부터 5행 3열까지 합치기 위해 가장 왼쪽이자 가장 위에 있는 4행 1열만 남기고 나머지 td 태그 삭제

2. 4행 1열 tg 태그 기준으로 가로로 총 3칸 합쳐졌으니 colspan="3", 세로로 총 2칸 합쳐졌으니 rowspan="2" 속성 추가

<td colspan="3", rowspan="2">4행 1열</td>

 

---

8-4. colspan, rowspan 응용

 

* 계단식 (ㄴ / ㄱ 등) 으로는 합치지 못한다