HTML의 기본 태그에 대해 알아보자!
HTML의 태그를 알아보기 전 아이템과 상자에 대해 알아보자!
요소가 화면에 출력되는 특성이다.
블록은 물건이 든 상자, 인라인은 상자에 들어있는 물건 이라고 이해하면 쉽다.
인라인(inline)요소: 아이템를 만들기 위한 요소들
-
요소가 수평으로 쌓임
-
가로, 세로 사이즈 속성 사용 못함
-
포함한 콘텐츠 크기만큼 자동으로 줄어듬
-
여백 좌우만 가능, 위아래 불가능
-
인라인 요소 안 블록 요소 사용 불가능
블록(block)요소 : 상자(레이아웃)를 만들기 위한 요소들
-
요소가 수직으로 쌓임
-
가로, 세로 사이즈 속성 사용 가능
-
여백 상하좌우 모두 가능
-
블록요소 안에 인라인 요소 가능
기본 구조 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My test page</title>
</head>
<body>
</body>
</html>-
<!DOCTYPE html>
HTML로 인정받기 위해 HTML 페이지가 따라야 할 규칙으로의 연결통로로써 작동하는 것을 의미. HTML5버전을 나타낸다.
-
<html>
페이지 전체의 컨텐츠를 감싸며 루트(root)요소라고도 한다. -
<head>
HTML 페이지에 포함되어 있는 모든 것들의 컨테이너 역할을 한다. 검색 결과에 표시되길 원하는 페이지 설명, 컨텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들이 포함된다. -
<meta>
meta관련 요소로 나타낼 수 없는 metadata를 나타낸다.-
<meta charset="utf-8">
문서가 사용해야 할 글자의 포맷을 utf-8로 인코딩한다(utf-8 문자 집합에는 기록언어에 있는 대부분의 문자가 포함되어 있다.). 사용할 수 있는 어떠한 문자 컨텐트도 다를 수 있다. -
<meta name="viewport" content="width=device-width">
디바이스 스크린의 너비를 전부 사용한다고 정의
-
-
<title>
페이지의 제목을 설정하는 것으로 페이지가 로드되는 브라우저의 탭에 이 제목이 표시된다. 이 요소는 북마크나 즐겨찾기에서 페이지를 설명하는 것으로도 사용된다. -
<body>
페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐츠를 담고 있으며, 그것이 텍스트, 이미지, 비디오, 게임, 오디오 등 다른 무엇이든 될 수 있다.
텍스트 요소 태그
텍스트 태그
| 태그 | 설명 |
|---|---|
<h1~6> | 제목 또는 하위 제목 |
<p> | 문단 |
<span> | 구문 콘텐츠를 위한 통용 인라인 컨테이너, 서로 공유하는 요소를 묶을 때 사용 |
<br> | 줄바꿈, 줄의 구분이 중요한 내용을 작성할 때 유용 |
<pre> | 태그는 preformatted text로 입력한 텍스트 그대로 화면에 표시할 때 사용하는 태그 |
<hr> | 수평선을 표시하는 태그 |
텍스트 서식 태그
| 태그 | 설명 |
|---|---|
<b> ~ </b> | 굵게(bold) |
<i> ~ </i> | 이텔릭(italic) |
<small> ~ <small> | 작게 |
<ins> ~ </ins> | 밑줄(insert) |
<del> ~ </del> | 가운데 선 |
<mark> ~ </mark> | 하이라이트 |
<strong> ~ </strong> | 중요 |
<code> ~ </code> | 코드 |
<em> ~ </em> | 강조(emphasized text) |
<sup> ~ </sup> | 위 첨자(superscript) |
<sub> ~ </sub> | 아래 첨자(subscript) |
링크 태그
<a>: 다른 사이트로 통하는 링크나 같은 페이지의 다른 위치로 이동하는 링크를 만들 때 사용
<a href="www.google.com" target="_blank">구글</a>| 속성 | 설명 |
|---|---|
href | 하이퍼 텍스트 참조(hypertext reference) 속성 |
rel | 연결한 URL과의 관계를 나타냄 |
target | 링크한 URL을 표시할 위치 |
target="_blank" | URL을 새로운 브라우징 맥락에 표시 |
target="_self" | URL을 현재 브라우징 맥락에 표시 |
리스트 태그
순서가 없는 리스트(unordered list)
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul><ul>태그를 사용하여 전체 리스트 표현<li>태그를 사용하여 각 항목을 입력 (list item)
순서가 있는 리스트(ordered list)
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol><ol>태그를 사용하여 전체 리스트 표현<li>태그를 사용하여 각 항목을 입력
테이블 태그
<table>
<caption>테이블 1</caption>
<tr>
<th>성별</th>
</tr>
<tr>
<td>남자</td>
<tr>
<td>여자</td>
</tr>
</table><table> ~ </table>: 테이블 생성<tr> ~ </tr>: 테이블의 행(row) 생성<th> ~ </th>: 테이블의 헤드(head) 생성<td> ~ </td>: 테이블의 열(column) 생성<caption> ~ </caption>: 테이블의 캡션 설정
멀티미디어 태그
image 태그
어떤 요소들은 내용을 가지고 있지 않는다. 이것을 빈요소(empty elements)라 한다. <img>요소가 이에 해당한다.
<img src="images/firfox-icon.png" alt="My test image">
<img>: 이미지가 나타나야 할 위치에 이미지를 끼워 넣는다는 의미
| 속성 | 설명 |
|---|---|
src(source) | 이미지 파일의 경로 |
alt(alternative) | 설명문 |
width | 이미지의 픽셀 기준 고유 너비, 단위 없는 정수 사용 |
height | 이미지의 고유 크기, 단위 없는 정수 사용 |
-
alt(alternative)
이 속성에는 다음과 같은 이유로 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text)을 지정할 수 있습니다.-
시각 장애자인 경우. 시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)를 읽어주는 스크린 리더라는 도구를 자주 사용합니다.
-
무언가 잘못되어서 이미지를 표시할 수 없는 경우. 예를 들면, src 속성 안의 경로를 일부러 틀리게 변경해보세요. 저장한 후에 페이지를 다시 열면, 이미지가 표시되어야할 위치에 다음과 같은 것을 보게 될 것입니다.
-
오디오 태그
<audio src="audio.mp3" conrols autoplay></audio>
<audio>: 문서에 소리 콘텐츠를 포함할 때 사용
| 속성 | 설명 |
|---|---|
src(source) | 오디오 파일의 경로 |
controls | 오디오 재생버튼, 소리 조절을 할 수 있는 컨트롤러 활성 |
autoplay | 자동 재생 |
loop | 반복 재생 |
muted | 초기에 음소거 상태 |
preload | 오디오 파일 미리 다운로드 |
video 태그
<video src="video.mp4" controls width="300" height="200"></video>
<video>: 비디오가 나타나야 할 위치에 비디오를 끼워 넣는다는 의미
| 속성 | 설명 |
|---|---|
src(source) | 비디오 파일의 경로 |
controls | 비디오 재생버튼, 소리 조절을 할 수 있는 컨트롤러 활성 |
width | 비디오의 출력 영역 너비 |
height | 비디오의 출력 영역 높이 |
autoplay | 자동 재생 |
loop | 반복 재생 |
muted | 초기에 음소거 상태 |
preload | 비디오 파일 미리 다운로드 |
poster | 비디오의 썸네일 |
입력 양식 태그
form 태그
<form>: 사용자가 입력한 정보를 서버로 전송하는 기능
<form name="이름" action="sign.jsp" method="post">
<input type="text" name="name1" value="value1">
</form>| 속성 | 설명 |
|---|---|
action | 해당 서버로 정보를 보내는 주소 |
accept-charset | 보내는 정보를 인코딩, 대부분 utf-8를 인코딩 |
name | form태그 정보의 이름 |
target | 양식 제출 결과를 표시할 위치 |
target_blank | 응답을 새로운 브라우징 맥락에 표시 |
target_self | 응답을 현재 브라우징 맥락에 표시 |
method | 전송 방식 |
type | 입력 양식 모양 |
method속성: 입력양식의method속성에는 입력한 데이터의 전송방식(GET/POST) 설정- GET 방식
- URL의 뒷부분에 파라미터를 추가하여 데이터를 전달함
- URL에 어떤 데이터가 전송되는지 표현되어 있으므로 보안에 취약 (검색 등에 사용)
- 최대 글자 수: 2048
- POST 방식
- HTTP Request 헤더에 파라미터를 추가하여 데이터 전송
- 어떤 데이터가 전송되는지 표면상에 보이지 않기 때문에 GET 방식보다 보안성이 높음 (로그인 등)
- 글자 수 제한 없음
- GET 방식
form 관련 태그
form 태그에서 사용되는 다양한 태그들
| 태그 | 설명 |
|---|---|
<input> | 입력 제어 |
<label> | <input> 요소의 라벨 |
<select> | 드롭다운 리스트 |
<option> | 드롭다운 목록에서 옵션 |
<button> | 버튼 |
input 태그
<input>: 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성
| 속성 | 설명 |
|---|---|
type | type 특성에 따라 input의 요소 동작 방식이 달라진다.(text, password, email, submit, button, checkbox 등등) |
name | input정보의 이름 |
value | input으로 생긴 박스안에 내용을 적는다. |
label 태그
<label>: 인터페이스 항목의 설명
| 속성 | 설명 |
|---|---|
for | 누구의 이름표인지를 연결, 연결 시킬 속성의 id를 입력 |
버튼 태그
<button>: 클릭 가능한 버튼을 나타낸다.
| 속성 | 설명 |
|---|---|
name | 버튼 이름 |
type | 버튼의 행동 방식 |
select 태그와 option 태그
<select>: 옵션 메뉴를 제공하는 컨트롤을 나타냄
<option>은 select 요소의 항목을 정의한다. 그러므로,<option>을 사용해 팝업 메뉴 등 목록에서 하나의 항목을 나타낼 수 있습니다.
<select id="pets" name="pet-select" multiple>
<option value="dog" selected>강아지</option>
<option value="cat">고양이</option>
<option value="bird">새</option>
</select>class와 id
class 속성
- 여러 태그들을 하나의 그룹으로 그룹핑
- 태그에
class="클래스명"으로 지정 - CSS에서
.클래스이름으로 선택
id 속성
- 하나의 태그에 고유
id부여 - 태그에
id="고유id값"으로 지정 - CSS에서
#id값으로 선택
