기초적인 HTML 태그 정리

요즘 HTML 공부중이라서 공부하는 내용을 그대로 정리해서 적어보았습니다.

제가 공부한 책은 '이지스퍼블리싱'에서 출판된 고경희님의 'HTML5+CSS3 웹 표준의 정석'입니다.


기본적으로 HTML은 딱 우리눈에 직관적으로 보여지는 것들을 위주로 표현하는 소스들이지 그 자체로 힘은 별로 없는 소스들입니다. 이제 차차 CSS부터 자바스크립트-제이쿼리, 자바언어 등을 알아가면서 더 풍부한 창조의 세계헬지옥의 난이도로 떠나야 겠습니다!



기초적인 HTML 태그 정리


1. 가장 기본 태그

<!doctype html> : 문서 유형 지정. 이 문서는 HTML 5로 작성될겁니다라고 미리 신호를 주는 요소로 맨 처음 작성.


<html></html> : HTML 문서의 전체 시작과 끝.


<head></head> : 브라우저에게 정보를 주는 태그로 실제 화면에는 표시 안되지만, 웹 브라우저가 인식해야할 정보들을 담고 있음. (제목이나 속성 규정, 설명<meta>, 스타일<style>, 링크<link>같은 것들.)

-> <title></title> : 문서 제목

-> <meta>태그 : 문자 인코딩 및 요약 정보, 문서 키워드 등을 담을 수 있음.

<meta charset="utf-8'/> : utf-8은 모든 언어의 인코딩이 가능하며, HTML5는 이 것을 사용한다. (*이 태그는 독립적으로 쓰는게 좋다.)

<meta name ="description" content="사이트 설명"> : 사이트에 대한 간단한 설명.

-> <style></style> : 스타일 태그, CSS사용시 사이에 CSS폼들을 넣는다.

-> <link></link> : 링크 태그.


<body></body> : 브라우저의 몸통. 실제 브라우저에 표시되는 내용들이다. 아래에 들어갈 태그들은 <body>사이 태그들이다.



2. 텍스트 태그

<h1></h1> : 제목 태그, 숫자는 1~6까지로 숫자가 낮을 수록 글씨 크기가 더욱 커진다.

<p></p> : 텍스트의 시작과 끝을 알리는 태그. <p></p>로 인해 단락으로 인식된다.

<br> : 줄바꿈 태그.

&nbsp : 띄어쓰기할때 삽입태그.

<hr> : 구분선 삽입.

<pre></pre> : 프리 태그는 에디터에 작성한 공백란 그대로를 적용해서 보여주는 것이다. (설명 : http://mainia.tistory.com/2892)

<strong></strong> : 굵게 강조하는 태그로 경고, 주의사항에 어울린다. 시각장애인을 위한 낭독기도 표시를 인식한다.

<b></b> : 굵게 표시하는 태그로 키워드 표시에 어울린다.

<i></i> : 비스듬히

<em></em> : 비스듬히+굵게!

<mark></mark> : 형광펜 효과

<span></span> : 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 바꿔 스타일(색변경같은...)을 적용할때.

(ex)<span style="color:red;">

<u></u> : 밑줄. (가나다)

<s></s> : 취소선. (가나다)

<abbr> : 약자 표시, Title속성을 함께 사용할 수 있다.

<small></small> : 작게 표시되는 내용.

<section></section> : 텍스트의 콘텐츠 영역을 표시하는 태그.



3. 목록 태그

<ul></ul> : 순서가 상관없는 목록.

<li></li> : 순서가 상관없는 목록 안 개별 항목. (끝내는거 생략가능.)

(ex)<ul>

  <li>항목1</li>

  <li>항목2</li>

     </ul>

<ol></ol> : 순서가 필요한 목록. (<li>태그가 1,2,3... 숫자로 표기됨 - type 속성으로 변경 가능.)

<dl></dl> : 설명 목록 만들때. 시작태그.

<dt></dt> : 목록의 제목란.

<dd></dd> : 목록의 설명란.



4.  태그

<table></table> : 표의 시작과 끝을 알리는 태그. - <border> : 태두리. 태이블 태그 안에 같이 표시. 안쓰면 태두리 없이 표시됨.

<tr></tr> : 표의 행 - 1개에 하나의 행.

<td></td> : 표의 셀 - 1개에 하나의 셀.

<th></th> : 제목 셀.

<colspan>-<cols>로 사용 가능. : 셀 가로로 합치기. <td>, <th> 안에서 사용.

<rowspan>-<rows>로 사용 가능. : 행 세로로 합치기. <td>, <th> 안에서 사용.

<caption></caption> : 표 제목. <table>태그 아래에 작성하며. <p>태그로 텍스트를 열어줌. 중앙 정렬.

<figcaption></figcaption> : 표 제목. <table>태그 위에 작성. <p>태그로 텍스트를 열어줌. <figure>태그로 표 전체를 감싸준 다음 사용 가능. 중앙 정렬X

<col> : 한 열에 있는 모든 셀을 묶어서 스타일 태그 적용

<colgroup></colgroup> : 둘 이상의 열을 묶어둘때 사용.

-> <col>계열은 <caption>보단 뒤에, <tr>,<td>보다 앞에 사용해야한다. 행을 묶는 태그는 따로 없음.

<div></div> : 레이아웃 상자 태그, 주로 웹페이지의 레이아웃 영역을 구성할때 가장 많이 사용.



5. 이미지 태그

<img> : src를 이용해 경로를 정해줌. 이미지 기본 태그. <img src ="이미지 주소">

(!)경로표시 : 한단계 아래 폴더-> / 사용, 한단계 위 폴더-> .. 사용

<alt> : 이미지 설명. src처럼 <img>태그 안에다 사용하는 속성이다.

<width>,<height>속성 : 이미지의 가로, 세로 크기값을 조절하는 속성. 역시 <img>태그 안에 사용하며 수치로 표현한다.



6. 링크 태그

<a></a> : 가장 기본적인 링크 태그로 무슨 속성을 붙이느냐에 따라 링크유형이 결정된다.

<href> : 주소/경로값 속성. <a>태그 안에서 사용되는 속성값이다. -> <a href="링크주소">

<target> : 링크가 표시될 위치속성, 새창이나 새탭에 띄울때 속성은 "_blank"다. 

<download> : 링크의 다운로드 속성

<rel> : 현재문서와 링크문서간 관계속성


*텍스트 링크의 밑줄을 없애고, 글자색 바꾸기 CSS

<style>

a {text-decoration:none;color:색상값;}

</style>



7. 앵커(북마크) 태그

: 앵커는 한 페이지내에서 특정요소로 이동시키는 기능.

*이동 위치마다 id 속성(=태그 고유이름 같은겁니다.)을 이용해 앵커를 만들고 각각 이름을 다르게 지정해야한다.

*만들어진 앵커를<a>태그를 사용하여 링크.

<태그 id="앵커이름">텍스트나 이미지</태그> -> 앵커 만들기 예제

<a href="#앵커이름">텍스트나 이미지</a> -> 앵커링크걸기 에제

*앵커값을 만들고 싶은 위치에 존재하는 태그안에 속성으로 id를 넣어주면 된다. id는 공통속성이라 어느 태그에서도 호환가능.



8.  태그

: 한 이미지의 클릭위치에 따라 다른 링크가 이어지게 하는 태그.

*<map></map>태그를 이용해서 위치맵을 만듭니다. 위치는 <area>태그를 이용합니다.

<map name="네임명">

<area shape="rect" coords="01,05,50,55 herf="주소>

</map>

*<shape>는 클릭될 모양으로 "rect"=사각형, "poly"=다각형, "circle"=원입니다.

*<coords>좌표값 속성입니다. 끝에서 끝으로 지정합니다.



9. 태그

<form></form> : 가장 기본적인 form형태. <form>안에는 속성 태그를 넣고, <form>과</form>사이에는 폼의 요소를 넣는다,

<form> 속성

-method : 사용자가 입력한 내용들을 서버쪽 프로그램으로 어떻게 넘겨줄지 지정. 대부분 post를 사용.

-name : 폼의 이름 지정. 여러개의 <form>태그 사용시 구분을 위해 필요.

-action : <form>태그 안의 내용들을 처리해줄 서버 상 프로그램 지정.

(ex)<form action="register.php"> : register.php는 등록 정보를 처리해줄 서버 프로그램.

~각종 폼 요소~

</form>

-target : <action>태그에서 지정한 스크립트 파일을 열 위치 지정. (링크의 target과 같음.)

-autocomplete : 자동완성기능 속성. 기본값은 on. 끄기위해서는 off로 지정.

<label></label> : 레이블 요소. 입력창옆에 '아이디'나 '비밀번호'처럼 이름(라벨)을 붙여주는 입력폼의 네임 텍스트.

: <label></label> 사이에다가 input 폼요소를 넣거나, <label for=요소,id>로 연결시켜 <input>과 연결하는 방법이 있다. 

<fieldset></fieldset> : 태그 사이의 폼들을 하나의 사각박스 영역으로 묶어줌.

<legend></legend> : <fieldset>태그로 묶인 영역에 제목을 붙여줌. (영역을 보여주는 박스 테두리에 붙음.)



10. 입력 태그

<input></input> : 입력창 폼 태그. <input type="속성">으로 종류를 정해줌.

<input type>의 종류

-hidden : 사용자에게는 보이지 않지만 서버로 넘겨지는 값

-text : 한 줄 텍스트 입력이 가능한 텍스트 상자.

-search : 검색 상자.

-tel : 전화번호 입력 상자.

-url : 인터넷 주소 입력 상자.

-password : 비밀번호 입력 상자.

-email : 이메일 주소 입력 상자.

-datetime / datetime-local / date / month / week / time : 날짜. (크게 필요X)

-number : 숫자조절 화살표.

-range : 숫자조절 슬라이드 막대.

-color : 색상표.

-checkbox : 주어진 항목에서 2개 이상 선택 가능한 체크박스. (-> 네임을 같게하던, 다르게하던 모두 선택가능.)

-radio : 주어진 항목에서 1개만 선택 가능한 라디오 버튼. (-> radio의 경우는 같은 name으로 묶여있을때만 선택지중 하나만 선택 가능. 네임을 다르게 하면 네임이 다른 선택항목은 모두 선택 가능함.)

-file : 파일첨부 버튼.

-submit : 서버전송 버튼.

-image : submit버튼 대신 사용할 이미지.

-reset : 리셋 버튼.

-button : 버튼 삽입.

(ex) 예시

<input type="종류" name="이름" id="id값" value="서버로 넘길 값">

: value는 서버로 넘기는 값입니다. id값과 연동된 자바스크립트 프로그램이 input의 value값을 서버로 넘겼다가 반응합니다.

(ex)검색폼 만들기

<form action="search.php" method="post">

<input type="text" title="검색">

<input type="submit" value="검색">

</form>

[속성]

-size : 인풋 필드 길이.

-maxlength : 텍스트 필드에 입력 가능한 최대 문자수.

-minlength : 텍스트 필드에 입력 가능한 최소 문자수.

-value : 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 처음 표시될 내용으로 처음 화면에 나타나는 값을 의미한다. (password에는 value속성이 없음.)

-name : 이름.

-min : 최소값, max : 최대값, step : 한번에 증가/감소하는 값 : number-range속성이나 날짜속성에서 사용.

-onclick="window.open('주소')"/"window.close('주소')" - 새창에서 열기, 닫기 옵션. : button속성에서 사용.

-autofocus : 자동 커서. (페이지가 로딩되자마자 커서가 input창에 떠있음.)

-placeholder : input창에 미리 써있는 문구. (입력을 위해 클릭시 없어짐.)

-readonly : 쓰지 못하고, 읽게만 할 수 있다. (속성값은 = true, false)

-required : 입력 후 조건이 맞지 않을때 경고창이 뜹니다.

-disabled : 폼 자체를 사용자가 제어/사용할 수 없게한다. (폼기능 정지.)



11. 드롭다운 목록 태그

-여러 옵션 중 선택하고 싶을때 사용하는 목록 태그.

<select></select> : 드롭다운 목록 시작과 끝.

<option></option> : 목록 옵션. <option value="값" 속성="속성값">내용</option>

<optgroup></optgroup> : option들을 그룹으로 묶을때 사용하는 그룹태그.

<datalist></datalist> : <select>대신 데이터리스트에서 드롭다운 목록을 만들때 사용하는 태그.

-공통속성외에 추가속성

-multiple : <select>에 사용. ctrl키를 누른 상태로 다중선택 가능.

-selected : <option>에 사용. 이미 선택된 값 지정.

-list="id" : input태그 안에서 데이터(id값에 해당하는) 목록 사용을 선언하는 속성.



12. 그외 태그

<textarea></textarea> : 여러 줄 입력 가능한 텍스트 영역.

-속성

: cols - 가로 너비 (입력한 열의 수에 따라 정해짐)

: rows - 세로 길이 (입력한 행의 수에 따라 정해짐)


<button></button> : input의 버튼처럼 버튼 직접 추가 가능.

*버튼에 이미지를 넣기 예제

<form>

<button type="submit" class="subm">

<img src="images.png">전송하기

</button>

</form>

: 버튼태그를 닫기 전에 이미지 첨부.


<output></output> : 계산결과. 묶인 부분이 계산결과라는 것을 브라우저에게 전송.


<progress></progress> : 작업 진행 상태를 보여주는 태그. value는 여기서 작업 진행 상태를 나타내며, max는 최대값으로 100분위로 표시.


<meter></meter> : 전체 크기 중 얼마나 차지하는지를 표현할때 사용.

이 글을 공유하기

댓글(0)

Designed by JB FACTORY